1. 模板 template 的三种写法
- 使用Vue完整版，写在HTML里
// index.html
<div id="xxx">
{{n}}
<button @click="add"><button/>
</div>
// main.js
new Vue({
el:"#xxx",
data:{n:0}, // data也可以写成函数
methods:{
add(){
...
}
}
})
- 使用Vue完整版，写在选项里
// index.html
<div id="app">
</div>
// main.js
new Vue({
data:{n:0}, // data也可以写成函数
tmeplate:`
<div id="xxx">
{{n}}
<button @click="add"><button/>
</div>
`,
methods:{
add(){
...
}
}
}).$mount('#app') // 等于 el:'#app'
- 这样写，HTML里面的 div#app 元素会被 template 外层的 div 替换。
- 使用 Vue 非完整版，配合 xxx.vue 文件
<template> <!-- 这里不是HTML，而是 XML -->
<div>
{{n}}
<button @click='add'>+1</button>
</div>
</template>
<!-- XML中 有闭合标签 / 比如 <input /> <div /> 空div可以这样写 -->
<script>
export default {
data(){ return n:0 } // data必须为函数
method: {add(){ this.n += 1 }}
}
</script>
<style> 这里写CSS样式 </style>
// 在另一个地方写如下代码
import Xxx from './xxx.vue'
// Xxx
是一个 options 对象
new Vue({
render: h => h{Xxx}
}),$mount('#app')
2. 模板 template 中的常用指令
2.1 展示内容
- 表达式
- {{ object.a }} 表达式
- {{ n+1 }} 可以写任何运算（不能写if else）
- {{ 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 不会对模板进行编译
2.2 绑定属性
1.绑定 src
<img v-bind:src='x' />
- v-bind: 简写为
<img :src="x" /> - 绑定对象
<div :style="{borde: '1px solid red', height: 100}"></div>
注意：这里可以把‘100px’写成100，默认为px，如果是'100em'就不可以省略em。
2.3 绑定事件
1.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> <!-- 点击之后，Veu 会运行n+=1 -->
发现函数就加括号调用，否则就直接运行代码。为了在模板 template 中保持简便容易理解的代码，还是避免使用函数中再调用函数这样的偏复杂操作。
2.缩写
<button @click="add">+1</button> <!-- 一般都会使用缩写 -->
2.4 条件判断
if...else
<div v-if="x >0"> <!-- 符合条件就显示div -->
x大于0
</div>
<div v-else-if="x ===0">
x为0
</div>
<div v-else>
x小于0
</div>
2.5 循环
- 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" >
属性名:{{name}}，属性值:{{name}}
</li>
</ul>
2.6 显示与隐藏
- 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。
3. 指令通用用法
3.1 什么是指令
以 v- 开头的东西就是指令。（只有v-bind和v-on会省略）
3.2 语法
- v-指令名： 参数=值，如 v-on:click=add
- 如果参数值没有特殊字符，则可以不加引号
- 有些指令没有参数和值，如 v-pre
- 有些指令没有值，如 v-on:click.prevent (阻止默认事件)
总结
1.Vue模板主要特点有 - 使用 XML 语法（不是HTML）
- 使用 {{}} 插入表达式
- 使用 v-html v-on v-bind 等指令操作DOM
- 使用 v-if v-for 等指令视线条件判断和循环
2.还没写出来的指令 - v-model 关于Vue表单
- v-slot 关于Vue插槽
- v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 - v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
3.3 事件修饰符
有些指令支持修饰符
- @click.stop = 'add' 表示阻止事件传播，冒泡
- @click.prevent = 'add' 表示阻止默认动作
- @click.prevent.stop = 'add' 表示以上两种意思
常用的修饰符有很多
- v-on 支持的有 .{ keycode | keyAlias } 即 键码 或 按键别名
- 另外还有 .stop .prevent .capture .self .once .passive .native
- 快捷键相关 .ctrl .alt .shift .meta .exact
- 鼠标相关 .left .right .middle
- v-bind 支持的 .prop .camel .sync
- v-model 支持的 .lazy .number .trim
3.4 .sync饰符
Vue的几个规则
- 组件不能修改 props 外部数据
- $emit 可以触发事件，并传参
- event 可以获取$emit的参数
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。但是真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源会显得混乱。因此 Vue 推荐以update:myPropName的模式触发事件（发布订阅模式）取而代之。
看一个场景，子组件要使用父组件传递的参数加以修改。
这里是子组件，点击执行自定义事件 'update:money.' 执行内容 为 'money - 100'
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money',money - 100)">
<span>花钱</span>>
</button>
</div>
</template>
<script>
export default {
props:['money']
}
</script>
这里是父组件 ,传给子组件 :money='total' props 数据.父元素绑定'update:money'事件，子组件执行时便触发事件，执行 total = $event。$event表示子组件调用的参数。
当子组件修改父组件数据时，必须这样写，不可以直接修改。
<template>
<div id="app">
App.vue 我现在有 {{total}}
<hr/>
<Child :money="total" v-on:update:money="total = $event"/>
</div>
</template>
<script>
import Child from './components/Child.vue'
export default {
name: 'App',
data(){
return {
total:10000
}
},
methods:{
add(){
this.n++;
}
},
components:{
Child:Child
}
}
</script>
用 .sync 修饰符时
<Child :money.sync="total"/>
<!-- 等价于 -->
<Child :money="total" v-on:update:money="total = $event"/>
- 子组件的自定义事件必须按照
update:参数名 格式不能修改。
又去看了另一个博客中的开关弹窗的例子。深入理解vue 修饰符sync【 vue sync修饰符示例】 - 简书 (jianshu.com)
<template>
<div class="details">
<myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
<button @click="changeValue">toggle</button>
</div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
template: `<div v-if="show">
<p>默认初始值是{{show}}，所以是显示的</p>
<button @click.stop="closeDiv">关闭</button>
</div>`,
props:['show'],
methods: {
closeDiv() {
this.$emit('update:show', false); //触发 input 事件，并传入新值
}
}
})
export default{
data(){
return{
valueChild:true,
}
},
methods:{
changeValue(){
this.valueChild = !this.valueChild
}
}
}
</script>
这是博客中的示例代码。
步骤
-
.sync修饰符监听子组件的 prop --show标志位。 - 子组件的模板在页面中添加了一个由
show控制是否显示的一个段落和一个按钮的div，show初始值为true，代表显示这个div。 - 当点击关闭按钮调用 closeDiv() 触发事件，使
show变为false，而 updata:show 将数据更新，使得 div 不显示。 - 再去点击父组件 toggle 按钮将标志位取反为true，让这块div重新显示。
<myComponent :show.sync='valueChild' />
<!-- 等价于 -->
<myComponent :show='valueChild' v-on:'update:show'="valueChild=$event"/>
