vue常用的8种v指令

Txw.1124

已于 2022-11-24 16:39:53 修改

阅读量682

点赞数

文章标签： vue.js javascript 前端

于 2022-11-24 16:37:18 首次发布

本文链接：https://blog.csdn.net/m0_71858591/article/details/128021158

版权

01 v-once

说明： 只渲染元素和组件一次。随后的重新渲染，元素 / 组件及其所有的子节点将被视为静态内容并跳过。

这可以用于优化更新性能。

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
 <h1>comment</h1>
 <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
 <li v-for="i in list" v-once>{{i}}</li>
</ul>

02 v-text

说明： v-text 指令用于更新标签包含的文本，它的作用跟双大括号的效果一样

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

03 v-html

说明： 帮助我们绑定一些包含 html 代码的数据在视图上，比如： “hello,vue” ，

这个字符串包含了 标签，要想 不被当作普通的字符串渲染出来，就得用 v-html

<div v-html="html"></div>

04 v-show

说明： v-show 指令的取值为 true/false ，分别对应着显示 / 隐藏它就是用来控制元素的 display css 属

性的 [display:none]

<div id="app">
<p v-show="show1">我是true</p>
<p v-show="show2">我是false</p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
show1:true,
show2:false
}
});
</script>

渲染后

<div id="app">
    <p>我是true</p>
    <p style>我是false</p>
</div>

05v-if

说明： 设置为 true 的标签，成功渲染出来，而设置为 false 的标签，直接被一行注释代替了，并没有

被解析渲染出来。

v-show 和 v-if 两者的区别

如果需要频繁切换显示 / 隐藏的，就用 v-show ；

如果运行后不太可能切换显示 / 隐藏的，就用 v-if 。

<p v-if="if_1">我是true</p>
<p v-if="if_2">我是true</p>
<script>
    let app = new Vue({
    el:"#app",
    data:{
    if_1:true,
    if_2:false
  }
});
</script>

05 v-else v-else-if

说明： 两个标签 : 第一个使用 v-if 指令，并取值为 false ，第二个使用 v-esle 指令 , 一旦第一个标签的

v-if 指令的值为 true ，被忽视的就是第二个 标签了。 v-if 和 v-else 只有一个会被渲染出来。

<div v-if="Math.random() > 0.5">
 Now you see me
</div>
<div v-else>
 Now you don't
</div>

v-else-if:

用法同 js 原生中的 if…elseif…elseif…else

 <div id="app">
<input type="text" v-model="type" />
<p v-if="type === 'A'">
A
</p>
<p v-else-if="type === 'B'">
B
</p>
<p v-else-if="type === 'C'">
C
</p>
<p v-else>
Not A/B/C
</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
type:""
}
})
</script>

06 v-for

说明： 我们用 v-for 指令根据一组数组 / 对象的选项列表进行渲染。 v-for 指令需要使用 item in items 形

式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

//06-1 基本用法
<ul>
<li v-for="item in items">{{item}}</li>
</ul>
data: {
items: ['我', '是', '数', '组']
}
//06-2 v-for应用于数组
<div v-for="(item,index) in list">
{{index}}.{{item}}
</div>
data:{
list:['Tom','John','Lisa']
}
//06-3 v-for应用于对象
<div v-for="(item,index) in list">
{{index}}.{{item}}
</div>
data:{
list:['Tom','John','Lisa']
}

Eg2:

<script>
let vm = new Vue({
el:"#app",
data:{
list:[
 {id:1,name:"a"},
 {id:2,name:"b"},
 {id:3,name:"c"},
 {id:4,name:"d"},
 {id:5,name:"e"},
 {id:6,name:"f"}
 ],
 id:"",
 name:""
},
methods:{
add(){
this.list.push({id:this.id,name:this.name})
}
 }
})
</script>

07 v-bind

<!-- 绑定一个属性 -->
<img v-bind:src="imgUrl" />
<!-- 缩写 -->
<img :src="imgUrl" />
<!-- 内联字符串拼接 -->
<img :src="'../images/' + fileName" />
<!-- class 绑定 -->
<div :class="{ 'red': isRed}"></div> 布尔值绑定模式 对象方式
<span v-bind:class="{'class-a':isA ,'class-b':isB}">VUE</span>
var vm = new Vue({ 
el: "#demo",
data: { 
isA: true,
isB: true 
}
})
<div :class="[classA, classB]"></div> 变量绑定模式：数组绑定
<span :class=[classA,classB]>VUE</span>
var vm = new Vue({ 
el: "#demo",
data: { 
classA: "class-a",
classB: "class-b" 
}
})
<div :class="[classA, {‘classB’: isB, ‘classC’: isC}, classD]"></div> 综合绑定模式
<span :class="[one,{'classA':classa,'classB':classb}]">Be good at VUE</span>
var vm = new Vue({ 
el: "#demo",
data: { 
one: "string", //string-->类名
classa: true,
classb: false 
}
})
<!-- style 绑定 -->
<div :style="{fontSize: size + 'px'}">div</div> 内嵌绑定
<div v-bind:style="{width:'200px', height:'200px', 'background-color':'red',fontSize: size + 'px'}">
new Vue({
el: "#app",
data: {
size:60
}
})
<div v-bind:style="styleObject"></div> 直接绑定到一个样式对象
<!-- 绑定一个有属性的对象 -->
<div v-bind="{id:someProp, 'other-attr': otherProp}"></div>
<span v-bind:style="styleObject">VUE</span>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
<!-- 通过 prop 绑定， prop 必须在 my-component 中声明 -->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传递给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- Xlink -->
<svg><a :xlink:special="foo"></a></svg>

08 v-on

作用：

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的 自定义事件 。

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器