Vue模板三种写法

一 完整版，写到HTML中

  1. <div id=xxx>
  2.   {{n}}
  3.   <button @click="add">+1</button>
  4. </div>
  6. new Vue({
  7.     el:"#xxx",
  8.     data:{n:0}, //data可以改成函数
  9.     methods:{add(){}}
  10. })

二 完整版，写到选项里。注意，div#app会被替换掉

  1. <div id=app></div>
  3. new Vue({
  4.     template:`
  5.       <div>
  6.             {{n}}
  7.       <button @click="add">+1</button>
  8.         </div>
  9.   `,
  10.     data:{n:0},
  11.     methods:{add(){this.n += 1}}
  12. }).$mount("#app")

三 非完整版，配合xxx.vue文件,注意template里面是xml，而不是html。
xml中，1 无内容标签可以直接闭合

；2 标签必须有/。
为什么Vue模板xml语法？因为xml更容易写编译器。

  1. <template>
  2.     <div>
  3.   {{n}}
  4.   <button @click="add">+1</button>
  5.   </div>  
  6. </template>
  8. <script>
  9.     export default{
  10.         data(){return {n:0}}
  11.         methods:{add(){this.n += 1}}
  12.     }    
  13. </script>
  14. <style>
  15. </style>

在另一个地方引用xxx.vue文件

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

模板中有哪些语法

表达式

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

HTML内容

假设data.x的值为hi

即可显示粗体的hi
这是声明式，而命令式是：div.innerHTML = xxx

就想展示：{{n}}

  1. <div v-pre>{{n}}</div>

v-pre不会对这段{{n}}进行编译，直接原样展示。

绑定属性

绑定src，用v-bind

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

v-bind：简写为

  1. <img :src="x" />

绑定对象

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

绑定事件

v-on：事件名

  1. <button v-on:click="add">+1</button> 
  2. 点击之后，Vue会运行add()，这个括号是自动加上的
  4. <button v-on:click="xxx(1)">xxx</button> 
  5. 点击之后，Vue会运行xxx(1)
  7. <button v-on:click="n+=1">xxx</button>
  8. 点击之后，Vue会运行n+=1
  9. 即发现函数就加括号调用之，否则就直接运行代码
  11. 这导致一个问题，如果xxx(1)返回一个函数咋办
  12. 答：用Vue的人怎么可能想出这么复杂的用法，一般不会遇到这种情况的。
  13. 如果硬要解决：把xxx(1)赋值给add变量，然后v-on:click="add"即可。

缩写，例如@click

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

条件判断

if…else

  1. <div v-if="x>0">
  2.   x大于0
  3. </div>
  4. <div v-else-if="x===0">
  5.   x为0
  6. </div>
  7. <div v-else>
  8.   x小于0
  9. </div>

循环

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

  1. <ul>
  2.   <li v-for="(user,index) in users" :key="index"> //key="index"有bug
  3.       索引：{{index}}值：{{user.name}}
  4.   </li>
  5. </ul>
  7. <ul>
  8.     <li v-for="(value,name) in obj" :key="name">
  9.       属性：{{name}}属性值：{{name}}
  10.   </li>
  11. </ul>

坑预警：key=”index”有bug

显示、隐藏

v-show

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

近似等于

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

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

模板语法总结

Vue模板特点

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

还没讲的指令

v-model在Vue表单里讲
v-slot在Vue插槽里讲
v-cloak看文档
v-once看文档

指令Directive

同义词：命令、指示

什么是指令？

  1. <div v-text="x"></div> 以v-开头的就是指令

语法

v-指令名:参数=值，如v-on:click=add
如果值里没有特殊字符，则可以不加引号
有些指令没有参数和值，如v-pre
有些指令没有值，如v-on:click.prevent，prevent是阻止默认事件

修饰符

有些指令支持修饰符

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

一共有多少种修饰符呢？

v-on支持有

.{keycode|keyAlias} keyAlias是别名的意思
.stop 阻止冒泡
.prevent
.capture 捕获阶段监听
.self 点击的元素就是监听的元素，就触发
.once 只触发一次
.passive
.native

快捷键相关

.ctrl 按下ctrl时触发
.alt
.shift
.meta
.exact

鼠标相关

.left
.right
.middle

v-bind支持的有

.prop
.camel
.sync

v-model支持的有

.lazy
.number
.trim

需要记住的只有三个

.stop .prevent .sync

.sync 修饰符

场景描述

爸爸给儿子钱，儿子要花钱怎么办？
答：儿子打电话（触发事件）向爸爸要钱
Vue规则：组件不能修改props外部数据
Vue规则：$emit可以触发事件，并传参
Vue规则：$event可以获取$emit的参数

由于这种场景很常见，所以发明了.sync

发明了.sync

  1. :money.sync="total"

等价于
这是App.vue，(total是data里的数据)

  1. <Child :money="total" v-on:useMoney="total=$event" />

这是child.vue

  1. <button @click="$emit('useMoney',money - 100)">花钱</button>

$event接收的就是money-100

而官方推荐这样写

App.vue

  1. <Child :money="total" v-on:update:money="total=$event" />

child.vue，事件名叫update:money，这是一个整体，:号没有其他含义

  1. <button @click="$emit('update:money',money - 100)">花钱</button>

用.sync简写

App.vue中

  1. <Child :money.sync="total" />

资料来源：饥人谷