vue指令

内容渲染指令

v-html

  指令用于将包含 HTML 代码的字符串作为 HTML 插入到元素中，从而实现动态渲染 HTML 内容。

条件渲染指令

v-show和v-if区别及其使用场景

v-show

1.作用:控制元素显示隐藏
2.语法: v-show="表达式" 表达式值 true 显示，false 隐藏

3.原理:切换 display:none 控制显示隐藏

4.场景:频繁切换显示隐藏的场景

v-if

1.作用:控制元素显示隐藏(条件渲染)

2.语法: v-if="表达式"

表达式值 true 显示， false 隐藏

3.原理: 基于条件判断，是否 创建 或 移除 元素节点

4.场景: 要么显示，要么隐藏，不频繁切换的场景

事件绑定指令 

v-on

1.作用: 注册事件 = 添加监听+提供处理逻辑
2.语法:
① v-on:事件名="内联语句
② v-on:事件名="methods中的函数名
3.简写:@事件名

例如

v-on："click" = "count++"可简写为@，最后表达式为

@click = “count++”　　

属性绑定指令

v-bind

1. 作用:动态的设置html的标签属性: src url title
2. 语法: v-bind:属性名="表达式"  
3. v-bind:可以简写成 => :

例如：

<img v-bind:src="url" />`
<img :src="url" />`   （v-bind可以省略）

列表渲染指令

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

• item 是数组中的每一项

• index 是每一项的索引，不需要可以省略

• arr 是被遍历的数组

//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始

//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始

　　

v-for中的key

列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。因为Vue 的默认行为会尝试原地修改元素（就地复用）

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>

 

双向绑定指令

所谓双向绑定就是： 1. 数据改变，视图更新。 2. 视图更新后，数据也变化。

作用：用于表单元素（如 input、radio、select），通过双向绑定数据，可以快速获取或设置表单元素的内容。

语法：

 v-model="变量"

常用于登录、重置操作

　　

指令修饰符

@keyup.enter —>当点击enter键的时候才触发

 

v-model.trim —>去除首位空格

v-model.number —>转数字

 

@事件名.stop —> 阻止冒泡

@事件名.prevent —>阻止默认行为

@事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为

 

v-bind对样式控制的增强-操作class

对象语法   ：一个类名，来回切换：<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

数组语法 ： 批量添加或删除类：<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>