写在前面的话：

文章是个人学习过程中的总结，为方便以后回头在学习。

文章中会参考官方文档和其他的一些文章，示例均为亲自编写和实践，若有写的不对的地方欢迎大家和我一起交流。

VUE基础系列目录

《VUE基础系列（一）——VUE入坑第一篇》

《VUE基础系列（二）——VUE中的methods属性》

《VUE基础系列（三）——VUE模板中的数据绑定语法》

《VUE基础系列（四）——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模板中的数据绑定语法的更多相关文章

  1. Vue基础系列（二）——Vue中的methods属性

      写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...

  2. Vue基础系列（四）——Vue中的指令（上）

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  3. Vue基础系列（五）——Vue中的指令（中）

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  4. Vue基础以及指令, Vue组件

    Vue基础篇一 Vue指令 Vue的指令directive很像我们所说的自定义属性,指令时Vue模板中最常用的功能,它带有v-前缀,功能是当表达式改变的时候,相应的行为作用在DOM上. <div ...

  5. 【C++自我精讲】基础系列三 重载

    [C++自我精讲]基础系列三 重载 0 前言 分二部分:函数重载,操作符重载. 1 函数重载 函数重载:指在同一名字空间中,函数名称相同,参数类型.顺序或数量不同的一类函数,同一函数名的函数能完成不同 ...

  6. C# 互操作性入门系列(三)：平台调用中的数据封送处理

    好文章搬用工模式启动ing ..... { 文章中已经包含了原文链接 就不再次粘贴了 言明 改文章是一个系列,但只收录了2篇,原因是 够用了 } --------------------------- ...

  7. [转]C# 互操作性入门系列(三)：平台调用中的数据封送处理

    参考网址:https://www.cnblogs.com/FongLuo/p/4512738.html C#互操作系列文章: C# 互操作性入门系列(一):C#中互操作性介绍 C# 互操作性入门系列( ...

  8. ThinkPHP 3.1.2 模板中的基本语法<1>

    # # ThinkPHP 3.1.2 模板中的基本语法 一.传统的方式,导入CSS和JS文件 1.css link js scr <link rel='stylesheet' type='tex ...

  9. Vue基础（三）---- 组件化开发

    基本结构: ◆1.组件化开发思想 ◆2.组件注册 ◆3.Vue调试工具用法 ◆4.组件间数据交互 ◆5.组件插槽 ◆6.基于组件的案例   ◆1.组件化开发思想 优点: 提高开发效率 方便重复使用 简 ...

随机推荐

  1. 机器学习中梯度下降法原理及用其解决线性回归问题的C语言实现

    本文讲梯度下降(Gradient Descent)前先看看利用梯度下降法进行监督学习(例如分类.回归等)的一般步骤: 1, 定义损失函数(Loss Function) 2, 信息流forward pr ...

  2. numpy.rollaxis函数

    numpy.rollaxis numpy.rollaxis 函数向后滚动特定的轴到一个特定位置,格式如下: numpy.rollaxis(arr, axis, start) 参数说明: arr:数组 ...

  3. linux 防火墙基本使用

    写在最前面 由于工作后,使用的Linux就是centos7 所以,本文记录是是centos7的防火墙使用. 从 centos7 开始,系统使用 firewall 进行防火墙的默认管理工具. 基本使用 ...

  4. 基于STM32F1与NRF24L01模块的SPI简单通信

    一.前言 1.简介: 本文是基于STM32F1,将数据发送至NRF模块的寄存器,并将数据重新读取,通过串口发送出来的简单SPI单通信. 2.SPI简介: 调过STM8的都已经对SPI有所了解,调法都一 ...

  5. Centos7升级Git版本

    centos 升级 Git 版本 问题描述 centos7 系统默认的 git 安装版本是 1.8,但是在项目构建中发现 git 版本过低,于是用源码编译的方式进行升级.同时该文章也适用于安装新的 g ...

  6. Ubuntu和开发板用网线直连ping不通的问题

    我装的Ubuntu 18.04双系统,在通过网络加载内核和文件系统那一步一直连接不上,uboot里面ping我的主机IP地址,提示: ping failed; host 192.168.1.111 i ...

  7. 渗透测试-基于白名单执行payload--Cmstp

    0x01 Cmstp简介 Cmstp安装或删除“连接管理器”服务配置文件.如果不含可选参数的情况下使用,则 cmstp 会使用对应于操作系统和用户的权限的默认设置来安装服务配置文件. 微软官方文档: ...

  8. Fibonacci 数列和 Lucas 数列的性质、推论及其证明

    Fibonacci 数列 设f(x)=1,x∈{1,2}=f(x−1)+f(x−2),x∈[3,∞)\begin{aligned}f(x)&=1,\quad\quad\quad\quad\qu ...

  9. 网络IO的虚拟化模型小结

    网络IO的虚拟化模型随着技术发展,出现了多种方式,例如emulation.para-virtualization.pass-through和SR-IOV等,本文试图对其做一个简单的总结. Emulat ...

  10. Ubuntu 19.10 发布 | 云原生生态周报 Vol. 24

    作者 | 木苏.进超.冬岛.元毅.心水.衷源 业界要闻 1.云原生编程语言 Pulumi 1.0 pulumi ,一款中立的开源云开发平台,Pulumi 支持多语言.混合云环境.完全可扩展.初期支持 ...