Vue2（2.6.14）

一、差值表达式

注意

插值表达式中不解析带有html标签 的富文本

插值表达式不能出现在属性值的位置

<!-- 调用系统方法 -->
<h3>{{msg.toUpperCase()}}</h3>
<!-- 三元表达式 -->
<h3>{{age>=18?'已成年':'未成年'}}</h3>
<!-- 是否可以解析富文本?: 不解析富文本 -->
{{content}}
<!-- 调用自定义方法 -->
<h3>{{reverse(msg)}}</h3>

指令 directive

是 vue 中提供的一种特殊的模板语法

v-text

作用 : 设置标签的内容

用法 : 当做标签的自定义属性使用即可

特点

会覆盖元素内部原始的内容 不解析带有标签的富文本

// 指定模板容器 el: 是element的缩写
el: '#app',
// 定义数据
data: {
msg: 'hello vue',
title: '我的vue项目',
age: 20,
bool: true,
arr: ['vue', 'react', 'angular'],
user: {
name: 'jack',
age: 20,
sex: '女'
},
content: `
<h3>新闻标题</h3>
`
},
// 定义方法
methods: {
// 实现字符串翻转
reverse(str){
return str.split('').reverse().join('');
}
}
});
<h1 v-text="msg"></h1>
<h1 v-text="msg1"></h1>
new Vue({
el:'#app',
data:{
msg:'你好, vue.js'
msg1:'<i>你好, vue.js</i>'
}
});

v-html

作用 : 设置元素的内容

语法

特点 :

会覆盖元素内部的原始内容

可以解析带有 html 标签的富文本

v-model

作用 : 实现表单元素双向数据绑定

语法

注意

一般只能和表单元素结合使用

v-bind

作用 : 动态设置属性值

语法

简写 : 省略 v-bind, 在属性名前保留 :

批量设置元素属性

<div v-html="content"></div>
<input v-model="name"/>
<img v-bind:src="url" v-bind:alt="alt" v-bind:title="title" />
<img :src="url" :alt="alt" :title="title" />
<img v-bind="imgObj">
new Vue({
el:'#app',
data:{
// 属性集合: 对象中的属性名必须和元素的属性名保持一致
imgObj:{
src:'./imgs/6.jpg',
alt:'这是一张图片',
title:'这是一张图片'
}
}
});

v-on

作用 : 注册事件

语法 :

事件处理函数后边的 () , 可加可不加

事件名称全部采用小写 : click , mouseover , mousemove , mouseenter

简写 : 使用 @ 代替 v - on:

v-show

作用 : 可以控制元素的显示状态

语法 : 属性值必须是布尔类型

v-show 如何让元素隐藏 : 通过 css 的方式让元素隐藏 ( style="display:none" )

应用场景 : 如果需要频繁切换显示状态 , 建议使用 v-show, 性能开销更小

v-if

作用 : 控制元素的显示状态 ( 实现条件渲染 )

语法 : 属性值必须是布尔类型

v-if 如何隐藏元素 : 直接销毁元素

应用场景 : 如果不是频繁切换显示状态 , 可以使用 v-if

v-else-if

注意 :

不能单独使用 , 必须和 v-if 指令结合使用

需要指定条件

v-else

注意 :

不能单独使用 , 必须和 v-if 指令结合使用

不需要指定条件

<!--
事件处理函数需要在methods中定义
-->
<div v-on:事件名称="事件处理函数"></div>
<div @事件名称="事件处理函数"></div>
<div v-show="布尔类型"></div>
<div v-if="布尔类型"></div>

v-once

作用 : 一旦在某个元素上应用了该指令 , 这个元素的内容就只会被编译一次 ( 当元素内部引用的某个

数据更新后 , 元素的内容是不会自动更新的 )

特点 : 不需要指定属性值

语法

v-for

作用 : 实现数组或者对象的列表渲染

语法

v-for 中的 key 属性

要求 : key 属性的属性值需要唯一不重复 , 一般需要使用数值或者字符串充当 key 属性的属性值

作用

在数据层和视图层建立一一对关系 , 方便 vue 实现高效视图更新

vue 底层为了提升性能 , 当我们在数组开头插入新的元素的时候 , vue 不会重新渲染整个数

组 , 会对页面中已经存在的标签元素进行复用 ( 就地复用 ), 但是在复用的时候 , 只是更新了

对应的动态数据 , 没有更新数据之外的视图状态 , 所以当我们在数组的开头或者中间插入

数组元素的时候 , 就会出现视图状态的错乱 , 通过在每一个列表子元素上添加唯一不重复

的 key 属性 , 就可以让 vue 在进行视图更新的时候 , 保留之前的一些视图状态信息ss

用法: 当做标签的自定义属性使用即可