模板的template三种写法

1. Vue写在html里

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

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

2. 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会被替代

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

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

<script>
export default{
data(){return {n:0},
//data必须为函数
methods:{add(){thsi.n +=1}}
}
<script>
<style>这里写css</style>

然后在另一个地方写如下代码

import Xxx from './xxx.vue'
//xxx是一个options对象
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>即可显示粗体的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}">注意这里可以把'100px'写成100</div>

绑定事件

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
• 即发现函数就会加括号调用，否则直接运行代码
• 这就导致了一个问题，如果xxx(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>

条件判断

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>

显示，隐藏

v-show

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

总结

vue模板主要特点有

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