Vue2 的一个小实例和常用指令

vue2实例 

访问或修改数据

1.访问数据：实例.属性名

例：app.message

2.修改数据：实例.属性名 = '值'

例：app.message = '值'

3.vue规定，在methods中，this都是指向实例app的

Vue指令

概念：带有v-前缀的特殊的标签属性

位置：vue官网->学习->api-> 指令

常用指令

• v-html

v-html = "表达式 " → 动态设置元素 innerHTML,用于输出HTML内容。

• v-show

1. 作用： 控制元素显示隐藏

2. 语法： v-show = "表达式" 表达式值 true 显示， false 隐藏

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

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

• v-if

1. 作用： 控制元素显示隐藏（条件渲染）

2. 语法： v-if = "表达式" 表达式值 true 显示， false 隐藏

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

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

• v-else 和 v-else-if

1. 作用： 辅助 v-if 进行判断渲染

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

3. 注意： 需要紧挨着 v-if 一起使用

• v-on

1. 作用： 注册事件

2. 语法：

① v-on:事件名 = "内联语句"

② v-on:事件名 = "methods中的函数名"

3. 简写：@事件名

4.传参

• v-bind

1. 作用： 动态的设置html的标签属性

2. 语法： v-bind:属性名="表达式"

3. 注意： 简写形式 :属性名="表达式"

@事件名(a,b)

• v-for

1. 作用： 基于数据循环， 多次渲染整个元素

2. 遍历数组语法：

v-for = "(item, index) in 数组"

Ø item 每一项， index 下标

Ø 省略 index: v-for = "item in 数组"

• v-for 中的 key

<ul>

<li v-for="(item, index) in booksList" :key="item.id"></li>

 </ul>

语法：key属性 = "唯一标识"

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

注意点：

1. key 的值只能是 字符串 或 数字类型

2. key 的值必须具有 唯一性

3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

• v-model

1. 作用: 给 表单元素 使用, 双向数据绑定

① 数据变化 → 视图自动更新 ② 视图变化 → 数据自动更新

2. 语法: v-model = '变量'

vue指令使用：如下图

运行结果