vue指令
内置指令
v-text
向所在的节点渲染文本内容，完全替换
<body>
<!--
v-text:
1. 作用：向其所在的节点中渲染文本内容
2. 与插值语法的区别：v-text会替换掉节点中的所有内容，{{xx}}不会
-->
<div id="root">
<div>{{name}}</div>
<div v-text="name"></div>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'gugu',
}
})
</script>
v-html
向指定节点中渲染包含html的内容
可以识别html结构
<body>
<!--
v-html:
作用;向指定节点中渲染包含html结构的内容
与插值语法的区别：
v-text会替换掉节点中的所有内容，{{xx}}不会
v-html可以识别html结构
注意：v-html存在安全问题
在网站上动态渲染任意html是非常危险的，容易导致xss攻击
要在可信的内容上使用v-html，不哟啊在用户提交的内容上使用
-->
<div id="root">
<div>{{name}}</div>
<div v-text="name"></div>
<div v-html="str"></div>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'gugu',
str:'<h3>hello!</h3>'
}
})
</script>
</html>
v-cloak
一个特殊属性，在vue创建实例并接管容器后，会删除v-cloak
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
<body>
<!--
v-cloak:
本质是一个特殊属性，vue实例创建完毕并接管容器后，会删除v-cloak属性
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
-->
<div id="root">
<h2 v-cloak>{{name}}</h2>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:"gugu"
}
})
</script>
v-once
初次动态渲染后，视为静态内容，之后的数据改变不会引起once结构的更新
<body>
<!--
v-once：
v-once所在节点在初次动态渲染后，就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
-->
<div id="root">
<h2 v-once>初始化的n:{{n}}</h2>
<h2>当前的n:{{n}}</h2>
<button @click="n++">n+1</button>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
v-pre
跳过编译过程
跳过没有使用指令的语法，没有使用插值的节点，加快编译速度
<body>
<!--
v-pre：
跳过所在节点的编译过程
可利用他跳过没有使用指令的语法，没有使用插值语法的节点，可以加快编译
-->
<div id="root">
<h2 v-pre>vue其实很简单</h2>
<h2>当前的n:{{n}}</h2>
<button @click="n++">n+1</button>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
自定义指令
自定义vue指令并应用
可以定义局部指令和全局指令，供不同的实例使用
自定义指令有三个回调，分别在不同的时间调用不同的函数回调
需求：
需求：v-big和v-text类似，把绑定的数值放大十倍
v-fbind，和v-bind类似，让所绑定的input元素默认获取焦点
<div id="root">
<h2>now:<span v-text="n"></span></h2>
<h2>10 倍后:<span v-big="n"></span></h2>
<button @click="n++">n+1</button>
<hr>
<input type="text" v-bind:value="n">
<input type="text" v-fbind:value="n">
</div>
基础div标签，使用自定义指令
全局自定义指令
Vue.directive('big',function (element,binding){
//定义全局自定义指令
})
此处在局部自定义指令中写
局部自定义指令
directives:{
//big何时调用：
//1.指令与元素成果绑定
//2.指令所在的模板发生改变，重新解析时
big(element,binding){
//此处的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
// element.focus()
}
}
}
总结
<!--
需求：v-big和v-text类似，把绑定的数值放大十倍
v-fbind，和v-bind类似，让所绑定的input元素默认获取焦点
总结：
1.定义：局部指令：
new vue（{
directives：{指令名：配置对象}
}）
全局指令：
vue.directive（指令名：配置对象）
2.三个回调：
1.bind：指令与元素绑定成果时调用
2.inserted:指令所在元素被插入页面时
3.update:指令所在模板被重新解析时
3.备注：
指令定义时不加v-但使用时要加v-
指令名如果是多个单词，要使用xxx-xxx命名
-->
over
标签：Vue,name,自定义,binding,element,指令,day69 From： https://www.cnblogs.com/GUGUZIZI/p/17103125.html