vue进阶语法及生命周期函数
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动态切换的效果
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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)