第3章 Vue指令《Vue应用程序开发》教学课件.pptxVIP

《Vue应用程序开发》?精品课件合集?精品课件合集Vue应用程序开发（第三章 Vue指令）1、Vue常用指令目 录2、综合运用1.1 指令详讲Vue常用指令11.2 Vue动态样式绑定1.3 Vue表单输入绑定1. Vue常用指令1.1 指令详讲指令是带有 v- 前缀的特殊属性。当表达式的值改变时 ，将其产生的连带影响 ，响应式的作用于DOM。（1）v-if指令v-if 指令可以完全根据表达式的值在 DOM 中生成或移除一个元素。div id=app p v-if=notice公告/p/divnew Vue({ el: #app, data:{ notice:true }}) 1. Vue常用指令1.1 指令详讲（2）v-for指令通过一个对象的属性来迭代ul id=repeat-object class=demo li v-for=value in object {{ value }} /li/ul 1. Vue常用指令1.1 指令详讲（2）v-for指令提供第二个的参数为键名提供第三个参数为索引div v-for=(value, key) in object {{ key }} : {{ value }}/divdiv v-for=(value, key, index) in object {{ index }}. {{ key }} : {{ value }}/div1. Vue常用指令1.1 指令详讲（2）v-for指令整数迭代div span v-for=n in 10{{ n }} /span/div1. Vue常用指令1.1 指令详讲（3）v-on指令v-on 指令绑定一个事件监听器，v-on 指令用于绑定 HTML的单击事件用 v-on:click 缩写为 @click。div id=app !-- greet 是在下面定义的方法名 -- button v-on:click=greetGreet/button/divscriptvar app = new Vue({ el: #app, data: { name: Vue.js }1. Vue常用指令1.1 指令详讲（3）v-on指令// 在 methods 对象中定义方法 methods: { greet: function () { // this 在方法里指当前 Vue 实例 alert(this.name + 的方法被调用了！ ) }}})/script 1. Vue常用指令1.1 指令详讲（4）v-show指令div id=app button v-on:click=toggle()Toggle/button p v-show=okv-show 控制 display 属性/p pok： {{ok}}/p/divscript var vm=new Vue({ el:#app, data:{ok:true} methods:{ toggle(){ this.ok=!this.ok; } }})/script1. Vue常用指令1.2 Vue动态样式绑定v-bind 指令属性Vue 指令以 v-前缀开始，数据绑定的指令 v-bind:属性名 v-bind 绑定 class绑定 class 属性，采用对象表达式计算属性方式v-bind 数组表达式绑定 class 属性绑定 class 属性，采用数组表达式、三元表达式混合使用v-bind 对象语法绑定行内样式绑定行内样式，采用对象语法v-bind 数组语法绑定行内样式绑定行内样式，采用数组语法1. Vue常用指令1.2 Vue表单输入绑定（1）指令 v-model v-model 指令在表单控件元素上创建双向数据绑定，根据控件类型它能够自动选取正确的方法来更新元素。1. Vue常用指令div id=app select option v-for=opt in opts :value=opt.value {{ opt.text }} /option /select/divscript let vm = new Vue({ el:#app, data:{ opts:[ {text:HTML5,value:html5}, {text:CSS3,value:css3}, {text:JavaScript,value:js} ] } })/script1.2 Vue表单输入绑定（2）v-bind 在控件上绑定 value复选框单选按钮选择列表设置选择列表 v-bind 绑定 value综合运用22. 综合运用综合运用演示-使用计算字段完成数据排序div id=app ul li v-for=item in arraySort {{ item}} /li /ul/divscript new Vue({