前端培训-中级阶段（35）- Vue 语法

May 15, 2020

思否

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

模板语法

插值（模板字符串）

可以使用 {{ }} 来显示变量。这样的话，如果内部修改 author 的话，页面上也会实时更新。 v-once 指令，可以执行单次渲染，后续变化不在更新。 delimiters: ['${', '}'] 通过这个配置项，我们可以修改为习惯的分隔符。

<template>
    <span>Message: {{ author }}</span>
</template>

<script>
export default {
    data(){
        return {
            author: 'www.lilnong.top'
        }
    }
}
</script>

v-text 和 v-html

插值的写法基本等价于 v-text。当然有些时候我们有可能会需要渲染 HTML，比如说表情、富文本等等，这个是我们可以使用 v-html。当然，不建议使用 v-html ，因为有可能会有 xss 的问题。

<template>
    <div>
        <span>Message: {{ author }}</span>
        <span v-text="author"></span>
        <span v-html="author"></span>
    </div>
</template>

<script>
export default {
    data(){
        return {
            author: 'www.lilnong.top，<span style="red>lilnong.top</span>'
        }
    }
}
</script>

属性

绑定动态属性需要使用 v-bind（缩写是:）。下面这两种写法是等价的

<span v-bind:id="author"></span>
<span :id="author"></span>

如果是 disabled 这类的属性，在值为 false 时是不会渲染在DOM 上的。因为这种属性在 HTML5 规范中，存在即为 true。

style

style 属性是特殊处理过的，你可以直接使用对象形式。

<template>
    <div>
        <span :style="authorStyle">Message: {{ author }}</span>
    </div>
</template>

<script>
export default {
    data(){
        return {
            author: 'www.lilnong.top，<span style="red>lilnong.top</span>',
            authorStyle: {
                color: '#0cc'
            }
        }
    }
}
</script>

class

class 属性是特殊处理过的，你可以直接使用对象形式。

对象形式。如下，item.checked 为真时，会增加 checked 这个 class。item.checked && item.age >= 18 为真时，会增加 isHigh 这个 class。

{
     checked: item.checked,
     isHigh: item.checked && item.age >= 18
}

数组形式。默认给所有都加上了 checkbox 这个 class。

['checkbox',{
     checked: item.checked,
     isHigh: item.checked && item.age >= 18
}]

事件

事件是我们开发中必不可少的东西。比如 click、input 等等。我们在 Vue 中，绑定事件使用 v-on（缩写是 @）来绑定事件。下面两种写法是等价的。

<button v-on:click="clickHandler">btn</button>
<button @click="clickHandler">btn</button>

指令

指令 (Directives) 带有 v- 前缀，如刚才我们用到的 v-bind、v-on、v-text、v-html。指令的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

<a v-bind:href="url">...</a>
<a :href="url">...</a>
<button v-on:click="clickHandler">btn</button>
<button @click="clickHandler">btn</button>
<span v-text="author"></span>
<span v-html="author"></span>

Vue 自带的指令

v-text 更新元素 textContent，我个人感觉还是模板字符串好用
v-html 更新元素的 innerHTML，这里需要注意 XSS 防护哟。
v-show 切换元素的 display，来实现显示隐藏。
v-if、v-else、v-else-if 通过组件销毁重建，来实现显示隐藏。

v-for 遍历，这里要注意使用 :key。

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

v-on 用于绑定事件。组件上如果想触发元素的原生事件可以用 .native 。缩写是 @

修饰符

.stop- 调用 event.stopPropagation()。

.prevent- 调用 event.preventDefault()。

.capture- 添加事件侦听器时使用 capture 模式。

.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。

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

.once- 只触发一次回调。

.left- (2.2.0) 只当点击鼠标左键时触发。

.right- (2.2.0) 只当点击鼠标右键时触发。

.middle- (2.2.0) 只当点击鼠标中键时触发。

.passive- (2.3.0) 以 { passive: true } 模式添加侦听器

v-bind 设置属性。缩写是 :

修饰符：

.prop- 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)

.camel- (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)

.sync(2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的v-on侦听器。

v-model 用于实现数据双向绑定，其实是个语法糖

<input v-model="value"> 等价于 <input ：value="value" @input="value = $event.target.value">

只可以在指定的元素上使用

<input>、<select>、<textarea> 元素的表单 DOM

components 自定义的组件

修饰符：

.lazy- 取代 input 监听 change 事件

.number- 输入字符串转为有效的数字

.trim- 输入首尾空格过滤

v-slot 为插槽传入 prop 的时候使用。默认是 default，缩写是 #
v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

动态指令

从 2.6.0 开始，可以用方括号（\[ 和 \]）括起来的 JavaScript 表达式作为一个指令的参数：

<a v-bind:\[attributeName\]="url"\> ... </a\>
<a v-on:\[eventName\]="doSomething"\> ... </a\>

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

微信公众号：前端linong

参考文献

原文：SegmentFault