1.calss和style绑定
操作元素的 class 列表和内联样式style是数据绑定的一个常见需求，它两都是属性，所以可以通过v-bind来绑定
1.1绑定HTML class
可以给v-bind：class一个对象，以动态切换class
<div v-bind:class="{ active: isActive }"></div>
这里也可以在对象中传入多个属性来动态切换class
模板：
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>
data：
data: {
isActive: true,
hasError: false
}
结果渲染：
<div class="static active"></div>
通过控制绑定事件控制内联样式style，实现js动态切换的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击更换图片颜色</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .c { height: 200px; width: 200px; border-radius: 50%; background-color: red; } .c1 { background-color: green; } </style> <body> <div id="app"> <!-- v-on来监听元素点击事件 --> <div class="c" v-bind:class="{c1:ok}" v-on:click="meta"></div> </div> </body> <script> new Vue({ el:"#app", data:{ ok:false }, // 这里的这个this.ok = !this.ok用的很妙啊 methods:{ meta:function(){ this.ok = !this.ok } } }); </script> </html>
效果：
1.2数组语法
通过把一个数组传给v-bind：class，以应用一个class列表
<div v-bind:class="[activeClass, errorClass]"></div>
1.3表单输入绑定
用v-model指令在表单input即textarea元素上创建双向数据绑定，它的本质其实就是语法糖，负责监听用户的输入事件以更新数据
<div id="app"> <div id='example-3'> <!-- 多行文本 --> <span>多行显示：</span> <p style="white-space: pre-line;">{{ msg }}</p> <textarea v-model="msg" placeholder="多行添加"></textarea> <br> <!-- 多个复选框 --> <input type="checkbox" id="jack" value="basketball" v-model="hobby"> <label for="jack">篮球</label> <input type="checkbox" id="john" value="football" v-model="hobby"> <label for="john">足球</label> <input type="checkbox" id="mike" value="doublecolorball" v-model="hobby"> <label for="mike">双色球</label> <br> <span>我的爱好: {{ hobby }}</span> <!-- 单选按钮 --> <br> <input type="radio" value="one" v-model="picked"> <label for="one">one</label> <input type="radio" value="two" v-model="picked"> <label for="two">two</label> <br> <span>选中：{{picked}}</span> <!-- 选择框 --> <br> <select v-model="selected"> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> </div> <script> var app = new Vue({ el: "#app", data: { hobby:[], picked:'', selected:'' } })
效果：
这里还有更多实例，详见vue语法教程官网
1.4小清单实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小清单</title>
</head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
/*c1下的首个span标签*/
.c1 > span:first-child{
color: red;
text-decoration: line-through;
}
</style>
<div class="container">
<div class="row">
<div id="app" class="col-md-6 col-md-offset-3" style="margin-top: 100px">
<div class="panel panel-danger">
<!-- 标题 -->
<div class="panel panel-heading">
<h3 class="panel-title">小清单</h3>
</div>
<!-- 输入框 -->
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="Amount"
v-model= "newlis.title"
>
<span class="input-group-btn">
<!-- button按钮绑定属性 -->
<button
class="btn btn-default"
type="button"
v-on:click="add"
>
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
<hr>
<!-- 列表栏 -->
<div class="list-group">
<!-- 内容主题框架 -->
<div class="list-group-item"
v-for="(item,index) in nextList"
v-bind:class="{c1:item.ok}"
>
<!-- 打钩 -->
<span class="glyphicon glyphicon-ok-sign"
v-on:click="changecolor(index)"
> {{ item.title }}</span>
<!-- 叉按钮 -->
<span class="glyphicon glyphicon-remove pull-right"
v-on:click="remove(index)"
></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
nextList:[],
newlis:{
title:'',
ok:false
}
},
methods:{
// 添加内容到列表，将this.newlis进行深拷贝传到nextList
add:function(){
var obj = Object.assign({}, this.newlis);
this.nextList.push(obj);
// 每次输入提交后，输入栏清零
this.newlis.title=''
},
// 点击钩，替换颜色
changecolor:function(index){
this.nextList[index].ok = !this.nextList[index].ok
},
// 点击叉，触发删除事件
remove:function(index){
this.nextList.splice(index,1)
}
}
});
</script>
</html>
效果：
2.上述总结
1. Vue使用
1. 生成Vue实例和DOM中元素绑定
2. app.$el --> 取出该vue实例绑定的DOM标签
3. app.$data --> 取出该vue实例绑定的data属性
2. 模板语法
1. {{name}} --> 在标签中间引用data属性中的变量
2. v-html='msg' --> 在页面上显示我定义的标签元素
3. v-if='ok' --> 控制标签在不在DOM中
4. v-show='!ok' --> 控制标签的display属性的值（是否显示）
5. v-bind:href='url' --> 将标签的属性和vue实例的data属性绑定起来
6. v-on:click='dianwo'--> 给标签绑定一个点击事件，方法需要在vue实例的methods中定义
7. v-model='article' --> 用在input标签和textarea标签中，将用户输入和vue实例中的数据属性建立双向绑定
3. 计算属性和侦听器
1. 计算属性
（字符串翻转的例子）
1. 计算属性需要定义在vue实例的 computed 中
2. 多用于对变量做一些自定义的操作
3. 我们在页面上像使用普通data属性一样使用计算属性
2. 侦听器
多用于一些复杂的运算或者异步操作
侦听器需要放在 vue实例的 watch 中
4. class和style属性
1. 基于对象的绑定
2. 基于数组的绑定
5. 条件渲染
v-if
如果想控制多个标签的显示与否，可以使用 template 标签把它们包起来
v-if/v-else
v-if/v-else if /v-else
3.生命周期钩子函数
这和在django中学的钩子函数定义一样，都是为了给在不同阶段能够添加自己的代码的机会
示意图：
# 红色框内的即为钩子
详细解释：点击这里
Vue的生命周期，就是从Vue实例被创建开始到实例销毁时的过程，整个过程主要可以分为八个阶段分别是：
- 创建前（beforeCreate）
- 已创建（created）
- 编译前（beforeMount）
- 编译后（mounted）
- 更新前（beforeUpdate）
- 更新后（update）
- 销毁前（beforeDestroy）
- 销毁后（destroyed）