第3章 Vue指令电子课件.pptx

第3章Vue指令

课程目标Vue指令的定义v-if与v-show的区别使用数组表达式绑定class属性使用v-model绑定表单元素Vue示例实现的任务展示2

课程内容Vue指令v-if、v-for、v-showVue指令v-bindVue指令v-model综合案例3

Vue指令定义指令是带有v-前缀的特殊属性。作用当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM。

指令修饰符定义表示特殊后缀，表示指令应该以特殊的方式绑定常见修饰符.prevent修饰符会阻止当前事件的默认行为.stop修饰符将阻止事件向上冒泡

指令详解v-if指令v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。divid=app

pv-if=notice公告/p

/div

newVue({

el:#app,

data:{

notice:true

}

})

指令详解通过一个对象的属性来迭代ulid=repeat-objectclass=demoliv-for=valueinobject{{value}}/li/ul

v-for指令提供第二个的参数为键名提供第三个参数为索引divv-for=(value,key)inobject{{key}}:{{value}}/divdivv-for=(value,key,index)inobject{{index}}.{{key}}:{{value}}/div

v-for指令整数迭代v-forTemplate如同v-if模板,渲染一个包含多个元素的块，使用v-for遍历多个标签，就需要用template。divspanv-for=nin10{{n}}/span/div

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

titlehello,world!/title

/head

body

scriptsrc=lib/Vue.js/script

divid=app-2

ol

liv-for=todointodos{{todo.text}}/li /ol

演示迭代数组

/div

buttononclick=app.todos.push({text:新项目});点击新增/button

script

varapp=newVue({

el:#app-2,

data:{

todos:[

{text:学习JavaScript},

{text:学习Vue},

{text:整个牛项目}

]

}

})演示迭代数组

v-on指令v-on指令绑定一个事件监听器，v-on指令用于绑定HTML的单击事件用v-on:click缩写为@click。12divid=app

!--greet是在下面定义的方法名--

buttonv-on:click=greetGreet/button

/div

script

varapp=newVue({

el:#app,

data:{

name:Vue.js

}

})v-on指令

13//在methods对象中定义方法

methods:{

greet:function(){

//this在方法里指当前Vue实例

alert(this.name+的方法被调用了！)

}

}

})

/script

v-on指令

v-show指令v-show的用法与前面的v-if类似，通过此指令控制元素的显示隐藏，即控制元素的display。14divid=app

pv-show=okv-show控制display属性/p

buttonv-on:click=toggle()Toggle/button

pok：{{ok}}/p

/div

script

varvm=newVue({el:#app,data:{ok:true}methods:{

toggle(){this.ok=!this.ok;}

}

})

/scrip