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},
methods:{add(){this.n +=1}}
}).$mount('#app')
//注意一个细节：div#app 会被替代
三、Vue非完整版，配合xxx.vue文件
<template>
<div>
{{n}}
<button @click="add">
+1
</button>
</div>
</template>
<script>
export default {
data(){
return {n:0}
},
methods:{
add(){
this.n += 1
}
}
}
</script>
//然后在另外一个地方写下代码
import Xxx from './xxx.vue'
//Xxx 是一个options对象，一般首字母大写，防止和其他变量冲突
new Vue({
render:h =>(Xxx)
}).$mount('#app')
这里我们一般把HTML模板叫做template
模板里有哪些语法
表达式
-
{{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" />
//可以简写为：
<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
总结：
发现函数就加括号调用，否则直接运行代码
缩写：
<button @click="add">+1</button>
条件判断
if.....else
<div v-if="x>0">
x>0
</div>
<div v-else-if="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">
属性名：{{index}} 属性值：{{u.name}}
</li>
</ul>
显示、隐藏
v-show
<div v-show=" x%2 === 0">
当x是偶数时显示
</div>
总结：
- Vue模板的主要特点
- 使用XML语法（不是HTML）
- 使用 {{}} 插入表达式
- 使用v-html v-on v-bind等指令操作DOM
- 使用v-if v-for等指令实现条件判断和循环
指令
前面提到的以 v-开头的就是指令
语法
-
v-指令名：参数=值，如 v-on:click=add
-
如果值没有特殊字符，可以不加引号，但是在值后面一点要加上空格，不然会出BUG
例如：
<input @click=add/> //这里如果忘了加空格的话为他会将add/看作一起的就没法识别 -
有些指令没有参数和值，如 v-pre
-
有些指令没有值，如v-on:click.prevent
修饰符
有些指令支持修饰符
@click.stop="add"表示阻止事件传播/冒泡
@click.prevent="add"表示阻止默认动作
@click.stop.prevent="add" 同时表示两种意思
修饰符的种类很多，这里就不一一介绍了
着重记住上面这两个再加上.sync和@keypress.enter="xxx"
.sync
场景描述
-
爸爸给儿子钱，儿子要花钱怎么办
-
儿子打电话（触发事件）向爸爸要钱
-
Vue规则：组件不能修改props外部数据
-
Vue规则：this.$emit可以触发事件，并且传参
-
Vue规则：emit的参数
-
总之一句话，通过.sync我们可以访问到组件外部的数据并且修改它
:money.sync="total"等价于 :money="tatal" v-on:updata:money="total"=$event"
