我们学过的指令:
v-bind :单向绑定解析表达式,可简写为 :XXX
v-model :双向数据绑定
v-for :遍历数组/对象/字符串
v-on :绑定事件监听,可简写为@
v- if :条件渲染(动态控制节点是否存存在)
v-else :条件渲染(动态控制节点是否存存在)
v- show :条件渲染(动态控制节点是否展示)
v-text指令:
1.作用:向其所在的节点中渲染文本内容。
2.与插值语法的区别: v-text会替换掉节点中的内容,{{xx}}则不会。
v-html指令:
1.作用:向指定节点中渲染包含html结构的内容。
2.与插值语法的区别:
(1) .v-html会替换掉节点中所有的内容,{{xx}}则不会。
(2).v-html可以识别html结构
3.严重注意: v-html有安全性问题! ! ! !
(1).在网站上动态渲染任意HTML是非常危险的。容易导致XSS攻击。
(2).定要在可信的内容上使用v-html,永不要用在用户提交的内容上!
v-cloak指令(没有值) :
1.本质是一个特殊属性, Vue实例创建完毕并接管容器居会删掉v- cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xx}}的问题。
v-once指令:(与v-cloak一样 没有值)
1.v-once所在节点在初次动态渲染后。
就视为静态内容了
2.以后数据的改变不会引起V- once所在结构的更新,可以用于优化性能。
v-pre指令:
1.跳过其所在翼点的编嘴让程。
2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。
自定义指令
自定义指令总结:
一、定义语法:
(1) .局部指令:
new Vue({ new Vue({
directives:{指令名:配置对象} 或 directives{指令名:回调函数}
}) })
(2).全局指令:
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调两数)
二、配置对象中常用的3个回调:
(1).bind:指令与元索成功绑定时调用。
(2).inserted:指令所在元素被插入页面时调用。
(3).update:指令所在模板结构被重新解析时调用。
三、备注:
1.指令定义时不加V-,但使用时要加v-:
2.指令名如果是多个单词,要使用kebab-case(例如user-name)命名方式,不要用camelCase(驼峰)命名。
<div id="root">
<h2>当前的n值是:<span v-text="n"></span></h2>
<h2>放大十倍后的n值是:<span v-big="n"></span></h2>
<button @click="n++">点我n+1</button>
<hr>
<input type="text" v-fbind:value="n">
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
Vue.directive('fbind',{
// 指令与元素成功绑定时(一上来)
bind(element,binding){
element.value = binding.value
},
// 指令所在元素被插入页面时
inserted(element,binding){
element.focus();
},
// 指令所在模板被重新解析时
update(element,binding){
element.value = binding.value
}
})
var vm = new Vue({
el:"#root",
data:{
n:1,
},
// 这些都是局部指令
directives:{
//big函数何时会被调用?
/*
1.指令与元素成功绑定时(一上来)
2.指令所在模板被重新解析时
*/
//第一个形参:指令所在元素
//第二个形参:本次绑定的信息
big:function(element,binding){
console.log('big',this);//注意此处的this是window
element.innerText = binding.value * 10;
},
/* fbind:{
// 指令与元素成功绑定时(一上来)
bind(element,binding){
element.value = binding.value
},
// 指令所在元素被插入页面时
inserted(element,binding){
element.focus();
},
// 指令所在模板被重新解析时
update(element,binding){
element.value = binding.value
}
} */
}
})
</script>