Vue快速入门（从入门到实战）

[](()1、插值表达式

[](()（1）花括号

格式：

{ {表达式}}

说明;

• 该表达式支持JS语法，可以调用js内置函数（必须有返回值)

• 表达式必须有返回结果。例如1+1，没有结果的表达式不允许使用，如: var a = 1+1;

• 可以直接获取Vue实例中定义的数据或函数

示例

HTML：

i{name ) )

JS:

var app =new vue({

el:“#app”,

data:{

name:“Jack”"

}

})

[](()2、差值闪烁

使用0方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的

{ {}}

加载完毕后才显示正确数据，我们称为插值闪烁。

我们将网速调慢一些，然后试试看刚才的案例:

刷新页面有延迟

[](()3、使用v-text和v-html

使用v-text和v-html指令来替代{ {}}说明:

v-text∶将数据输出到元素内部，如果输出的数据有

代码，会作为普通文本输出

<button @click=“handleClick”>点我

<button @click=“num++”>+

xxx非常美丽！

{ {num}} 位其着迷！

运行测试

v-html:将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

从上述结果当中似乎没有什么区别

以下继续修改代码

<button @click=“handleClick”>点我

<button @click=“num++”>+

xxx非常美丽！

{ {num}} 位其着迷！

v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出

v-html:将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

[](()4、v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。

接下来学习的v-model是双向绑定，视图(view)和模型(Model)之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。

目前v-model的可使用元素有:

• input

• select

• textarea

• checkbox

• radio

• components（Vue中的自定义组件）

<button @click=“handleClick”>点我

<button @click=“num++”>+

xxx非常美丽！

{ {num}} 位其着迷！

---

编程语言分类

Java

JavaScript

Python

您已购买下列课程：{ {lessons.join(“,”)}}

运行查看

[](()5、v-on

[](()（1）基本用法

v-on指令用于给页面元素绑定事件。

语法:

v-on:事件名=“js片段或函数名”

简写语法:

真

@事件名="js片段或函数名“

例如v-on:click='add'可以简写为@click='add'

示例：