Vue的学习笔记（2）

Vue指令

Vue 会根据不同的指令，针对标签实现不同的功能

指令：带有 v- 前缀 的 特殊标签属性

v-html指令

可以动态解析标签。

语法：

v-html = "表达式"  ----- 动态设置元素 innerHTML

例：

// html代码
<div id = "app">
    <div v-html="msg"></div>
</div>
// vue 代码
<script>
const app = new Vue({
    el: "#app",
    data: {
        msg: `<a href="#">百度</a>`
    }
})
</script>

v-show 和 v-if

v-show

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

2、语法：v-show = ”表达式“，表达式的值为true显示，false隐藏

3、底层原理：切换 css 的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中的函数名 “

<button v-on:click = "count++"> 按钮 </button>
// 简写
<button @click = "count++"> 按钮 </button>

<button v-on:click = " add ">按钮</button>

3、简写：@事件名

4、methods中的 this 指向 Vue 实例

v-on调用传参

v-on 调用传参适用于函数写法。

<button v-on:click = " add(参数1,参数2) ">按钮</button>

v-bind

1、作用：动态设置html的标签属性 → src  url  title  ……

2、语法：v-bind：属性名 = “ 表达式 ”

3、简写：“ ：属性名”

v-for

1、作用：基于 数据 循环，多次渲染整个元素 → 数组、对象、数字……

2、遍历数组语法：

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

其中 item 是每一项， index 是下标

例：

<ul>
    <li v-for = "(item,index) in list">
        {{ item }} - {{ index }}
    </li>
</ul>

// 若不需要 index 可写成
<ul>
    <li v-for = "item in list">
        {{ item }} - {{ index }}
    </li>
</ul>

v-for中的key

语法：key属性 = “ 唯一标识 ”

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

key作用：给元素添加的唯一标识。

用上面的例子来举例

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

data: {
    list: {
         [id=1,name="《红楼梦》"],
         [id=2,name="《红楼梦》"],
         [id=3,name="《红楼梦》"],
         [id=4,name="《红楼梦》"]
    }
},
methods: {
    del(id) {
        this.list = this.list.filter(item => item.id !== id);
    }
}

 我们使用 key 之后，相当于把每一个 li 标签都给它添加了一个唯一标识，若我们给第一个li添加一个背景色后，我们删除了第一个li，那么剩余的li不会继承第一个li的背景色。

若我们没有使用 key，我们给第一个li添加一个背景色后，我们删除了第一个li，那么剩余的li会继承第一个li的背景色。

这是因为 v-for 的默认行为会尝试 原地修改元素（就地复用）。简单理解就是：一开始我有四个li，当我点击删除按钮后,它删除的不是第一个li，而是认为我删除了一个，那么我还需要三个li，就把前三个li选上，把里面的数据修改一下，所以不使用 key ，删除元素后，会继承上一个li的样式。

注意点：

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

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

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

 <li v-for = "(item,index) in list" :key="唯一值"></li>

 v-model双向数据绑定

1、作用：给 表单元素 使用， 双向数据绑定 → 可以快速 获取 或 设置 表单元素内容

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

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

2、语法：v-model = “ 变量 ”