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 服务器,互联网公司更是如此.对于 ...
随机推荐
- linux 防火墙基本使用
写在最前面 由于工作后,使用的Linux就是centos7 所以,本文记录是是centos7的防火墙使用. 从 centos7 开始,系统使用 firewall 进行防火墙的默认管理工具. 基本使用 ...
- 算法学习之剑指offer（五）
题目1 题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. public class Solution ...
- VMware ESXI6.0服务器安装系列：RAID设置
本文转载至http://www.scriptjc.com/article/847 1.连接显示器 2.插上键盘.U盘.显示器 3.看显示屏上的提示,按F12关机 4.关机前输入密码,然后按回车键 更换 ...
- 大型php网站性能和并发访问优化方案
网站性能优化对于大型网站来说非常重要,一个网站的访问打开速度影响着用户体验度,网站访问速度慢会造成高跳出率,小网站很好解决,那对于大型网站由于栏目多,图片和图像都比较庞大,那该怎么进行整体性能优化呢? ...
- python requests自动化框架
一.项目结构 1.新建一个工程(一定要创建工程),工程名称自己定义,如:yoyo_jiekou 2.在工程的跟目录新建一个脚本:run_main.py,用来执行全部用例 3.在工程下创建以下几个pak ...
- Ubuntu Qt5.13 无法输入中文和中文显示乱码问题
无法输入中文: sudo apt-get install libfcitx-qt5-dev cd /usr/lib/x86_64-linux-gnu/qt5/plugins/platforminput ...
- Web前端助手-功能丰富的Chrome插件
整合优秀的前端实用工具.免费,可配置的强大工具集 示例 安装 github仓库: https://github.com/zxlie/FeHelper 官网地址:https://www.baidufe. ...
- 你真的了解 volatile 关键字吗？
今天,让我们一起来探讨 Java 并发编程中的知识点:volatile 关键字 本文主要从以下三点讲解 volatile 关键字: volatile 关键字是什么? volatile 关键字能解决什么 ...
- 日天老师的django相关博客
Yuan先生的博客网址 1 Web应用 https://www.cnblogs.com/yuanchenqi/articles/8869302.html 2 http协议 https://www.cn ...
- HashMap - 类注释
了解到Java8以后HashMap的实现换了,也看了很多博客一直在向我这个小菜鸡说HashMap的重要.因此我决定洗心革面,好好正视HashMap 基于jdk 8 先从类注释开始入手学习,顺便提高提高 ...