一. 模板template的三种写法

1. Vue 完整版，写在html里

new Vue的时候指定data和其他东西

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

html里写一个空的div。

通过new Vue的template选项指定我的页面内容。el挂载点选项可以用$mount替代。

template里的内容会替代html里的div，即，new Vue后，页面里的div是没有id的了。

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

在.vue文件里，把要展示在页面里的内容写在template标签里。

注意：template标签里不是html，而是XML语法。

XML和HTML区别

XML里有闭合标签

//HTML
<input name="username">   / 可加可不加，一般不加
<div></div>    空div

//XML
<input name="username" />   必须加/
<div />     空div，可以自闭合

二. 模板里的语法

模板通常指有HTML结构的那段字符串，又叫template

1. 展示内容

表达式 `{{}}`

{{ obj.a }} 默认去找data里的obj.a，展示到页面
{{ n+1 }} 可以写任何运算，加减乘除
{{ fn(x) }} 可以写函数调用，默认去methods里找这个函数

如果表达式的值为undefined或null，页面里就什么都不展示

{{}} 也等价于 <div v-text="n+1"></div>

HTML内容

<div v-html="x"></div> 告诉Vue，div的HTML文本是变量x的值，x可以在data里定义 x: "<strong>hi</strong>", 那么页面里就会出现加粗的hi

就想展示 {{ n }}

我就想让用户看到 {{ n }} <div v-pre>{{ n }}</div>

v-pre 不会对模板进行编译，里边写了啥就展示啥

2. 绑定属性

绑定src

<img v-bind:src="y" /> y 是一个变量，值是一段地址字符串

简写：<img :src="y" />

绑定对象

<div :style="{border:'1px solid red',width:'50px',height:'50px'}">
    绑定对象
</div>

绑定事件

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

缩写：<button @click="add">+1</button> 用缩写

<button @click="n+=1">+1</button> @click后边可以直接写执行的操作

3. 条件判断

<div v-if="z>0">z大于0</div>
<div v-else-if="z===0">z等于0</div>
<div v-else>z小于0</div>

4. 循环

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

<ul>
    <li v-for="(u,i) in users" :key="i">
        {{u.id}}  姓名：{{u.name}}  年龄：{{u.age}}
    </li>
</ul>

v-for 后边必须加 :key

u 和 i 就可以当作变量用了

5. 显示，隐藏

<div v-show="n%2===0">n是偶数,值为 {{n}}</div>

如果 v-show 后边的表达式为真，就显示这个div文本；为假就隐藏

三. 指令 Directive

v-html , v-pre 就是指令，就是以 v- 开头的东西

语法

v-指令名:参数=值 如 v-on:click=add

如果值里没有特殊字符，可以不加引号。

有些指令没有参数和值，如 v-pre,v-once

有些指令没有值，如v-on:click.prevent 阻止click的默认事件

四. 修饰符

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

v-on 的修饰符

@click.stop='add' 阻止事件传播/冒泡，并且点击后执行add函数

@click.prevent='add' 阻止默认动作，并且点击后执行add函数

@click.stop.prevent='add' 同时阻止冒泡和默认动作

`.{keyCode | keyAlias}`

keyCode 是按键码，键盘上的每个按键都有自己的按键码

keyAlias 是按键码的别名

<input @keypress="press" />

输入框里如果有键盘按下事件，就执行press函数

press(e) {
    console.log(e);
    if (e.keyCode === 13) {
      console.log("用户打了回车");
    }
}

Vue用一种方法简写，就是按键码修饰符

<input @keypress.13="press" />

可以指定按下键盘码是13的按键，才执行相应函数。

但是有时数字很难记，所以有了别名 keyAlias

<input @keypress.enter="press" />

《Vue-模板语法》