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 服务器,互联网公司更是如此.对于 ...
随机推荐
- 关于5G目前形式的浅谈
目前市面上已经有十几款5G手机已经上市了,但是到2019年底的覆盖率还是非常的低,所以很多换机的用户可以再等一等,2020应该是出来的都是5G手机,也都是支持双模的NA/NSA的两种组网模式,因为工信 ...
- Jenkins设置BUILD NUMBER初始值
由于服务器迁移,需要将之前的Jenkins构建项目一并迁移,为了区分构建编号,需要将所有项目的BUILDE NUMBER 初始值定义. 网上有一些资料是更新单个项目的,我们这项目几百个,所以只好自己研 ...
- Proving Equivalences UVA - 12167
题文:https://vjudge.net/problem/UVA-12167 题解: 很明显,先要缩点.然后画一下图就会发现是入度为0的点和出度为0的点取max. 代码: #include < ...
- SLAM中的卡方分布
视觉slam中相邻帧特征点匹配时,动辄上千个特征点,匹配错误的是难免的,而误匹配势必会对位姿精度以及建图精度造成影响,那么如何分辨哪些是误匹配的点对儿呢?如果已知两帧的的单应矩阵,假设单应矩阵是没有误 ...
- 使用Line Pos Info 和 Modern C++ 改进打印日志记录
使用Line Pos Info 和 Modern C++ 改进打印日志记录 使用跟踪值:不管自己是多么的精通,可能仍然使用调试的主要方法之一 printf , TRaCE, outputDebugSt ...
- [JZOJ5772]【NOIP2008模拟】今天你AK了吗？
Description AK:All kill“你为什么没背书?”“没有为什么,我就是没背书.”“……我去年买了个表,G—U—N!”头铁王InFleaKing把背书的时间都拿去列排列了......n= ...
- opencv::点多边形测试
点多边形测试 测试一个点是否在给定的多边形内部,边缘或者外部 double pointPolygonTest( InputArray contour, // 输入的轮廓 Point2f pt, // ...
- java源码解析
String深入解析 String具有不变性的原因: String被final修饰,它不可能被继承,也就是任何对String的操作方法,都不会被继承覆写 String中保存数据的是一个char数组的v ...
- selenium-显式等待与隐式等待(3)
示例代码: from selenium.webdriver.support.wait import WebDriverWait as WD def find_element(self, by, loc ...
- git clone下代码window与unix换行问题
项目中避免不了会写一些shell脚本,使用ln软连接到一个目录.当git clone到windows中,ln连接显示无比怪异(如../xx),打开.sh文件后(仅仅是打开了),git status会看 ...