Vue 模板
- Vue 完整版，写在 HTML 中
<div id = "xxx">
{{n}}
<button @click="add">+</button>
</div>
new Vue({
el:'#xxx',
data:{
n:0,
},
methods:{
add(){}
}
})
- Vue 完整版，写在选项里
<div id="xxx"></div>
new Vue({
template:`
<div>
{{n}}
<button @click="add">+</button>
</div>
`,
data:{n:0},
methods:{add(){this.n += 1}},
}).$mount('#xxx')
//注意：HTML 中的 <div id="xxx"> 会被替换为 template 中的 div
- 非完整版 Vue，配合使用 demo.vue 文件
demo.vue
<template>
<div>
{{n}}
<button @click="add">+</button>
</div>
</template>
<script>
export default{
data(){ return {n:0} } //data 必须为函数
methods:{
add(){this.n += 1}
}
}
</script>
<style></style>
main.js
import Demo from './demo.vue'
//Demo 是一个 options 对象
new Vue({
render:()=>render(Demo)
}).$mount('#app')
表达式
{{ object.a }} 表达式
{{ n + 1}} 可以写任何运算
{{ fn(n) }} 可以调用 methods 中的函数
如果值为 undefined 或者 null 就不显示
HTML 内容
假设 data.x 的值为 hi
即可显示粗体的 hi
我就想展示{{ n }}
{{ n }}
则使用 v-pre 不会对模板进行编译
绑定属性
绑定 src
<img v-bind:src="x" />
v-bind: 可简写为 :
<img :src="x" />
绑定对象
<div :style = "{border:'1px solid red',height:100}">
</div>
//这里可以把 100px 写成 100
绑定事件
v-on:事件名
<button v-on:click="add">+</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">+</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-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>
注意：v-for 后方一定要加上 ：key
key 的值要有唯一性
显示、隐藏
v-show
<div v-show="n%2 ===0">n 是偶数</div>
表示，如果 n 为奇数，这个 div 就是不可见的
- 近似等于
div :style="{display:n%2 ===0}？'block':'none'"> n 是偶数</div>
但是要注意，看得见的元素 display 不只有 block
如：table 的 display 为 table
li 的 display 为 list-item
Vue 模板主要特点：
使用 XML 语法（不是 HTML）
<div></div> = <div />
只能使用 <input />，则<input> 是错误的
使用 {{ }} 插入表达式
使用 v-html，v-on，v-bind 等指令操作 DOM
使用 v-if 、v-for 等指令实现条件判断和循环
指令 Directive（命令、指示）
- 指令
什么是指令
以 v- 开头的东西就是指令
语法:
v-指令名：参数=值，如 v-on:click = add
如果值里没有特殊字符，可以不加引号"add"=>add
有些指令没有参数和值，如 v-pre
有些指令没有值，如 v-on:click.prevent 阻止默认事件
修饰符
有些指令支持修饰符
@click.stop = "add" 表示阻止事件传播/冒泡
@click.prevent="add" 表示阻止默认动作
@click.stop.prevent="add" 表示上面二者都有
有哪些比较重要的修饰符：
v-on：
.stop
.prevent
.sync
v-model：
.lazy
.number
.trim
5、关于 .sync 修饰符
- Vue 规则1:组件不能修改 props 外部数据。
- Vue 规则2: $emit 可以触发事件，并传参。
- Vue 规则3: $event 可以获取$emit 的参数。
示例：
// 儿子组件，从爸爸组件那里请求钱，然后消费
<template>
<div class="child">
{{money}}
// 点击按钮，触发事件
<button @click="$emit('update:money', money - 100)">
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
复制代码// 爸爸组件，传钱给儿子，并监听儿子动态
<template>
<div class="app">
App.vue 我现在有 {{total}}
<hr>
<Child :money.sync="total"/>
// 等价于<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>
关键点：
<button @click="$emit('update:money', money - 100)">花钱</button>
<Child :money.sync="total"/>
// 父组件等价于<Child :money="total" v-on:update:money="total = $event"/>
其中 $event 获取的 $emit 参数就是 money - 100
总结：.sync 修饰符就是一种语法糖，帮助简化这种在父子组建之间相互通过 prps相互通信的情况。子组件通过
$emit('update:title',newTitle)
把数据 newTitle 传给父组件，父组件使用
:title="total"`v-on:update:title="total = $event"
对其进行监听，$event就是用于获取参数 newTitle 的，而 .sync 可以对其进行简化，简化为:title.sync="total"
其他修饰符
@click.stop="xxx"
阻止事件冒泡、传播
template:`
<div v-on:click="dodo">
<button v-on:click.stop="doThis">阻止单击事件继续传播</button>
</div>
`,
methods:{
dodo: function () {
alert("dodo");
},
doThis: function () {
alert("noclick");
},
}
//如果没有 .stop 最后运行结果为：依次弹出 “noclick” 和 "dodo"
//加上 .stop 后，运行结果为："noclick"
@click.prevent="xxx"
取消该元素的默认事件，并执行 xxx 方法
template: `
<a @click.prevent="xxx" href="http://www.baidu.com">baidu</a>
`,
methods:{
xxx(){
console.log('阻止了默认事件')
}
}
//每次点击这个 a 标签，都不会跳转到 baidu，并且会执行 xxx 方法，输出“阻止了默认事件”
@keypress.enter="xxx"
每次键盘敲击 enter 回车键，都会执行 xxx 方法
template:`
<input @keypress.enter="xxx">
`,
methods: {
xxx(){
console.log('回车')
}
}
//每次在 input 输入框中输入回车，都会在控制台输出 “回车”
