- Vue的模板语法
- 模板中重要语法
- Vue模板语法总结
- 指令 Directive
- .sync修饰符（特别重要）
-曾老湿, 江湖人称曾老大。
-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
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}}, // data必须为函数
methods:{add(){ this.n =1 }}
}
</script>
<style scope>
这里写CSS代码
</style>然后再另一个地方写如下代码：
代码语言：javascript复制import Xxx from './Xxx.vue'
// Xxx是一个options对象
new Vue({
render: h => h(Xxx)
}).$mount('#app')模板中重要语法
展示内容 |
|---|
表达式
代码语言：javascript复制{{ object.a }}
{{ n 1 }}
{{ fn(n) }}
// 如果值为undefined 或 null 就不显示
// 另一种写法为 <div v-text="表达式"></div>HTML
代码语言：javascript复制// 架设data.x值为 <strong>hi</strong>
<div v-html="x"></div> // 即可显示粗体的hi就想展示 {{n}}
代码语言：javascript复制<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：事件名
代码语言：javascript复制<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)返回一个函数咋办？ 答：用Vue的人怎么可能想出这么复杂的用法
缩写
代码语言：javascript复制<button @click="add"> 1</button>
// 正常人都用缩写条件判断 |
|---|
<div v-if="x>0">
x大于0
</div>
<div v-else-if="x===0">
x等于0
</div>
<div v-else="x<0">
x小于0
</div>循环 |
|---|
<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">
属性名：{{name}} 属性值：{{value}}
</li>
</ul>
// 坑预警：:key="index" 有bug显示、隐藏 |
|---|
v-show
代码语言：javascript复制<div v-show="n%2===0"> n是偶数 </div>近似等于
代码语言：javascript复制<div :style="{display:n%2===0 ?'block' :'none'}">
n是偶数
</div>
// 但是要注意，看得见的元素display不只有block
// 如table的display为table
// 如li的display为list-itemVue模板语法总结
Vue模板语法主要特点 |
|---|
1.使用XML语法（不是HTML）
2.使用{{}}插入表达式
3.使用v-html v-on v-bind等指令操作DOM
4.使用v-if v-for等指令实现条件判断和循环指令 Directive
同义词：命令、指标
什么是指令 |
|---|
<div v-text="x"></div>
<div v-html="x"></div>以v-开头的东西就是指令（名字起的不太好）
语法 |
|---|
// v-指令名:参数=值，如： v-on:click=add
// 如果值里没有特殊字符，可以不加引号
// 有些指令没有参数和值，如：v-pre
// 有些指令没有值，如：v-on:click.prevent 阻止默认的点击事件修饰符 |
|---|
有些指令支持修饰符
代码语言：javascript复制@click.stop="add" // 表示阻止事件传播/冒泡
@click.prevent="add" // 表示阻止默认动作
#click.stop.prevent="add" // 同时表示两种意思一共有多少修饰符呢？
代码语言：javascript复制// v-on 支持的有.{keyCode | keyAlias}
.stop
.prevent
.captuure
.self
.once
.passive
.native
// 快捷键相关：
.ctrl
.alt
.shift
.meta
.exact
// v-bind支持的有
.prop
.camel
.sync
// v-model支持的有
.lazy
.number
.trim.sync修饰符（特别重要）
场景描述 |
|---|
爸爸给儿子钱，儿子要花钱怎么办？
答：儿子打电话（触发事件）向爸爸要钱
代码语言：javascript复制Vue规则：组件不能修改props外部数据
Vue规则：this.$emit可以获取$emit的参数
Vue规则：$event可以获取$emit的参数
// 这些规则是尤雨溪定的示例：
App.vue
代码语言：javascript复制<template>
<div id="app">
App.vue 我现在有{{total}}
<hr>
<Child :money="total" v-on:update:money="total = $event" />
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data(){
return {total:10000}
},
components: { Child: Child}
};
</script>
<style>
#app{
border: 3px solid red;
padding: 10px;
}
</style>Child.vue
代码语言：javascript复制<template>
<div class="child">
{{money}}
<button @click="$emit('update:money',money-100)">
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
<style>
.child {
border: 3px solid green;
}
</style>

由于这种场景很常见，所以尤雨溪发明了.sync。
App.vue
代码语言：javascript复制<template>
<div id="app">
App.vue 我现在有{{total}}
<hr>
<Child :money.sync="total" />
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data(){
return {total:10000}
},
components: { Child: Child}
};
</script>
<style>
#app{
border: 3px solid red;
padding: 10px;
}
</style>:money.sync="total" 等价于 :money="total" v-on:update:money="total = $event"
