53 Vue 基础和指令

53 Vue 基础和指令

一、Vue 基础

渐进式 JavaScript 框架，是一套用于构建用户界面的渐进式框架

Vue2.x 不支持 IE8 及以下的浏览器使用，因为在 Vue2.x 中使用了 ES5 中新增的方法，该方法在 IE8 及以下的浏览器中无法模拟实现。Vue3.x 中使用了 ES6 中新增的属性，该属性在 IE 浏览器中不支持使用

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
    {{ message }}
</div>

new Vue({
    el: "#app",
    data: {
        message: "Hello Vue!"
    }
})

创建一个 Vue 实例，每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例 开始的

new Vue({
    el: ,
    data: {},
    computed: {},
    methods: {}
})
// el	可以调用 $el 获取对应的 DOM 节点
// data	可以渲染到 DOM 节点中的数据，在 data 中定义的数据都是响应式的
// computed	可以将计算的结果渲染到 DOM 节点中
// methods	DOM 节点中触发事件时可以调用里面的函数方法，this指向创建的 Vue

二、Vue 指令

v-text

不会解析内容，默认不解析

<span v-text="message"></span>\
<!-- 也可以写作 -->
<span>{{ message }}</span>

v-html

会解析内容

永不用在用户提交的内容上

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

v-text 和 v-html 类似于 JavaScript 中的 innerHTML 和 innerText

v-show

根据表达式的真假值，切换元素的 display CSS 样式

当条件变化时该指令触发过渡效果

v-if

根据表达式的值来有条件地渲染元素，在切换时元素及它的数据绑定 / 组件被销毁并重建

当条件变化时该指令触发过渡效果

v-show 和 v-if

v-show 操作的是节点的销毁和重建，是"惰性"的。初始条件不满足不会渲染

v-if 操作的是 CSS 切换，不管初始条件是什么，元素总是会被渲染

一般来说，v-if 有更高的切换开销，二 v-show 有更改的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好，如果在运行时条件很少改变，则使用 v-if 比较好

v-else-if

前一兄弟元素必须有 v-if

v-else

前一兄弟元素必须有 v-if 或 v-else-if

v-for

基于数据多次渲染元素或模板块，为当前遍历的元素提供别名

<div v-for="item in items">
    {{ item.text }}
</div>

也可以为数组索引指定别名（或者用于对象的键）

<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

还可以循环创建节点

<div v-for="n in number"></div>

n 是从 1 到 number 的数

v-if 和 v-for

在 Vue2.x 中，当 v-if 和 v-for 一起使用时，v-for 的优先级比 v-if 更高

在 Vue3.x 中，当 v-if 和 v-for 一起使用时，v-if 的优先级比 v-for 更高

不建议在同一个节点上同时使用 v-if 和 v-for ,可以使用节点嵌套的方法代替

v-on

事件处理器

可以缩写为 @

<button v-on:click="Fn"></button>
<!-- 等价于 -->
<button @click="Fn"></button>

跟 addEventListener 中第一个参数一样，都是写不加 on 的事件名

v-bind

语法糖，作为 DOM 自带属性的绑定

可以缩写为 :

<img v-bind:src="imageSrc">
<!-- 等价于 -->
<img :src="imageSrc">

v-model

在表单控件或者组件上创建双向绑定

v-pre

与 html 中的 pre 标签类似

跳过这个元素和它的子元素的编译过程，可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

<span v-pre>{{ this will not be compiled }}</span>

v-cloak

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

[v-cloak] {
    display: none;
}

<div v-cloak>
    {{ message }}
</div>

v-once

只渲染元素和组件一次，随后的改变不会重新渲染