Vue 模板语法

模板语法

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

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

模板 template 的三种写法

1. Vue 完整版，写在 HTML 里

在html里面 {{n}} 会自动被替换，@click 也会自动的被理解并且添加上一个事件监听。

最后我们只需要 new Vue 一下，然后传入一个元素传入一个选择器即可使用。

<div id=xxx>
    {{n}}
    <button @click="add">+1</button>
</div>


new Vue({
      el: '#xxx',
      data: {n: 0}, // data 可以改函数 
      methods:{add(){}}
})

2. Vue 完整版，写在选项里

这种方法在 HTML 里面只需要写一个 div 和 id 里面的内容留空

然后将内容写在 template 里面即可，注意一个小细节：div#app 会被替换，因为 new Vue 运行完之后会将 HTML 里面的 div 进行替换。

<div id=app>
</div>

new Vue({
  template: `
    <div>
      {{n}}
       <button @click="add">+1</button>
    </div>`,
  data: {n: 0},  // data 可以改成函数
  methods: {
    add(){this.n += 1}}
}).$mount('#app')

3. Vue 运行时版，配合 xxx.vue 文件

首先在 xxx.vue 文件里面写入 <template> 标签，这里既不是属性也不是 HTML，就是一个单纯的标签，标签里面写内面内容即可。

因为 id 是用来挂载的，所以此处无需添加。

template标签里面的 div 不是 HTML 而是 XML，HTML 对于语法更加松散一点，而 XML 语法比较严格更容易写编译器。

最后需要在 script 标签里面只需要默认导出一个选项，这里的 data 必须是一个函数，不然就会出现被多个组件共用的情况。

<template>
  <div>
    {{n}}
    <button @click="add">
      +1
    </button>
  </div>
</template>

<script>
  export default {
    data(){ return {n:0} },  // data 必须为函数
    methods:{add(){ this.n += 1 }}
}
</script>

<style> 这里写 CSS </style>

在另一个地方写下如下代码即可

import Xxx from './xxx.vue'
// xxx 是一个 options 对象
new Vue({
  render: h => h(xxx)
}).$mount('#app')

浅析模板中的那些语法

展示内容

表达式

• 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
• Vue 中表达式值为 undefined 或者 null 就不显示
• {{ object.a }} 表达式
• {{ n + 1 }} 可以写任何运算
• {{ fn(n) }} 可以调用函数

HTML 内容

• 双大括号会将数据解释为普通文本，而非 HTML 代码
• 为了输出真正的 HTML，需要使用 v-html 指令
• 假设 data.x 值为 <strong>hi</strong>

<div v-html="x"></div>  // 即可显示粗体的 hi

单纯展示 {{ }} 中的内容

v-pre

• v-pre 可以跳过元素和它的子元素的编译过程
• 使用它就可以单纯的展示 {{ }}

<div v-pre>{{ n }}</div> // 展示 {{n}}

绑定属性

绑定 src属性

<img v-bind:src="x" />

v-bind:可以简写为

<img :src="x" />

绑定对象

<div :style="{border: '1px solid red',height:100}"> </div>

// 数字后的单位默认为像素

// 直接绑定到一个样式对象通常更好，这会让模板更清晰

<div :style="styleObject"></div>

data: {
  styleObject: {
    border: '1px solid red',
    height:100
  }
}

绑定事件

v-on:

• v-on:事件名 （如果发现函数就加括号然后再调用，否则就直接运行代码）

<button v-on:click="add">+1</button>

• 点击之后 Vue 会运行add()

<button v-on:click="xxx(1)">xxx</button>

• 点击之后 Vue 会运行xxx(1)

<button v-on:click="n+=1">xxx</button>

• 点击之后 Vue 会运行 n+=1

<button @click="add">+1</button>

• v-on事件的缩写

条件判断

• v-if
• v-else-if
• v-else

<div v-if="x>0">
    x大于0
</div>
<div v-else-if="x ===0">
    x为0
</div>
<div v-else>
    x小于0
</div>

循环

v-for

• for(value,key) in 对象或数组
• key="index" 有 bug

<ul>
    <li v-for="(u,index) in users" :key="index">
    索引:{{index}} 值:{{u.name}}
    </li>
</ul>
<ul>
    <li v-for="(value, name) in obj" :key="name">
    属性名:{{name}} 属性值:{{name}}
    </li>
</ul>

显示/隐藏

v-show

• v-show 的元素始终会被渲染并保留在 DOM 中
• v-show 只是简单地切换元素的 CSS property display
• v-show 不支持 <template> 元素，也不支持 v-else
• 不推荐同时使用 v-if 与 v-for， 当它们一起使用时，v-for 具有比 v-if 更高的优先级

<div v-show="n%2===0"> n是偶数 </div>

// 近似等于

<div :style="{display:n%2===0?'block':'none'}"> n是偶数 </div>

// 注意：看得见的元素 display 不止有 block，
// 如 table 的 display 为 table，li 的 display 为 list-item

v-if 和 v-show 的区别

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

总结

Vue模板主要的特点有

• 使用 XML 语法 （不是 HTML）
• 使用 {{}} 插入表达式
• 使用 v-html、v-on、v-bing 等指令操作 DOM
• 使用 v-if、v-for  等指令实现条件判断和循环

指令 Directive

什么是指令？

指令可以理解成命令或者指示

Vue 中所有“v-”开头的东西就是指令

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

语法

• v-指令名:参数=值，列如：v-on:click=add
• 如果值里面没有特殊字符，就可以不加引号
• 有些指令没有参数和值，如：v-pre
• 有些指令没有值，如 v-on:click.prevent

修饰符

有哪些指令支持修饰符？

• @click.stop="add" 表示阻止事件传播/冒泡
• @cilick.prevent="add" 表示阻止默认动作
• @click.stop.prevent="add" 同时表示两种意思

事件修饰符

Vue 为 v-on 提供了事件修饰符，修饰符是由点开头的指令后缀来表示的

• .stop

阻止点击事件冒泡。等同于 JS 中的 event.stopPropagation()

• .prevent

防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播），等同于JS 中的 event.preventDefault()

• .capture

添加事件监听器时使用事件捕获模式,即内部元素触发的事件先在此处理，然后才交由内部元素进行处理

• .self

只会触发自己范围内的事件，不包含子元素

• .once

只执行一次，如果我们在 @click 事件上添加 .once 修饰符，点击按钮只会执行一次

• .passive

Vue 对应 addEventListener 中的 passive 选项提供了 .passive 修饰符, .passive 修饰符尤其能够提升移动端的性能

事件修饰符还可以串联

使用修饰符时，顺序很重要；用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符，Vue 提供了绝大多数常用的按键码的别名

• .enter 回车键
• .tab 制表键
• .delete (捕获“删除”和“退格”键)
• .esc 返回键
• .space 空格键
• .up 向上键
• .down 向下键
• .left 向左键
• .right 向右键

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

• .ctrl
• .alt
• .shift
• .meta

exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

鼠标按钮修饰符

修饰符会限制处理函数仅响应特定的鼠标按钮

• .left
• .right
• .middle