Vue基础系列（四）——Vue中的指令（上）
写在前面的话：
文章是个人学习过程中的总结，为方便以后回头在学习。
文章中会参考官方文档和其他的一些文章，示例均为亲自编写和实践，若有写的不对的地方欢迎大家和我一起交流。
VUE基础系列目录
一.前言
vue中的指令是指以“v-”开头的一个语法，它主要是将vue中data数据和数据的变化作用到DOM元素中。
二.指令的基本语法
<tag v-指令ID="单个的javascript表达式"> </tag
三.v-html
v-html指令在《VUE基础系列（三）——VUE模板中的数据绑定语法》中有使用过，但是是以模板数据绑定的使用总结的，而实际上v-html被称为vue中的指令，它的作用我们之前也总结过：v-html会将数据中的html片段解析成DOM节点插入到元素子节点中。
在这里我们写一个跟以前不一样的示例，学习一下v-html的另外一个特性：v-html指令会以innerHTML的方式更新元素的内容。
#示例
<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(上)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.content{
font-size: 16px;
}
</style>
</head>
<body>
<div id='box'>
<div class="content" v-html='msg'>
<h1>这是一段测试文本</h1>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
msg: '<h1>我也是一段测试文本,我可能会覆盖div.content中的节点内容</h1>',
}
});
</script>
</body>
</html>
#结果
#总结
- v-html会将数据中的html片段解析成DOM节点插入到元素子节点中。
- v-html指令会以innerHTML的方式更新元素的内容（即如果v-html指令所在的DOM元素存在子节点，那子节点就会被指令绑定的数据所覆盖）。
四.v-text
v-text指令会将数据数据解析成文本在更新到元素中，并且是以innerText的方式更新的。
#示例
<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(上)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.content{
font-size: 16px;
} </style>
</head>
<body>
<div id='box'>
<div class="content" v-text='msg'>
<h1>这是一段测试文本</h1>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
msg: '<h1>我也是一段测试文本,我可能会覆盖div.content中的节点内容</h1>',
}
});
</script>
</body>
</html>
#结果
#总结
- v-text会将数据中的html片段以文本的形式插入到元素子节点中（不解析html片段，将html片段以字符串的形式原封不动的显示在模板中）。
- v-text指令会以innerText的方式更新元素的内容（即如果v-text指令所在的DOM元素存在子节点，那子节点就会被指令绑定的数据所覆盖）
五.v-bind
v-bind这个指令我们在《VUE基础系列（三）——VUE模板中的数据绑定语法》中也有过总结：v-bind可以将数据绑定到元素的属性上，在这里我们不在演示这个特性。
在浏览vue官方文档时，可以看到v-bind指令对元素的class属性和style属性有一些增强的特性（官网链接传送门 biubiubiu ！！！）。
1.v-bind绑定元素的class属性
v-bind:class可指定javascript表达式有两种数据类型：对象类型和数组类型。下面我们写一个示例，分别看一下这两个数据类型的用法和效果。
#对象类型
<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(上)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.red{
color: red;
}
.green{
color: green;
}
</style>
</head>
<body>
<div id='box'>
<!-- 给v-bind:class指定对象类型的javascript表达式-->
<h1 v-bind:class='{red: redActive}'>这是一段测试文本</h1>
<h1 v-bind:class='{green: greenActive}'>这也是一段测试文本</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
redActive: false,
greenActive :true
}
});
</script>
</body>
</html>
从上面的代码示例中可以看出，当v-bind绑定的对象的键值为true时，键会作为字符串添加到元素的类名中，相应的css规则就会生效。
同时对象类型的javascript表达式支持多个键值对。
<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(上)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.red{
color: red;
}
.green{
color: green;
}
.small{
font-size: 20px;
}
</style>
</head>
<body>
<!-- v-bind:class -->
<div id='box'>
<h1 v-bind:class='{red: redActive }'>这是一段测试文本</h1>
<!-- 对象类型的javascript表达式支持多个键值对，只要满足值为true，对应的键都会以字符串的形式添加到class类名中 -->
<h1 v-bind:class='{green: blackActive, small: smallActive}'>这也是一段测试文本</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
redActive: false,
blackActive :true,
smallActive :true,
}
});
</script>
</body>
</html>
可以看到，多个键值对时，只有对应键的值为true，元素就会存在多个类名。
#数组类型
接下来我们写一个数组类型的javascript表达式
<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(上)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.red{
color: red;
}
.small{
font-size: 20px;
}
</style>
</head>
<body>
<div id='box'>
<h1 v-bind:class='[redActive,smallActive]'>这是一段测试文本</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
redActive: 'red',
smallActive :'small',
}
});
</script>
</body>
</html>
可以看到数组表达式的语法和对象表达式的语法是完全不一样的，是直接将数组的值作为元素的类名。
2.v-bind绑定元素的style属性
v-bind绑定数据到style属性，同样可以指定数组类型和对象类型的javascript表达式。
#对象类型
为style绑定的对象类型的基本语法如下：
<tag v-bind:style="{ css属性：vue中的数据或者css属性值 }"> </tag>
或者
<tag v-bind:style="vue中的某个对象类型数据"> </tag>
css的属性值可以直接是css的属性值，也可以是vue中的data数据，或者直接使用vue中的某个对象数据。
注意：这里需要注意的是当css属性是类似于font-size这样中间带横线的属性，有两种方式书写，一种是驼峰命名方式fontSize，一种是使用单引号括起来'font-size'。
我们先写一个例子
<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(上)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.red{
color: red;
}
.small{
font-size: 20px;
}
</style>
</head>
<body>
<div id='box'>
<!-- css的属性值可以直接是css的属性值，也可以是vue中的data数据 -->
<h1 v-bind:style="{color: 'red',fontSize: fontSize}">这是一段测试文本</h1> <!-- 直接使用vue中某个对象类型的数据 -->
<h1 v-bind:style="styleObj">这是一段测试文本</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
fontSize: '20px',
// styleObj 对象类型的数据
styleObj: {
color: 'green',
fontSize: '30px'
}
}
});
</script>
</body>
</html>
这个结果也是显而易见，我们也就不多说了。
#数组类型
数组类型的javascript表达式可以是单个或者多个的vue对象数据。
<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(上)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.red{
color: red;
}
.small{
font-size: 20px;
}
</style>
</head>
<body>
<div id='box'>
<!-- v-bind:style绑定数组类型的javascript表达式，其中styleObject和borderStyle均为对象类型的数据-->
<h1 v-bind:style="[styleObj, borderStyle]">这是一段测试文本</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
fontSize: '20px',
styleObj: {
color: 'green',
fontSize: '30px'
},
borderStyle: {
border: '1px solid'
}
}
});
</script>
</body>
</html>
可以看到，多个对象的数据以内联样式成功的作用到了元素上。
七.总结
1.v-html指令
- v-html会将数据中的html片段解析成DOM节点插入到元素子节点中。
- v-html指令会以innerHTML的方式更新元素的内容（即如果v-html指令所在的DOM元素存在子节点，那子节点就会被指令绑定的数据所覆盖）。
2.v-text指令
- v-text会将数据中的html片段以文本的形式插入到元素子节点中。
- v-text指令会以innerText的方式更新元素的内容（即如果v-text指令所在的DOM元素存在子节点，那子节点就会被指令绑定的数据所覆盖）。
3.v-bind指令
v-bind可以将数据绑定到元素的属性上
v-bind绑定元素的class属性
- 可指定的javascript表达式有两种数据类型：对象和数组。
- 对象：对象的键值为true时，键会作为字符串添加到元素的类名。
- 数组：直接将数组的值作为元素的类名。
v-bind绑定元素的style属性
- 可指定的javascript表达式有两种数据类型：对象和数组。
- 对象：可指定的对象值有三种，css的属性值，vue中的data数据，vue中的某个对象数据。
- 数组：数组元素为单个或者多个的vue对象数据
要加油鸭
Vue基础系列（四）——Vue中的指令（上）的更多相关文章
- Vue基础系列（五）——Vue中的指令（中）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- 【C++自我精讲】基础系列四 static
[C++自我精讲]基础系列四 static 0 前言 变量的存储类型:存储类型按变量的生存期划分,分动态存储方式和静态存储方式. 1)动态存储方式的变量,生存期为变量所在的作用域.即程序运行到此变量时 ...
- python基础系列教程——Python中的编码问题，中文乱码问题
python基础系列教程——Python中的编码问题,中文乱码问题 如果不声明编码,则中文会报错,即使是注释也会报错. # -*- coding: UTF-8 -*- 或者 #coding=utf-8 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页+指令(一)
缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...
- Vue学习系列(四)——理解生命周期和钩子
前言 在上一篇中,我们对平时进行vue开发中遇到的常用指令进行归类说明讲解,大概已经学会了怎么去实现数据绑定,以及实现动态的实现数据展示功能,运用指令,可以更好更快的进行开发.而在这一篇中,我们将通过 ...
- Vue基础（环境配置、内部指令、全局API、选项、内置组件）
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- 夯实基础系列四：Linux 知识总结
前言 前三节内容传送门: 夯实基础系列一:Java 基础总结 夯实基础系列二:网络知识总结 夯实基础系列三:数据库知识总结 现在很多公司项目部署都使用的是 Linux 服务器,互联网公司更是如此.对于 ...
随机推荐
- Cocos2d-x入门之旅[1]场景
在游戏开发过程中,你可能需要一个主菜单,几个关卡和一个END的界面,如何组织管理这些东西呢? 和其他游戏引擎类似,Cocos也使用了场景(Scene) 这个概念 试想象一部电影或是番剧,你不难发现它是 ...
- python入门经典_好资源送不停
Python入门经典(2K超清_送书) https://study.163.com/course/courseMain.htm?courseId=1006183019&share=2& ...
- Python3_基础
目录 数据类型 变量 数据类型的转换 算术操作符 输入 字符串常用方法 数据类型 我们先来看看三种常见的数据类型 字符串 str 在Python中,字符串一般都用引号引起来,不管是用单引号还是双引号都 ...
- Ubuntu16.04 安装apache+mysql+php(LAMP)
记录下ubuntu环境下安装apache+mysql+php(LAMP)环境. 0x01安装apache sudo apt-get update sudo apt-get install apache ...
- vc++木马源码免杀一些常用方法
1.字符串连接 ////////////////////////////////////////////////////////////把字符串"canxin"连接起来(字符串连接 ...
- Jdk14 都要出了，Jdk8 的时间处理姿势还不了解一下？
当前时间:2019年10月24日.距离 JDK 14 发布时间(2020年3月17日)还有多少天? // 距离JDK 14 发布还有多少天? LocalDate jdk14 = LocalDate.o ...
- opencv::积分图计算
利用积分图像,可以计算在某象素的上-右方的或者旋转的矩形区域中进行求和.求均值以及标准方差的计算,并且保证运算的复杂度为O(). #include <opencv2/opencv.hpp> ...
- vue-cli3.0之vue.config.js的配置项（注解）
module.exports = {// 部署应用时的基本 URLbaseUrl: process.env.NODE_ENV === 'production' ? '192.168.60.110:80 ...
- 中国大学MOOC-数据结构与算法实战 P6 括号匹配 (15 分)
检查一段C语言代码的小括号( ). 中括号 [ ] 和大括号{ } 是否匹配. 输入格式: 在一行中输入一段C语言代码,长度不超过1000个字符(行末以换行符结束). 输出格式: 第一行输出左括号的数 ...
- fenby C语言 P18
#include <stdio.h> int main(){ int i; for(i=1;i<=15;i++) { if((i%2==1)) { printf("%d\n ...