目录
Vue中的指令
v-xxx指令汇总
之前学过的指定：
v-bind ：单向绑定解析表达式，可简写为:xxx
v-model ：双向数据绑定
v-for ：遍历数组、对象、字符串等
v-on ：绑定事件监听，可简写为@
v-if ：条件渲染（动态控制结点是否存在）
v-else ：条件渲染（动态控制结点是否存在）
v-show ：条件渲染（动态控制结点是否展示）
v-text 指令：向其所在的结点中渲染文本内容，与插值值的区别是，v-text会替换掉结点中的内容
v-html指令 :向其所在的结点中渲染文本内容，可以识别html语法，注：v-html存在安全性问题，在网站上动态渲染任意html是有危险的，容易导致xss攻击，尽量不要在用户的输入框使用v-html。
v-cloak指令（没有值）：本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性，配合cssv-cloak可以解决网速慢时页面展示出{ {xxx}}的问题
v-once指令：v-once所在的结点在初次动态渲染后，就视为静态内容了。以后数据的改变不会引起v-once所在的结构更新。
v-pre指令：跳过器所在结店的编译，可利用他跳过没有使用指令语法、没有使用差值语法的街第三，vue不会解析他，直接使用到页面，加快编译
v-text
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue-->
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
</head>
<div id="root">
插值语法:<div>{
{name}}</div>
v-text指令:<div v-text="name"></div>
v-text指令:<div v-text="name">abc</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
name:'hello'
}
});
console.log(vm)
</script>
v-html
<div id="root">
v-text:<p v-text="name"></p>
v-text:<p v-text="htmlName"></p>
v-html:<p v-html="htmlName">你好</p>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
name:'世界杯',
htmlName:'<h2>世界杯2</h2>'
}
});
</script>
v-cloak
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue-->
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<div id="root">
<div v-cloak>{
{name}}</div>
</div>
v-once
<div id="root">
<div v-once>初始的n值为：{
{n}}</div>
<div>之后的n值为：{
{n}}</div>
<button @click="n++">n++</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
n:10,
},
methods: {}
});
console.log(vm)
</script>
v-pre
<div id="root">
<div>{
{cool}}</div>
<div v-pre>{
{cool}}</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
cool:'天气只有十来度'
},
});
</script>
自定义指令
函数式
定义一个v-big指令，和v-text功能类似，但会吧绑定的数值放大10倍
</head>
<div id="root">
<div v-text="n" ></div>
<div v-big="n"></div>
<button @click="n++">n++</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
n:1,
},
directives:{
big(element,binding) {
element.innerText=binding.value*100
}
}
});
console.log(vm)
</script>
对象式
需求：定义个v-fousbind指令，和v-bind功能类式，但可以让其所绑定的inout元素默认获取焦点
<div id="root">
<div>n的值为:{
{n}}</div>
<input type="text" v-fousbind="n" value="n"></input>
<button @click="n++">n++按钮</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
n:1
},
directives:{
fousbind:{
//指令与元素成功绑定时(一上来)
bind(element,binding){
element.value=binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模版被重新解析时
update(element,binding){
element.value=binding.value
element.focus()
}
}
}
});
console.log(vm)
</script>