vue 常用Api整理 3 - 指令

vue 常用Api整理 3 - 指令

1. 模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时，Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

原文

1. 数据绑定

双大括号 {{data}} 用于绑定数据，他会把数据解析成普通文本文本，不会解析为 html 代码

    <span>Message: {{ msg }}</span>

    data() {
        return {
            // msg: 'this is msg' // 最后解析为 Message: this is msg
            // msg: '<p>this is msg</p>' // 最后解析为 Message: <p>this is msg</p>
        }
    }

2. HTML 标签特性绑定

• 如果是特性的值是变量，或者值为布尔值则 使用 v-bind:id="containerId" 绑定变量
• 如果是特性的值是固定值 则使用正常的方式 id="container"

    <!-- 布尔值，或者变量 -->
    <button v-bind:disabled="isButtonDisabled">Button</button>

    <!-- 普通绑定 -->
    <button class="btn">Button</button>

3. javascript 表达式

所有的数据绑定的部分都可以 使用 javascript 表达式（单个表达式）

    // 普通计算
    {{ n + 1 }}
    // 三元运算符
    {{ ok ? 'y' : 'n' }}
    // 数组或者字符串方法
    {{ message.split('').reverse().join('') }}

    // 不能有语句
    {{ var a = 1 }}
    // 不能有 流程控制语句
    {{ if (true) { return true } }}

表达式会被放到一个沙盒中，只能访问全局变量的一个白名单 如 Math、Date 自定义的全局变量无法访问

2. 指令

1. v-text

插入文本， 与在标签下 通过 {{data}} 插值一样，但是使用 v-text 会替换标签内的所有内容，没有 {{data}} 灵活

    data() {
        return {
            text: 'text data'
        };
    }

    <!-- 渲染后 this is text data -->
    <p>this is {{text}}</p>

    <!-- 渲染后 text data -->
    <p v-text="text"></p>

2. v-html

更新元素的 innerHTML， 内容会按照普通的HTML 插入，不会作为 vue 的模板进行编译

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

    data() {
        return {
            text: 'this is text',
            // html: '<p>this is p</p>', 
            html: '<p v-text="text">this is p</p>', // 作为普通的 html, v-text 不会起作用
        }
    }

3. v-show

根据表达式之真假值，切换元素的 display CSS 属性, 当条件变化时该指令触发过渡效果。

    <div v-show="shouldShow" @click="toggle"></div>

    data() {
        return {
            shouldShow: false
        }
    },
    methods: {
        toggle() {
            this.shouldShow = !this.shouldShow;
        }
    }

4. v-if v-else-if v-else

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

以上三个指令书写有顺序要求 v-if -> v-else-if…(可以是多个) -> v-else

    <p v-if="type === 'first'">this is {{type}}</p>
    <p v-else-if="type === 'second'">this is {{type}}</p>
    <p v-else="type === 'last'">this is {{type}}</p>

    data() {
        return {
            type: 'first'
        };
    },
    methods: {
        handleClick() { // 某个事件触发
            this.type = 'last';
        },
    },

v-if 与 v-show 相比

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
• v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
• v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

5. v-for

渲染列表， 需要提供一个 key 的特殊属性，而且指令需要一组特殊的语法

    data() {
        return {
            list: ['a', 'b', 'c', 'd'],
            map: {
                name: 'xiaobai',
                age: 20,
                sex: 'male'
            }
        };
    }

    <p v-for="item in list" >{{ item }}</p>
    <p v-for="(item, i) in list" :key="i">{{ item }} - {{i}}</p>
    <!-- 使用 of 代替 in 也可以 -->
    <p v-for="(item, i) of list" :key="i">{{ item }} - {{i}}</p>

    <!-- 对象也可以迭代 -->
    <p v-for="(value, key, index) in map" :key="index">{{index}} - {{key}} - {{value}}</p>

当v-for 和 v-if 处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

6. v-on （缩写 @）

