Vue指令

Posted 2021-09-04 mcgee0731

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue指令相关的知识，希望对你有一定的参考价值。

内容处理

v-once
v-text
v-html

v-once : 使元素内部的插值表达式只生效一次

<div id="app">
  <p v-once> {{xxxxx}} </p>
</div>

v-text : 元素内容整体替换为指定纯文本数据

与插值表达式区别：插值表达式是用来进行元素动态设置的，v-text是直接将纯文本内容设置为指定数据，会覆盖老元素

只会显示纯文本，添加标签元素，也不会生成标签元素

<div id="app">
<p v-text="content"> 这段内容会被覆盖 </p>
</div>

new Vue({
el:"#app",
data:{
  content:"我是新内容" // 纯文本

  content:"<span> span内容 </span>" // 非纯文本 不会生成span标签
}
})

v-html ：元素内容整体替换为指定的HTML文本

类似于v-text，但是非纯文本可以转换成对应元素

<div id="app">
<p v-html="content"> 这段内容会被覆盖 </p>
</div>

new Vue({
el:"#app",
data:{
  content:"我是新内容" // 纯文本 ok

  content:"<span> span内容 </span>" // 非纯文本 生成span标签
}
})

属性绑定

v-bind指令：v-bind指令用于动态绑定HTML属性

Class绑定
Style绑定

内容绑定方法只能处理内容，如果对标签属性进行处理，通过绑定属性

<div id="app">
  <p v-bind:title ="content_title"> 内容 </p>
  <p :title ="content_title"> 内容 </p>  // 简写
</div>

new Vue({
  el:"#app",
  data:{
    content_title :"我是title属性内容",
    demo:"hello"
  }
})

v-bind允许使用表达式 , 与插值表达式类似

不允许使用语句内容 <p :class ="var num = 10"> , error

<div id="app">
<p :class ="\'demo\'+3"> 内容 </p> // ok
</div>

如果需要一次绑定多个属性，还可以绑定对象。

<div id="#app">
<p v-bind="attrObj"> 内容 </p>
</div>

new Vue({
el:"#app",
data:{
  attrObj:{

    id :"box", // id属性

    title :"我是title", // title属性

    class :"clsbox", // class属性

    \'data-title\':"这是内容" // 自定义属性
  }
}
})

Class绑定

class是HTML属性，可以通过v-bind进行绑定，并且可以与class属性共存

<div id="app">
<p class="a" :class= "clsbox"> 内容 </p>
</div>

new Vue({
el:"#app",
data:{
  clsbox:"x" // 此时添加了两个class 一个 "a" 一个 "x", clsbox是动态绑定的
}
})

注意事项

元素多个动态类名的绑定的错误写法

<p class="a" :class= "clsbox clsbox1 clsbox2"> 内容 </p>  // error

<p class="a" :class= "clsbox"> 内容 </p>  // ok

new Vue({
el:"#app",
data:{
  clsbox:"x y z" // 多动态名称 不常用

  // clsbox1:"y"
  // clsbox2:"z"
}
})

三元运算动态添加 class

<p class="a" :class= "bol ? clsbox1 : clsbox2"> 内容 </p>  // ok

new Vue({
el:"#app",
data:{
  bol:true,
  clsbox1:"y",
  clsbox2:"z"
}
})

如果类名既有条件判断，又同时存在多个类名，组合则写法比较复杂。对于class绑定，Vue.js中还提供了特殊处理方式。

对象表示法，键表示类名，值表示键是否生效。对于带横线类名用引号包裹

<p :class= "{ b:isB, c:isC, \'class-d\':true }"> 内容 </p>

new Vue({
el:"#app",
data:{
  isB:true,
  isC:false
}
})

数组表示法，对对象表示法的扩展

<p :class= "[\'a\',{ b:isB, \'class-d\':true }, c]"> 内容 </p>

new Vue({
el:"#app",
data:{
  isB:false,   // 此时有 a class-d z 三个属性
  c:"z"
}
})

Style绑定

style是HTML属性，可以通过v-bind进行绑定，并且可以与style属性共存。
不建议写在行内不好维护，建议从 data 中获取 , 注意要加单位px等。

相同属性，框架会优先取绑定的属性的值

<p style="width=50px;" :style= "styleObj"> 内容 </p>

new Vue({
el:"#app",
data:{
  styleObj:{
    width:\'100px\',  // 覆盖之前设置的 50px width
    height:\'100px\',
    border:\'1px solid #ccc\',
    backgroundColor:\'red\', // 驼峰
    \'font-size\':\'30px\' // 非驼峰
  }
}
})

当我们希望给元素绑定多个样式对象时，可以设置为数组

