Vue：模板、指令与修饰符Vue模板语法模板的三种写法 Vue完整版，写在HTML里 Vue完整版，写在选项里 Vue

Vue模板语法

模板的三种写法

Vue完整版，写在HTML里

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

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

Vue完整版，写在选项里

<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')
// 细节： div#app 会被替代

Vue非完整版，配合xxx.vue文件

// xxx.vue 文件
<template>
  <div>
    {{n}}
    <button @click="add">
      +1
    </button>
  </div>
</template>
// 注意这里的 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 对象
// 一般来说组件名大写开头，如 Xxx，避免与原生组件产生冲突
new Vue({
  render: h => h(Xxx)
}).$mount('#app')

模板语法

展示内容

表达式

{{ object.a }}  // 表达式
{{ n + 1 }}  // 可以写任何运算
{{ fn(n) }}  // 可以调用函数
// 如果值为 undefined 或 null 就不显示
// 另一种写法为 <div v-text="表达式"></div>

HTML 内容

假设 data.x 值为 <strong>hi</strong>

<div v-html="x"></div>
// 即可使用html标签，显示粗体hi（默认不支持使用）

展示 {{n}}

<div v-pre>{{ n }}</div>
// v-pre 不会对模板进行编译

绑定属性

绑定src

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

`v-bind:` 简写为 `:`

<img :src="x" />

绑定对象

<div :style="{border: '1px solid red', height: 100}"></div>
// 这里 '100px' 可以写成 '100'

绑定事件

`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>

条件判断

`if...else`

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

循环

for (value,key) in 对象或数组

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

:key="index"有bug

显示、隐藏

`v-show`

<div v-show="n%2===0">
  n 是偶数
</div>
// "n%2===0" 为 true, 显示, 为 false, 不显示

近似等于

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

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

总结

Vue模板特点

使用XML语法

注意XML语法和HTML语法的区别

// XML 要加反斜杠 /

<input name="username">  // HTML
<input name="username" />  // HTML

<input name="username" />  // XML


// XML 空标签可以直接闭合

<div></div>  // HTML

<div />  // XML

使用{{}}插入表达式

使用v-html、v-on、v-bind等指令操作DOM

div.innerHTML = x  // 命令式编程
<div v-html="x"></div>  // 声明式编程

使用v-if、v-for等指令实现条件判断和循环

其他指令

v-model

v-slot

v-cloak

v-once

指令 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"  // 表示阻止事件传播/冒泡
@click.prevent="add"  // 表示阻止默认动作
@click.stop.prevent="add"  // 同时表示两种意思

有哪些修饰符

v-on支持的有

按键修饰符

.{ keycode | keyAlias }

事件修饰符

.stop
.prevent
.capture
.self
.once
.passive
.native

系统修饰符

.ctrl
.alt
.shift
.meta

.exact修饰符
鼠标按钮修饰符
```
.left
.right
.middle
```

v-bind支持的有
```
.prop
.camel
.sync  // 看下章节详细介绍
```
.sync修饰符

Vue规则：

组件不能修改props外部数据

this.$emit可以触发事件，并传参

$event可以获取$emit参数

点击查看示例
```
// 父组件 App.vue 中
<Child :money.sync="total"/>
// 等同于
<Child :money="total" v-on:update:money="total = $event"/>
```
更多关于.sync修饰符的内容，可以看我写的另一篇文章——Vue：深入理解 Vue 的 .sync 修饰符。
v-model支持的有
```
.lazy
.number
.trim
```

Vue：模板、指令与修饰符