Vue.js笔记(一)

Vue.js引入方法

CDN引入

下载vue.js

Vue.js的使用

1.创建Vue对象 new Vue({})

2.属性

el:element 需要获取的元素，一定是html的根容器元素

data:用于数据的存储

methods:用于存储各种方法

3.在使用数据的地方使用{{ data的属性名}}或{{methods中方法名()}}

4.代码示例
js代码：

new Vue({
	el:"#vue-app",
	data:{
		name:"andy"，
		job:"java Web开发"
	},
	methods:{
	     greet:function(time){
	        return 'Good '+time+'!';
	    }
	}
});

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
	<link rel="stylesheet" type="text/css" href="./css/style.css">
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<div id="vue-app">
		<h1>{{greet('afternoon')}}</h1>
		<p>Name:{{ name}}</p>
		<p>job:{{job}}</p>
	</div>
	<script type="text/javascript" src="./js/app.js"></script>
</body>
</html>

4.数据绑定
v-bind:属性=Vue属性
如：

v-bind:href=""
v-bind:value="
v-html=""

5.事件绑定
v-on:事件名="方法名"
@事件名="方法名"
如：

on:click="add()"
列表项