Vue 模板语法
模板template的三种写法
一、Vue完整版，写在HTML里
<div id='xxx'>
{{ n }}
<button @click="add">+1</button>
</div>
<script>
new Vue({
el:"#xxx",
data:{n:0},//data可以改写为函数
mothods:{add(){}}
})
</script>
二、Vue完整版，写在选项里
<div id="app">
</div>
<script>
new Vue({
template:`
<div>
{{ n }}
<button @click="add">+1</button>
</div>
`,
data:{n:0},//data可以改写为函数
mothods:{add(){this.a +=1}}
}).$mount('#app')//注意一个细节：div#app会被替代
</script>
三、Vue非完整版，配合xxx.vue文件
//xxx.vue文件
<template>
<div>
{{ n }}
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
//data必须是函数
data(){
return {
n:0
}
},
methods:{add(){this.a +=1}}
}
</script>
<style>这里写css</style>
然后在另一个写如下代码
import Vue from "vue"
import Xxx from "./xxx.vue"
//Xx是一个options对象
new Vue({
render：h=> h(Xxx)
}).$mount('#app')
模板里的语法（HTML模板叫做template）
展示内容
- 表达式
{{ object.a }} 表达式
{{ n+1 }} 可以写任何计算
{{ fn() }} 可以调用函数
如果值为 undefined 或 null 就不显示
另一种写法 <div v-taxt="表达式"></div>
- HTML
假设 data.x 值为 <h1>hai</h1>
<div v-html="x"></div> 即显示标题hai
- 如果不想这样像是
<div v-pre>{{ x }}</div>
v-pre:不对模板进行编译
###绑定属性
- 绑定src属性
<img v-bind:src="x"/>
- v-bind可简写为：
<img :src="x"/>
- 绑定对象
<div :style="{border:1px solid red,widht: 400}">
注意着里可以把"100px" 写成 100
</div>
- 绑定事件
<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-fro="(u,index) in array" :key="index">
索引 {{ index }} 值 {{ u }}
</li>
</ul>
<ul>
<li v-fro="(value,name) in object" :key="name">
属性名 {{ name}} 属性值值 {{ value }}
</li>
</ul>
注意: 坑预警 :key="index" 有bug
显示、隐藏
- v-hsow
<div v-show="n%2===0">n为偶数</div>
近似于
<div :style="{display: n%2===0?'blick':'none'}">
n为偶数
</div>
注意：看见的元素display不只有blick
Vue模板主要的特点
- 使用XML语法（不是使用HTML）
- 使用{{ }}插入表达式
- 使用v-html、v-on、v-bind等指令操作DOM
- 使用v-if、v-for等指令实现条件判断和循环
指令（Directive）
- 什么是指令
<div v-taxt="表达式"></div>
以v-开头的都是指令
- 语法
v-指令名 = 值 例如 v-on:click="add"
如果值里没有特殊符号，可以不加引号
有些指令没有参数和值例如 v-pre
有些指令没有值 例如 v-on:click.prevent
修饰符
有些指令支持修饰符
- @click.stop="add" （表示阻止事件传播/冒泡）
- @click.prevent="add"（表示阻止默认事件）
- @click.stop.prevent="add"（同事表示两种意思）
一共有多少修饰符
- v-on支持的有.{keycode| keyAilas}
.stop .pevent .capture .selt .once .npassive .notive
- 快捷键相关的有 .cltrl .alt .shift .mate .exact
- 鼠标相关 .left .right .middel
- v-bind 支持的有 .prop .camel .sync
- v-model支持的 .lazy .number .trim
总结
搞清楚子个修饰符就够用
- @click.stop="add" （表示阻止事件传播/冒泡）
- @click.prevent="add"（表示阻止默认事件）
- @keypress.enter="add"（按下enter触发 ）
- :money.sync="toay"（传入的值变了，外面的值也会改变）
