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 服务器,互联网公司更是如此.对于 ...
随机推荐
- SecureCRT连接虚拟机下的CentOS7
1.首先在VMWare下配置CentOS为桥接模式: 2.查看本机ip: 3.ip addr查看centos的mac地址: 4.在root权限下修改/etc/sysconfig/network-scr ...
- 使用ipython %matplotlib inline
首先讲讲这句话的作用,matplotlib是最著名的Python图表绘制扩展库,它支持输出多种格式的图形图像,并且可以使用多种GUI界面库交互式地显示图表.使用%matplotlib命令可以将matp ...
- django自带cache结合redis创建永久缓存
0916自我总结 django自带cache结合redis创建永久缓存 1.redis库 1.安装redis与可视化操作工具 1.安装redis https://www.runoob.com/redi ...
- Java编程思想——第17章 容器深入研究 读书笔记（四）
九.散列与散列码 HashMap使用equals()判断当前的键是否与表中存在的键相同. 正确的equals()方法需满足一下条件: 1)自反性.x.equals(x) 是true; 2)对称性.x. ...
- 1.Linux-CentOS7.6安装教程
了解Linux Linux 就是一个操作系统,主要为企业提供支持与服务. 学习Linux需要具备什么基础?能看懂中文,能看懂简单的 English 1.什么是Linux? Linux:和我们常见的 ...
- Spring Boot项目如何同时支持HTTP和HTTPS协议
如今,企业级应用程序的常见场景是同时支持HTTP和HTTPS两种协议,这篇文章考虑如何让Spring Boot应用程序同时支持HTTP和HTTPS两种协议. 准备 为了使用HTTPS连接器,需要生成一 ...
- leetcode 刷500道题，笔试/面试稳过吗？谈一谈这些年来算法的学习
想要学习算法.应付笔试或者应付面试手撕算法题,相信大部分人都会去刷 Leetcode,有读者问?如果我在 leetcode 坚持刷它个 500 道题,以后笔试/面试稳吗? 这里我说下我的个人看法,我认 ...
- [案例分析] 政务云市场面临的复杂格局——重庆政务云模式的启示：多厂商竞争化、PaaS 化
新闻背景: 2019 年 9 月底,重庆市大数据应用发展管理局发布政务云平台采购公告,预算金额为 5000 万元,以上 4 家入选. 最终项目被项目被阿里云.腾讯云.华为云.紫光云 4 家瓜分. 50 ...
- Qualcomm-Atheros-QCA9377-Wifi-Linux驱动
资源来自:https://download.csdn.net/download/ichdy/10331646 已经下载好了,发现无法使用,本人系统Centos7.2,如果有安装成功,并且可以正常使用的 ...
- 百万年薪python之路 -- 软件的开发规范
一. 软件的开发规范 什么是开发规范?为什么要有开发规范呢? 你现在包括之前写的一些程序,所谓的'项目',都是在一个py文件下完成的,代码量撑死也就几百行,你认为没问题,挺好.但是真正的后端开发的项目 ...