<p :style= "[styleObj1 , styleObj2]"> 内容 </p>

new Vue({
el:"#app",
data:{
  styleObj1:{ ... },
  styleObj2:{ ... }
}
})

常用于公共样式和单独样式的组合

渲染指令

v-for
v-show
v-if

v-for指令

用于遍历数据渲染结构，常用的数组与对象均可遍历。
哪个元素要多次创建，将指令添加到哪个元素

遍历时的参数： index为索引,key为键

<div id="app">
<ul>
  <li v-for="(item,index) in arr">{{ item }}</li> // 数组
</ul>

<ul>
  <li v-for="(val,key,index) in obj">{{ val }}</li> // 对象
</ul>
</div>

new Vue({
el:"#app",
data:{
  arr:["1","asd",2],
  obj:{ 
    content1:"内1",
    content2:"内2"
  }
}
})

数值遍历 : 适用于没有基础数据，凭空创建数值个元素

<div id="app">
  <ul>
    <li v-for="(item,index) in 5">{{ item }}</li>  // 1,2,3,4,5
  </ul>
</div>

注意事项

使用v-for的同时，应始终指定唯一的 key属性
key属性是通过 v-bind 绑定的一个属性，是标识每项的唯一值
for循环中 index下标无法作为 key，如果属性值也不唯一（无法作为key）。可以把数据改成对象，添加唯一key属性
为什么会要添加key?
- vue.js 在进行结构渲染时，会为了提高执行效率，对于结构一致的内容只进行修补操作，不会进行移除替换，因此用户输入的内容得以保留未被删除。

如图，初始时文本1->输入框1，一一对应。当控制台执行 vm.arr.reverse() 时

vue 修改而非替换的操作，会导致结构和内容不一致

正确写法

<ul>
  <li v-for="item in items" :key="item.id">{{ item }}</li>
</ul>

通过<template>标签设置模板占位符，可以将部分元素或内容作为整体进行操作。
template 不会生成标签，只是占位符，内部内容是个整体，可以只对整体进行重复添加。
如果用div，会额外增加div标签，可能并不是我们想要的结构。

由于 template 本身不是元素，无法绑定 key 属性

<div id="app">
<template v-for="(item,index) in items">
  <span>{{ 标签内容1 }}</span>
  <span>{{ 标签内容2 }}</span>
</template>
</div>

v-show指令

用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用

通过display 控制元素显示和隐藏

<div id="app">
<p v-show="true">这个元素显示</p>
<p v-show="false">这个元素隐藏</p>
<p v-show="2>11">这个元素隐藏</p>
<p v-show="bol">这个元素看bol值</p>
</div>

注意事项：

template无法使用 v-show 指令，不是元素

v-if指令

用于根据条件控制元素的创建与移除。

不适合频繁的显示隐藏，因为他是移除和创建，是消耗性能的操作

<div id="app">
<p v-if="false">这个元素不会创建</p>
<p v-else-if="true">这个元素会创建</p>
<p v-else-if="true">这个元素不会创建</p> // 上一个进了这个不会进
<p v-else>这个元素不会创建</p>
</div>

注意事项：

给使用v-if 的同类型元素绑定不同的 key

如图，添加了v-if 和 v-else

当bool=true时，代码会运行至 v-if，此时给输入框输入123。
修改 bool，当bool=false时，代码会执行v-else内的代码，输入框内的 123 也被第二个输入框保留
这种代码方式应用于在用户登陆时，使用账号，手机号，邮箱等 , 样式一致，但是不同功能元素切换登录时，输入框内判断逻辑不同肯定是不同的。
问题也发生在，vue对相同结构进行修补，而不是移除旧的，创建新的

正确做法，添加key绑定

<div id="app">
  <p v-if=" type === \'username\' " :key="\'username\'">
    用户输入框： <input type="text">
  </p>
  <p v-else :key="\'email\'">
    邮箱输入框： <input type="text">
  </p>
</div>

出于性能考虑，应避免将v-if 与v-for应用于同一标签

例如有个列表，要通过指定数据 v-for 循环创建，同时列表内每项的创建和移除还要取决于某个条件

v-for的优先级会更高，如果此时v-if=false，则v-for执行是毫无意义的，还会消耗不必要的性能

解决办法，创建列表循环的v-for操作赋予子元素li，v-if条件判断赋予父元素ul

此函数执行效率很低

<div id="app">
  <ul>
    <li v-if="false" v-for="item in items">{{ item }}</li>
  </ul>
</div>

new Vue({
  el:"#app",
  data:{
    items:{ 
      content1:"内1",
      content2:"内2",
      content3:"内3",
    }
  }
})

