Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话：
文章是个人学习过程中的总结，为方便以后回头在学习。
文章中会参考官方文档和其他的一些文章，示例均为亲自编写和实践，若有写的不对的地方欢迎大家和我一起交流。
VUE基础系列目录
一.前言
前面《VUE基础系列（一）——VUE入坑第一篇》中我们讲过使用vue双花括号插值法将data中的数据绑定到模板中（这个实际上可以叫做文本方式的数据绑定）。这篇文章中我们将总结一下vue中其他形式的数据绑定语法。在这篇总结中会有一些vue指令的知识点，可以结合下一篇文章《VUE基础系列（四）——VUE中的指令（上）》一起看。
二.文本
文本的数据绑定方式前面已经介绍过，这里直接写一个示例做说明。
#示例代码
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue模板中的数据绑定语法</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>{{msg}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data:{
msg:'我是一段包含html片段的字符<span>hello</span>'
}
});
</script>
</body>
</html>
#界面效果
三.原生html
上面的文本数据绑定，当文本中包含html片段时，html片段已字符串的形式原封不动的展示到了模板中。不会将文本中的html片段解析出来。而vue的v-html指令，就可以将html片段进行解析。
#基本语法
<tag v-html='data中的属性'></tag>
#示例
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue模板中的数据绑定语法</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1 v-html='msg'></h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data:{
msg:'我是一段包含html片段的字符<span>hello</span>',
}
});
</script>
</body>
</html>
#界面效果
可以看到模板中<h1 v-html='msg'></h1> 这种写法，vue会将msg中的html字符解析成DOM节点，并且将msg解析后完整的内容插入到h1元素中。
备注：
1.当我们改变msg的值后，v-html绑定的值在模板中也会同步更新。
2.可以在构造函数外部加入下面的js代码去验证，两秒后页面上原本的内容会变成"我是新的msg"。
setTimeout(function(){
vm.$data.msg = '我是新的msg';
},2000);
四.将数据绑定到元素的属性上
将数据绑定到元素的属性上也是需要结合vue的v-bind指令才能实现。
#基本语法
<tag v-bind:属性名='data中的属性'></tag>
#示例
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue模板中的数据绑定语法</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- v-bind -->
<div id="box">
<span v-bind:id='desc'>我是一段文字</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data: {
desc:'text'
}
})
</script>
</body>
</html>
#界面效果
可以看到，data中desc的值已经成功的设置为<span>元素的id属性上。
备注：
1.当我们改变desc的值后，v-bind绑定的值在模板中也会同步更新。
2.可以在构造函数外部加入下面的js代码去验证，两秒后查看span元素的id会变成new-text。
setTimeout(function(){
vm.$data.desc = 'new-text';
},2000);
五.总结
1.使用双花括号可以将数据以文本的形式绑定到模板中。数据更新模板同步更新
2.使用v-html指令绑定数据时，可以将数据中的html片段解析为DOM节点。同样数据更新，模板同步更新。
3.使用v-bind可以将数据绑到元素的属性上。同样数据更新，模板同步更新。
Vue基础系列（三）——Vue模板中的数据绑定语法的更多相关文章
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- Vue基础系列（四）——Vue中的指令（上）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列（五）——Vue中的指令（中）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础以及指令, Vue组件
Vue基础篇一 Vue指令 Vue的指令directive很像我们所说的自定义属性,指令时Vue模板中最常用的功能,它带有v-前缀,功能是当表达式改变的时候,相应的行为作用在DOM上. <div ...
- 【C++自我精讲】基础系列三 重载
[C++自我精讲]基础系列三 重载 0 前言 分二部分:函数重载,操作符重载. 1 函数重载 函数重载:指在同一名字空间中,函数名称相同,参数类型.顺序或数量不同的一类函数,同一函数名的函数能完成不同 ...
- C# 互操作性入门系列(三)：平台调用中的数据封送处理
好文章搬用工模式启动ing ..... { 文章中已经包含了原文链接 就不再次粘贴了 言明 改文章是一个系列,但只收录了2篇,原因是 够用了 } --------------------------- ...
- [转]C# 互操作性入门系列(三)：平台调用中的数据封送处理
参考网址:https://www.cnblogs.com/FongLuo/p/4512738.html C#互操作系列文章: C# 互操作性入门系列(一):C#中互操作性介绍 C# 互操作性入门系列( ...
- ThinkPHP 3.1.2 模板中的基本语法<1>
# # ThinkPHP 3.1.2 模板中的基本语法 一.传统的方式,导入CSS和JS文件 1.css link js scr <link rel='stylesheet' type='tex ...
- Vue基础（三）---- 组件化开发
基本结构: ◆1.组件化开发思想 ◆2.组件注册 ◆3.Vue调试工具用法 ◆4.组件间数据交互 ◆5.组件插槽 ◆6.基于组件的案例 ◆1.组件化开发思想 优点: 提高开发效率 方便重复使用 简 ...
随机推荐
- LeetCode_20-Valid Parentheses
给定一个字符串,其中包含字符’(’,’)’,’[’,’]’,’{‘,’}’,左括号必须匹配右括号,一对匹配的括号不能单独出现单个左括号或者右括号.如:(()[])有效,[(])无效空字符串也算是有效的 ...
- 区间 GCD
区间 GCD题目描述最近 JC 同学刚学会 gcd,于是迷上了与 gcd 有关的问题.今天他又出了一道这样的题目,想要考考你,你能顺利完成吗?给定一个长度为 n 的字符串 s[1..n],串仅包含小写 ...
- Django中CKEditor富文本编译器的使用
CKEditor富文本编辑器 1. 安装 pip install django-ckeditor 2. 添加应用 在INSTALLED_APPS中添加 INSTALLED_APPS = [ ... ' ...
- Struts2:搭建原理
记录下,struts2的搭建过程: 1核心jar包: struts-2.1.8\apps\struts2-blank-2.1.8.war 解压后 在struts2-blank-2.1.8\WEB-IN ...
- KMP算法复习笔记
KMP 算法 KMP 算法是一种改进的字符串匹配算法,KMP 算法的关键是利用匹配失败后的信息,尽量减少模式串与主串的匹配次数以达到快速匹配的目的.具体实现就是实现一个next()函数,函数本身包含了 ...
- 解决连接oracle报错 尝试加载Oracle客户端库时引发BadImageFomatException。如果在安装64位Oracle客户端组件的情况下以32位模式运行，将出现此问题的报错。
最近遇到一个.NET连接Oracle的一个错误,其主要原因是换了一台电脑,在新电脑上运行以前的项目出现了的一个错误,工作环境为vs2017+Oracle 64位,win10系统 这个错误头疼了一天,找 ...
- HDFS概述（一）
HDFS概述(一) 1. HDFS产出的背景及定义 1.1 HDFS产生的背景 随着数据量越来越大,在一个操作系统存不下所有的数据,那么就分配到更多的操作系统管理的磁盘中,但是不方便管理和维护,迫切需 ...
- 使PC端网页宽度自适应手机屏幕大小
有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机端的屏幕宽度: 在html的<head>中增加一个meta标签: < ...
- Leetcode（10）正则表达式匹配
Leetcode(10)正则表达式匹配 [题目表述]: 给定一个字符串 (s) 和一个字符模式 (p).实现支持 '.' 和 '*' 的正则表达式匹配. '.' 匹配任意单个字符. '*' 匹配零个或 ...
- FBV与CBV
一.FBV FBV(function base views) 就是在视图里使用函数处理请求,也是我们最开始接触和使用的方式. urls.py urlpatterns = [ path('login/' ...