Vue 模板
模板template 三种写法
一、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>这里写CSS代码</style>
然后再另一个地方写其他代码
import Xxx from './Xxx.vue' //Xxx 是一个 options 对象
new Vue({
render:h => h(Xxx)
}).$mount('#app')
模板里有哪些语法
我们把HTML模板叫做template
展示内容
表达式
- {} 表达时候
- {{ n + 1 }} 可以写任何运算
- {{ fn(n) }} 可以调用函数
- 如果值为 undefined 或 null 就不显示
- 另一种写法为
HTML内容
假设 data.x 值为 <strong>hi</strong>
<div v-html="x"></div> <!--即可显示粗体的 hi-->
只想展示 {}
<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}">
</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="x+=1">xxx</button>
<!--
点击之后 Vue会运行x+=1
即发现函数就加括号调用，否则就直接运行代码，这可能导致一些问题，如xxx(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">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}}, 属性值：{{name}}
</li>
</ul>
显示、隐藏
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模板的主要特点有
- 使用 XML 语法（不是HTML）
- 使用 {{}} 插值表达式
- 使用 v-html v-on v-bind 等指令操作DOM
- 使用 v-if v-for 等指令实现条件判断和循环
- 还有v-model、v-slot、v-cloak、v-once
指令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 .capture .self .once .passive .native
- 快捷键相关 .ctrl .alt .shift .meta .exact
- 鼠标相关 .left .right .middle
- v-bind 支持的有 .prop .camel .sync
- v-model 支持的有 .lazy .number .trim
.sync 修饰符
场景描述
- parent提供了一个函数，children要使用怎么办
- 答：children触发事件拿到这个函数
Vue规则：组件不能修改props外部数据
Vue规则：$emit可以触发事件，并传参
Vue规则：$event可以获取$emit的参数
Vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果不用.sync，想做完成这个功能，也可以props传初始值，然后事件监听，.sync就是一个语法糖。
由于这种场景很常见
- 所以Vue提供了 .sync
- :money.sync=“total” 等价于 :money=“total” v-on:update:money=“total = $event”
<template>
<div class="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>
<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>
// 此处是「非完整版」vue
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");