[](()1、插值表达式
[](()(1)花括号
格式:
{ {表达式}}
说明;
-
该表达式支持JS语法,可以调用js内置函数(必须有返回值)
-
表达式必须有返回结果。例如1+1,没有结果的表达式不允许使用,如: var a = 1+1;
-
可以直接获取Vue实例中定义的数据或函数
示例
HTML:
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'
示例: