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");