vue2 官方内置指令

晔羽_FN

已于 2022-10-20 14:13:42 修改

阅读量288

点赞数

分类专栏： # vue2_指令文章标签： javascript 前端 vue.js vue

于 2022-10-20 12:25:45 首次发布

本文链接：https://blog.csdn.net/gezi_yeyu/article/details/127424650

版权

vue2_指令专栏收录该内容

1 篇文章 0 订阅

订阅专栏

常用指令

# v-text

注解

将绑定的变量以 innerText 的方式渲染到dom元素中

示例

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

缺点

优先级高于 插值表达式 且会覆盖元素内部有默认内容

data:{label: "文本"}
<!-- 优先级高于插值表达式-->
<span v-text="label + '123'">{{ label }}</span>  // 文本123
<!-- 会覆盖元素内部有默认内容-->
<span v-text="label + '123'">默认占位文本{{ label }}</span>  // 文本123

# {{}} 插值表达式

注解

允许在双括号中书写 JavaScript 表达式

示例

data:{state:'很热',isHot:true},
methods:{season(){return '夏天'}}
<!-- 变量/computed-->
<span>{{'今天天气'+state}}</span> // 今天天气很热
<!-- 函数-->
<span>{{'现在是'+season()}}</span> // 现在是夏天
<!-- 三元表达式-->
<span>现在{{+isHot?'确实':'不算'}}很热</span> // 现在确实很热

# v-html

注解

将绑定的变量以 innerHtml 的方式渲染到dom元素中

示例

data:{html:"<b>label</b>"}
<span v-html="label"></span>

# v-bind

注解

为元素的属性动态的绑定值,允许书写 JavaScript 表达式

在绑定 class 或 style attribute 时,支持其它类型的值,如数组或对象。
缩写 :

示例

data:{
	src:'http://xxxx/xxxx.png',
	big:true
}
<img v-bind:src="photo" alt="">
<!-- 简写为 :  -->
<img :src="photo" alt="">
<!-- JavaScript 表达式 -->
<img :src="photo" alt="" :class="['img',big?'big':'']">
<img :src="photo" alt="" :style="{width:big?'120px':'60px',height:big?'120px':'60px'}">

修饰符
- .prpo 作为一个 property 绑定而不是作为 attribute 绑定.通过自定义属性存储变量,避免暴露数据,防止污染 HTML 结构(即属性不会暴露到html结构中)
  
  :times
  
  :times.prop
- .camel 将命名变为驼峰法命名法，如将 view-box 属性名转换为 viewBox
- .sync 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。即对props进行一个双向绑定
```
//父组件
<dialog :visible.sync="bar"></dialog> 
//子组件
this.$emit('update:myMessage',params);

// 注意格式必须是 update:value ,value要与子组件中绑定的变量名一致
// 且.sync绑定的变量不能书写 JavaScript 表达式
```

# v-on

注解

为元素绑定事件,事件函数默认接受事件对象,也可以自定义传参;

事件可以是原生事件,也可以是自定义事件
缩写 @

示例

<div>
    <button v-on:click="buttonClick">点击</button>
    <!-- 简写 -->
    <button @click="buttonClick">点击</button>
    <!-- 自定义参数 -->
    <button @click="buttonClick2(1)">点击</button>
    <!-- 同时需要自定义参数和事件对象 -->
    <button @click="buttonClick3(1,$event)">点击</button>
</div>
<script>
    export default {
        data() {
            return {
                times: 0,
            };
        },
        methods: {
            buttonClick(e) { this.times++ }, // 不传参时,默认参数是事件对象
            buttonClick2(value) { this.times+value }, // 可接受自定义参数
            buttonClick3(value,e) { this.times+value }, // 同时需要自定义参数和事件对象
        },
    };
</script>