修改后

<div id="app">
  <ul v-if="false">   // 放到父元素,false时 内部的 v-for不会被执行
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

其他修改方法，既然遍历的循环对象有判断，那么我们把判断写在方法内，即在遍历前处理遍历的数据

<div id="app">
  <ul>
    <li v-for="item in handleItems()">{{ item }}</li>
  </ul>
</div>

事件处理

v-on

v-on指令

用于进行元素的事件绑定。
当事件处理程序较少时，可以直接写在行内，尽量不要，不好维护

可以指定 methods 函数处理事件

<div id="app">
<p>{{ content }}</p>

<button v-on:click=" content=\'新内容\' ">按钮</button>

<button @click=" content=\'新内容\' ">按钮</button>   // 简写

<button @click="fn">按钮</button>   // methods 函数设置
</div>

new Vue({
el:"#app",
data:{
  content:"默认内容"
},
methods:{
  fn(){
    this.content=\'新内容\'
  }
}
})

设置事件处理程序后，可以从参数中接收事件对象 event。

new Vue({
el:"#app",
data:{
  content:"默认内容"
},
methods:{
  fn(event){   // 接收事件对象
    console.log(event) 
  }
}
})

在视图中可以通过 $event 访问事件对象。

当传参时也想访问event事件对象，可以通过传入 $event在方法中获取 event 对象

<div id="app">
<p>{{ content }}</p>

<button @click="fn(content, $event)">按钮</button> // 自己传参也想访问event事件对象时
</div>

new Vue({
el:"#app",
data:{
  content:"默认内容"
},
methods:{
  fn(content,event){
    console.log(content)
    console.log(event)
  }
}
})

表单输入绑定

v-model

v-model指令

用于给可输入元素 <input>、<textarea>及<select>元素设置双向数据绑定。
当输入框输入时，依赖v-model的变量的元素都会动态改变
v-model 不能使用表达式，如果要计算，可以添加计算属性双向绑定

v-model 实质就是 v-bind+v-on:input事件结合

<div id="app">
<p>{{ value }}</p>

<input type="text" v-model="value">
</div>

new Vue({
el:"#app",
data:{
  value:""
}
})

输入框绑定

输入框分为单行输入框input与多行输入框 textarea

<div id="app">
<p>{{ value1 }}</p>
<input type="text" v-model="value1">

<p>{{ value2 }}</p>
<textarea v-model="value2"></textarea>
</div>

单选按钮绑定

单选按钮的双向数据绑定方式如下:

<div id="app">
<p>{{ value3 }}</p>

<input type="radio" id="one" value="1" v-model="value3">
<label for="one">选项一</label>

<input type="radio" id="two" value="2" v-model="value3">
<label for="two">选项二</label>
</div>

new Vue({
el:"#app",
data:{
  value3:""  // 选哪个，哪个input 的 value 就会赋给 value3
}
})

复选框绑定

复选框绑定分为单个选项与多个选项两种情况，书写方式不同

单个复选框应用，可勾可取消

<div id="app">
  <p>单复选框： {{ value4 }}</p>
  <input type="checkbox" id="item" value="内容" v-model="value4">
  <label for="item">选项</label>
  
  <p>多复选框： {{ value5 }}</p>
  <input type="checkbox" id="one" value="选项一内容" v-model="value5">
  <label for="one">选项一</label>
  <input type="checkbox" id="two" value="选项二内容" v-model="value5">
  <label for="two">选项二</label>
</div>

单复选和多复选区别在于

点击单复选时，返回true / false表示是否勾选， value4值不会返回。但是value4依然要设置，如果处理作表单提交，提交的值是value4

多复选是个数组，存放每个复选框的value5值，且value5值必须不同

new Vue({
el:"#app",
data:{
  value4:"",  // 单复选
  value5:[] // 多复选
}
})

选择框绑定

选择框绑定分为单选绑定与多选绑定两种情况，书写方式不同。

<div id="app">
<p>单选select： {{ value6 }}</p>  // 显示的是option的value值
<select v-model="value6">   // v-model绑定给select
  <option value="">请选择</option> // 默认选项，无实际意义
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
</select>

<p>多选select： {{ value7 }}</p>
<select v-model="value7" multiple>
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
</select>
</div>

var vm = new Vue({
data:{
  value6:\'\',
  value7:[]
},
}).$mount("#app")

按住ctrl进行多选

v-model 小结

input输入框:绑定字符串值。
textarea输入框:绑定字符串值。
radio:绑定字符串值。
checkbox:单个绑定布尔值，多个绑定数组。
select:单选绑定字符串，多选绑定数组。

以上是关于Vue指令的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板