二. Vue-插值表达式与指令

插值表达式与指令

• 插值表达式:

{{ Mustache }} 插值

如：

{{msg}}

• 指令:

1.什么是指令：

• 什么是自定义属性：

在html5中引入的规范化自定义属性，如abc：123，而标准属性则如color：red

• 指令的本质就是自定义属性
• 指令的格式：以v-开始（如v-cloak），由开发者进行设定的

2.v-cloak指令用法：

• 插值表达式存在的问题：“闪动”：

当浏览器因为频繁刷新等原因造成卡顿时，差值表达式会存在显示花括号之后再迅速显示值的内容

• 如何解决该问题：

解决该问题的方式，取决于vue如何解析差值表达式。使用v-cloak指令可以使vue在进行解析时，先不预先显示花括号，从而很好解决该问题

官方API的使用方法：

<style type="text/css">
			[v-cloak] {
			  display: none;
			}
		</style>

<div v-cloak>
  {{ message }}
</div>

• 解决该问题的原理：先隐藏，替换好值后再显示最终的值

3.数据绑定指令：

• v-text：填充纯文本

相比插值表达式更加简洁，不存在“闪动”问题

<div v-cloak>{{msg}}</div>
<div v-text="msg"></div>
<!-- 这两个语句显示效果等效:
v-text相较更加简洁，用户体验更好
 -->

• v-html：填充HTML片段，更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

data:
				{
					msg:'hello vue',
					/*用于提供数据*/
					msg1:'<h1>HTML</h1>',
				}

<div v-html="msg1"></div>

存在安全问题，在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

本网站内部数据可以使用，来自第三方的数据不可以用。

• v-pre：填充原始信息

显示原始信息，跳过编译过程（分析编译过程）

<div v-pre>{{msg}}</div>
<!-- 跳过编译过程，直接显示源代码 -->

4.数据响应式：

• 如何理解响应式

html5中的响应式（屏幕尺寸改变样式）

数据的响应式（数据的变化改变样式）

• 什么是数据绑定

将数据填充到标签中，之前的数据绑定指令以及插值显示器都是响应式的，可以利用v-noce控制，从而进行性能的优化。

• v-once只编译一次

显示内容之后，不再具有响应样式。只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<div v-once>{{1+2+3}}</div>
<!-- 显示之后，该元素在数据台的修改无效
应用场景：显示的信息后续不需要再被修改，使用后一定程度上可以提高性能
 -->

5.双向数据绑定：

在与用户的交互过程中，用户交互过程产生的数据会影响到原本网页数据的变化

用户—-数据—-页面

• 双向数据绑定分析：

v-model指令：绑定一个具体数据，在表单控件或者组件上创建双向绑定。如：



components

<div>
			<input type="text" v-model="msg"/>
			<!-- v-model进行数据的双向绑定，能实现同步更改数据 -->
</div>

用户改页面内容数据会变，数据更改，用户页面也会发生改变
修饰符：

#.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

#.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

#.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

官方API有更深入的使用教程：v-model

• MVVM设计思想:

最重要的思想是“分治”，即将不同功能的代码放在不同的功能模块里面，然后再通过特定方式将他们之间建立关联

M(MODEL)：模型，用于提供数据

V(VIEW)：视图，本质上来说是DOM元素，提供页面展示效果

VM(view-model)：提供控制逻辑，将视图与模型结合在一起

从视图到模型数据，用的是事件监听的方式

从模型数据到视图，用的是数据绑定的方式