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()"
- 列表项