绑定事件监听器，事件类型由参数决定，表达式可以是一个方法名， 也可以是一个内联语句

    <!-- 表达式 -->
    <button v-on:click="counter += 1">增加 1</button>

    <!-- 事件处理 -->
    <button v-on:click="handleClick">button</button>

    <!-- 多个事件的处理 -->
    <button v-on="{mousedown: handleStart, mouseup: handleEnd}">button</button>

    <!-- 内联语句，可以用来传参，$event 事件对象 -->
    <button v-on:click="handleClick('click', $event)">button</button>

    <!-- 缩写 -->
    <button @click="handleClick"></button>

    <!-- 加修饰符 -->
    <button @click.stop="doThis"></button>

    <!-- 修饰符可以串联 -->
    <button @click.stop.prevent="doThis"></button>

    <!-- 组件上的事件 -->
    <my-component @my-event="handleThis"></my-component>

事件修饰符

• .stop 阻止事件冒泡
• .prevent 阻止默认事件
• .capture 使用事件捕获模式添加监听器
• .self 只有事件在元素本身（非子元素）触发时执行回调
• .once 只触发一次

键值修饰符

• .enter
• .tab
• .up
• .down
• .left
• .right
• .delete
• .esc
• .space

可以通过 Vue.config.keyCodes[keyName] = [keyCode] 自定义键盘修饰符

其他

• .native 监听组件根元素的原生事件

7. v-bind （缩写 :）

动态地绑定一个或多个特性，或一个组件 prop 到表达式, 在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。

    <!-- 绑定一个属性 -->
    <button v-bind:disabled="disabled"></button>

    <!-- 缩写 -->
    <button :disabled="disabled"></button>

    <!-- 表达式 -->
    <button v-bind:disabled="!disabled"></button>

    <!-- 绑定class -->
    <button :class="btn"></button>

    <!-- 动态切换，值为真时，键名即为要添加的类名 -->
    <button :class="{black: isBlack }"></button>

    <!-- 普通的 class 与指令的 calss 共存-->
    <button class="basic" :class="{ black: !isBlack }"></button>

    <!-- 值为数组时，表示添加一组 class，可以是字符串或者变量 -->
    <button :class="['basic', black]"></button>

    <!-- 可以组合使用 -->
    <button :class="['basic', {black: isBlack}]"></button>

    <!-- 组件上添加class会渲染到组件的根元素上 -->
    <my-component class="baz boo"></my-component>

    <!-- 绑定样式 css 属性名可以是驼峰或者短横线 -->
    <button :style="{width: btnWidth, backgroundColor: btnBgColor}"></button>

    <!-- 值可以是一个包含属性键值对对象的数组，如果有重复，后边的会覆盖前边 -->
    <button :style="[style1, style2]"></button>

    <!-- 同时绑定多个属性 -->
    <button v-bind="{id: 'btn', class: ['basic', {black: isBlack}]}"></button>

    <!-- 通过 $props 将父组件的 props 一起传给子组件 -->
    <child-component v-bind="$props"></child-component>

8. v-model

用于表单输入绑定（双向数据绑定），他会根据控件类型自动选取正确的方法来更新元素

    <!-- 绑定输入框 -->
    <input v-model="msg" />

    <!-- 多行文本 -->
    <textarea v-model="msg"></textarea>

    <!-- 绑定一个单选框 checked: true | false -->
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{checked}}</label>

    <!-- 绑定多个属性 checkedList: [] -->
    <input type="checkbox" id="aaa" value="aaa" v-model="checkedList" />
    <label for="aaa">aaa</label>
    <input type="checkbox" id="bbb" value="bbb" v-model="checkedList" />
    <label for="bbb">bbb</label>
    <input type="checkbox" id="ccc" value="ccc" v-model="checkedList" />
    <label for="ccc">ccc</label>
    <p>{{checkedList}}</p>

    <!-- 绑定d单选按钮 picked: '' -->
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <span>Picked: {{ picked }}</span>

    <!-- 绑定选择列表 selected: ''（单选）| []（多选）-->
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>

修饰符

• .lazy: 输入框在加入这个修饰符后，会在 change 事件中同步数据
• .number: 用来处理数值输入，会将输入的值转换成Number类型
• .trim: 过滤用户输入的首尾空格

9. v-once

只渲染元素和组件一次，重新渲染时，会被跳过用于优化性能

    <span v-once>This will never change: {{msg}}</span>

相关文章

• vue-cli-webpack模板配置全解析-1
• vue-cli-webpack模板配置全解析-2
• Vue 常用Api整理 1 - 组件属性与方法
• vue 常用Api整理 2 - 生命周期函数
• vue 常用Api整理 3 - 指令
• vue 常用Api整理 4
• vue-router使用整理
• vuex 使用整理