Vue.js模板语法介绍

Vue.js模板、指令

模板语法概述

1、如何理解前端渲染？

​ 把数据填充到HTML标签中，一般我们使用Ajax将数据从后台查询出，结合模板（）

2、前端渲染方式

2.1、原生js拼接字符串

​ 使用字符串拼接的形式拼接到html标签中，例如在js中拼接'

giao

'。

​ 缺点：代码不规范，维护难度高。

2.2、使用前端模板引擎

​ 与字符串拼接相比，代码明显规范了很多，它拥有自己的一套模板语法规则，程序员都遵循 这套规则，代码维护性就提高了很多。

​ 缺点：没有专门提供事件机制。需要渲染后使用js增加事件。

2.3、使用vue特有的模板语法

​ 1)、插值表达式

​ 2)、指令

​ 3)、事件绑定（处理）

​ 4)、属性绑定

​ 5)、样式绑定

​ 6)、分支循环结构

3、指令

3.1、什么是指令？

​ 什么是自定义属性？指令的本质就是自定义属性。指令的格式：以v开始（比如：v-cloak）。这取决于 vue的作者是怎么设计的，我们只需要使用即可。

3.2、v-cloak指令用法

​ 插值表达式存在一个‘闪动’的问题，如何解决该问题呢？我们引入了v-cloak指令。解决该问题的原理：先 隐藏，替换好值之后显示最终的值。

1、才css中提供样式。
	[v-cloak]{
		display:none;
	}
2、在插值表达式所在的标签中添加v-cloak指令。
	<div v-cloak>{{msg}}</div>
原理：先通过样式隐藏，然后在内存中进行渲染，替换好之后再显示最终效果。

3.3、v-text指令

​ 如果要在标签中插入文本值，可以使用v-text标签，它比插值表达式更加简洁，同时不存在闪动问题。但是插值表达式可以使用运算符，它不可以。

<div v-text="msg"></div>
此时，msg就会被解析为纯文本，例如msg的值为hello world编译后源码如下
<div>hello world</div>

3.4、v-html指令

​ 填充HTML片段，但是存在安全问题，即容易受到XSS攻击，本地网站内部数据可以使用，来自第三方的数据不可用。不是很推荐使用。

<div v-html="title1"></div>
此时，title1就会被解析为html标签，例如title1的值为<h1>hello world</h1>编译后源码如下
<div><h1>hello world</h1></div>

3.4、v-pre指令

​ 如果想在页面是直接展示{{msg}}，而不是插值表达式解析的结果，就可以使用v-pre指令，它可以显示原始信息，跳过编译过程。使用方法如下。

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

4、响应式指令

什么是响应式？

​ html中的响应式:屏幕尺寸的变化导致样式的变化

​ 数据的响应式：数据的变化导致页面的变化，比如在控制台中修改了vm的属性，页面的数据也发生变 化。

什么是数据绑定？

​ 数据绑定就是将数据填充到标签中，使用插值表达式进行的数据绑定默认就是响应式的。

4.1、v-once指令

​ 如果某个属性只希望它编译一次，之后不再具有响应式功能，就可以使用v-once标签。即只在编译的时 候具有响应式。如果响应的数据后续不需要修改可以使用v-once，这样可以提高性能。

5、双向数据绑定

什么是双向数据绑定？

​ 我们修改了vm中的属性其相应到页面，这叫数据的相应，如果修改了页面上的属性也可以修改vm中的数据，此时就是双向的数据绑定，即修改了任意一方就会影响另一方的数据。

5.1、v-model指令

​ 使用v-model指令可以实现双向的数据绑定

<input type='text' v-model = 'uname'/>

​ 插值表达式默认支持双向数据绑定。