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

前端最基础的就是 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 属性是特殊处理过的，你能够 直接使用对象形式。

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

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

2. 数组形式。默认给全部都加上了 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 自带的指令

1. v-text 更新元素 textContent，我我的感受仍是模板字符串好用
2. v-html 更新元素的 innerHTML，这里须要注意 XSS 防御哟。
3. v-show 切换元素的 display，来实现显示隐藏。
4. v-if、v-else、v-else-if 经过组件销毁重建，来实现显示隐藏。

5. 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>

6. v-on 用于绑定事件。组件上若是想触发元素的原生事件能够用 .native 。缩写是 @

   1. 修饰符

      • .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 } 模式添加侦听器

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

   1. 修饰符：

      • .prop- 做为一个 DOM property 绑定而不是做为 attribute 绑定。(差异在哪里？)
      • .camel- (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
      • .sync(2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的v-on侦听器。

8. v-model 用于实现数据双向绑定，实际上是个语法糖

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

   2. 只能够在指定的元素上使用

      • <input>、<select>、<textarea> 元素的表单 DOM
      • components 自定义的组件

   3. 修饰符：

      • .lazy- 取代 input 监听 change 事件
      • .number- 输入字符串转为有效的数字
      • .trim- 输入首尾空格过滤
9. v-slot 为插槽传入 prop 的时候使用。默认是 default，缩写是 #
10. v-pre 跳过这个元素和它的子元素的编译过程。能够用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
11. v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一块儿用时，这个指令能够 隐藏未编译的 Mustache 标签直到实例准备完毕。
12. 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

参考文献

1. 前端培训目录、前端培训规划、前端培训计划