v-bind(指令–13个)
什么是指令:为HTML提供新动能的特殊属性
为什么:{{}}只能绑定元素的内容(innerHTML),不能绑定属性、事件或执行程序结构
何时:不能使用{{}}绑定的位置,又想动态生成值,都要用各种指令来增强
如何:
1.v-bind:专门用于动态绑定属性值
何时:只要一个属性的值需要动态生产时
如何:完整:<ANY v-Bind:属性=“表达式”
可省略v-bind
2.v-for:专门根据一个数组中的元素,动态反复生成多段相同的页面内容
何时:只要根据一个数组中元素,动态绑定页面内容时
如何:<ANY v-for="模型变量of数组类型模型变量
根据of后数组中的元素个数,反复生成多个元素
of前的模型变量是临时的,获得数组中的一个当前元素
of前的模型变量在内部可用于绑定!
3.控制元素的显示隐藏:
v-if:专门根据一个天剑表达式来表达当前元素是否显示
只有条件表达式为true时,当前元素才显示
何时:只要根据一个条件控制元素的显示隐藏时
如何使用:<ANY v-if=“条件表达式1”
<ANY v-else-if=“条件表达式2”
<ANY v-else=“条件表达式3”
4.v-show:
专门根据一个条件表达式来觉得当前元素是否显示
只要条件表达式为true时,当前元素显示
采用display:block/none的方式显示隐藏
何时:如果仅控制一个元素的显示和隐藏时,首先
v-if:采用添加删除元素的方法,控制显示隐藏
5.绑定事件:
界面View中:
<ANY v-on: 事件名=“处理函数()"
简写:@
new Vue({})中:
new Vue({
el:"选择器“
data:{ 模型变量 },
methods:{//专门保存控制器所需要所有自定义方法的属性
处理函数(){//处理函数:function(){
//this->当前Vue对象->vm
this.模型变量 //访问模型变量
}
}
})