-曾老湿, 江湖人称曾老大。
-笔者QQ：133411023、253097001
-笔者交流群：198571640
-笔者微信：z133411023
-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。
-擅长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>
然后再另一个地方写如下代码：
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)返回一个函数咋办？
答：用Vue的人怎么可能想出这么复杂的用法
缩写
<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
<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模板语法总结
| 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 阻止默认的点击事件
| 修饰符 |
有些指令支持修饰符
@click.stop="add" // 表示阻止事件传播/冒泡
@click.prevent="add" // 表示阻止默认动作
#click.stop.prevent="add" // 同时表示两种意思
一共有多少修饰符呢？
// 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修饰符（特别重要）
| 场景描述 |
爸爸给儿子钱，儿子要花钱怎么办？
答：儿子打电话（触发事件）向爸爸要钱
Vue规则：组件不能修改props外部数据
Vue规则：this.$emit可以获取$emit的参数
Vue规则：$event可以获取$emit的参数
// 这些规则是尤雨溪定的
示例：
App.vue
<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
<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
<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"
Comments | NOTHING