修饰符
- .stop 阻止事件冒泡;调用 event.stopPropagation()
- .prevent 阻止默认事件,如 <a> 点击默认跳转;调用 event.preventDefault()
- .capture 优先捕获,添加事件侦听器时使用 capture 模式
- .self 只有在event.target是当前元素自身时触发事件处理函数
- .{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调,一般搭配键盘事件,如 @keydown.enter 或 @keydown.13
- .native 将当前事件识别为原生的点击事件,即会覆盖自定义事件
- .once 只触发一次事件
- .left 点击鼠标左键时触发
- .right 点击鼠标右键时触发
- .middle 点击鼠标中键时触发
- .passive 性能优化,表示 listener 永远不会阻止默认事件。若是 listener 仍然调用了这个函数(event.preventDefault())，客户端将会忽略它并抛出一个控制台警告。

# v-model

注解
- vue 是单向数据流,父组件传给子组件的值只能由父组件修改,但这样会十分麻烦, vue 提供了一种便捷的方式,使开发者不再需要书写大量代码就可以实现组件通讯
- v-model 本质上是一种语法糖,对于不同的dom(这里只讨论html原生标签)语法糖会有差别,用于在表单控件或者组件上创建双向绑定
- select,checkbox,radio 对应 v-bind:value="something" 和 v-on:change="something = $event.target.value"
- input,textarea 对应 v-bind:value="something" 和 v-on:input="something = $event.target.value"

示例

data:{formValue:""}
<input type="text" v-model="formValue" />
<input type="checkbox" v-model="formValue" />
<!-- 等同于 -->
<input v-bind:value="formValue" v-on:input="formValue=$event.target.value" />
<input type="checkbox" v-bind:value="formValue" v-on:change="formValue=$event.target.value" />

修饰符
- .lazy 取代 input 监听 change 事件
- .number 会尝试将绑定的 value 转换为 number 类型 (实测没有任何效果)
- .trim 过滤输入首尾空格,即执行 trim() 方法

# v-show

注解
- 根据 v-show 的 JavaScript 表达式通过控制 css 的 display 属性实现元素或组件的显示隐藏
- 拥有 v-show 的元素或组件仍会在页面渲染时加载,只是被隐藏起来
- 多应用于需要频繁切换元素显示与否的场景
注意 v-show 不支持 <template> 元素，也不支持 v-else

示例

data:{visible:false}
// 某个模态框中包含表单控件,需要频繁切换显示隐藏,使用 v-show 比较合适
<dialog v-show="visible===true">表单内容</dialog>
<button @click="visible=true">显示模态框</button>

# v-if,v-else-if,v-else

注解
- v-if 用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 的时候被渲染
- 可与 v-else-if 和 v-else 搭配使用, v-else 不再需要书写 JavaScript 表达式
- v-if , v-else-if 和 v-else 必须在同一父元素的相邻位置出现,否则会报错

示例

data:{quantity:0}
// 商品数量一般不会被用户操作,可以用 v-if 
// 数量为零,显示提示"该商品已售罄";
/ 数量少于10,在商品数量后标识"商品库存紧张";
// 不为零,显示数量;
<span v-if="quantity===0">该商品已售罄</span>
<span v-else-if="quantity<10">{{quantity}}-商品库存紧张</span>
<span v-else>{{quantity}}</span>

# v-for

注解
- 基于数组或对象循环渲染元素或组件
- v-for 指令需要使用 item in items 形式的特殊语法, items 是待循环的数组, item 是被循环的每一项
- 也可以使用 item of items 代替 in 循环数组或对象,功能上没有差异,只是更接近 JavaScript 迭代器的语法
- 对于数组,指令提供两个参数,分别为 当前项 和 当前项索引 ,语法为 (item,index) in items
- 对于数组,指令提供三个参数,分别为 键值 , 键名 和 当前项索引 ,语法为 (item,name,index) in items
- vue官方建议只要用到了 v-for 指令,那么一定要绑定一个 :key 属性,而且尽量把id作为key值,开发中不是所有元素都带有id属性,此时可以把 index 即索引作为key值,但在某些情况下会出现bug
注意
- 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
- 不推荐同时使用 v-if 和 v-for ,这会导致一些bug,某些情况下甚至会报错

示例

数组

<div>
    <div v-for="(item, index) of testArr" :key="index">
        {{ item + "--" + index }}
    </div>
</div>
<script>
    export default {
        data() {
            return { testArr: ["No_1", "No_2", "No_3"] };
        },
    };
</script>

对象

<div>
    <div v-for="(item, name, index) of testObj" :key="index">
        {{ item + "--" + name + "--" + index }}
    </div>
</div>
<script>
    export default {
        data() {
            return { testObj: { No_1: 1, No_2: 2, No_3: 3 } };
        },
    };
</script>

# v-slot

注解
- 提供具名插槽或需要接收 prop 的插槽
- 插槽名 (可选，默认值是 default)
缩写 #

示例

<!-- 具名插槽 -->
<component1>
  <template v-slot:header>
    标题
  </template>
  默认插槽内容
  <template #footer>
    底部
  </template>
</component1>

<!-- 接收 prop 的具名插槽 -->
<component2>
  <template v-slot:item="data">
    <div class="item">
      {{ data.item.text }}
    </div>
  </template>
</component2>

<!-- 接收 prop 的默认插槽，使用了解构 -->
<component3 v-slot="{ name, age }">
  姓名: {{name}} , 年龄: {{age}}
</component3>

不常用指令

# v-pre

注解
- 跳过这个元素和它的子元素的编译过程,可以用来显示原始标签,跳过大量没有指令的节点会加快编译
- vue将忽视拥有这个指令的元素或组件及其子元素的所有 JavaScript 表达式和模板编译

示例

data:{ label:"占位文本" }
<span v-pre>
    {{ label }}
    <p>{{ label + 123 }}</p>
</span>

# v-cloak

注解

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的标签直到实例准备完毕。

示例

[v-cloak] {
  display: none;
}

// 不会显示，直到编译结束。
<div v-cloak>
  {{ message }}
</div>

# v-once

注解

仅渲染元素和组件一次,并跳过未来的所有更新,这可以用于优化更新性能

示例

data:{ message:"占位信息" }
<div v-once>{{message}}</div>
<input type="text" v-model='message'>
<div>{{message}}</div>
// 修改 message 为 "占位" 后
// 拥有 v-once 指令的 div 仍会展示"占位信息",不会更新