【Vue全解2】Vue模板语法摘要

目录

• 系列文章
• Vue模板语法
• template模板
• 模板中的语法
• Vue模板的特点

一、系列文章

【Vue 全解 0】Vue 实例
【Vue 全解 1】构造选项 options 之 data
【Vue 全解 2】Vue 模板语法摘要
【Vue 全解 3】Vue 的 data 代理和数据响应式
【Vue 全解 4】options 之生命周期钩子（created、mounted、updated、destroyed）
【Vue 全解 5】options 之 DOM（el、template、render）
【Vue 全解 6】options 之资源（directive、filter、components）和修饰符
【Vue 全解 7】options 之组合（mixin、extends、provide/inject）
【Vue 全解 8】Vue 表单输入绑定 v-model

二、Vue模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

三、template模板

模板template总共有三种写法，接下来一一举例

1. Vue完整版，写在HTML里

<div id='xxx'>
	{{n}}
	<button v-on:click='add'>+1</button>
</div>
new Vue(){
	el:'#xxx',
	data:{
		n:0
	},
	methods:{
		add(){
			this.n+=1;
		}
	}
}

---

2. Vue完整版,写在选项options里 注意：div#app会被代替

<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')

---

3. Vue非完整版，配合xxx.vue文件(即一个compoents组件)
   • xxx.vue文件(副)组件 组件里面的data只能写函数

<template>
	<div class='red'>
		{{n}}
		<button v-on:click='add'>+1<button>
	</div>
</template>
<script>
	export default:{
		data(){
			return {
				n:0
			}
		},
		methods:{
			add(){
				this.n+=1;
			}
		}
	}
</script>
<style scoped>
	.red {
		color:red;
	}
<style>

• 主组件 导入的组件是一个option对象

import Demo from './xxx.vue';	//导入vue组件
new Vue({
	components:{Demo},
	render:h=>h(Demo);
}).$mount('#app');

---

四、模板中的语法

1、展示内容

• 表达式

  {{}} 用双括号表示，括号里面表示要写的表达式

  {{n+1}} -- 表示n+1运算

  {{fn(n)}} -- 调用函数

• HTML内容

  假设data.x的内容为：<strong>hi</strong>

  <span v-html="data.x"></span> 即可显示粗体的hi

• 就只是展示{{n}}内容而不是表达式

  <div v-pre>{{n}}</div>

---

2、绑定属性

• 绑定src

  <img v-bind:src="x"></img> 表示绑定src为x，注意这里的x并不是字符串x

• v-bind 简写语法

  <img :src='x'></img>

• 绑定对象：

  <div :style="{border:1px solid red,height:100}">
  </div>	//注意这里可以将100px写成100
  

---

3、绑定事件

• v-on:事件名

<button v-on:click="add">+1</button>
/* 点击之后，Vue运行add()函数 */
<button v-on:click="xxx(1)">xxx(1)</button>
/* 点击之后，Vue运行xxx(1) */
<button v-on:click="n+=1">n+1</button>
/* 点击之后，Vue运行n+1操作 */

• 缩写

  <button @click='add'>+1</button>

---

4、条件判断

• if-else

/* 哪一个div满足条件则会显示出来(前提是data里面有x这个变量) */
<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>

---

5、循环

• for(value,key) in 对象或数组

<!-- 以下是data里面的内容 -->
data:{
	users:[{
		name:'frank1',
		age:18,
		gender:'男'
	},{
		name:'frank2',
		age:18,
		gender:'男'
	},{
		name:'frank3',
		age:18,
		gender:'男'
	},{
		name:'frank4',
		age:18,
		gender:'男'
	},
	]
}
<ul>
	<!-- 注意key值有bug，后面详解 -->
	<li v-for="(u,index) in users" :key='index'>
		索引：{{index}} 值：{{u.name}}
	</li>
</ul>

---

6、显示、隐藏

• v-show

<div v-show='n%2===0'> n是偶数 </div>

• v-show的近似等于

<div :style="{display:n%2 'none':'black'}"> n是偶数 </div>

坑点：

1. 看得见的元素不只有block

2. 如table的display为table

3. 如li的display为list-item

---

五、Vue模板的特点

• 使用XML语法
• 使用{{}}插入表达式
• 使用v-html、v-on、v-bind等指令操作DOM
• 使用v-if、v-for等指令实现条件判断和循环

XML 常用语法：必须要闭合标签。