Vue.js前端开发实例｜双大括号实现文本插值

Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计，非常容易与其他库或已有项目整合，在与相关工具和支持库一起使用时，能完美地驱动复杂的单页应用word大括号 。

本系列所有Vue.js代码基于Vue.js 2.6.11，在IntelliJ IDEA 2019.2.3环境编写完成，在最新版的“搜狗高速浏览器”和“Google Chrome浏览器”测试成功word大括号 。所有源代码不需要下载Vue.js的其他文件，在测试或使用时保持网络畅通即可。

下面这个实例演示了使用双大括号实现文本插值word大括号 。

01

实例功能

此实例主要通过使用双大括号｛｛Vue实例的成员或表达式｝｝，实现以文本插值方式输出Vue实例的成员属性值或方法返回值的效果word大括号 。当在浏览器中显示页面时，由于已经对Vue实例的成员进行了单向绑定，因此，在每次刷新页面时总是显示不同的日期，效果分别如图1和图2所示。

■ 图1

■ 图2

02

实现代码

在上面这段代码中，var vm=new Vue ({...})用于实例化自定义Vue，每个自定义Vue必须实例化，然后才能在HTML代码中以<div id="myVue">的形式使用，也可以这样理解：<div id="myVue"></div>标签里面包含的所有DOM元素都被实例化成了一个Java对象，因此<h4>{{myData}}:{{myMethods}}</h4>必须在<div id="myVue"></div>标签中，双大括号才能发挥单向数据绑定的作用，否则它就是普通的字符串word大括号 。由于Vue.js框架的数据流向默认是单向的，因此，在数据绑定后的数据流向是从Vue实例到DOM文档。双大括号的语法也叫作mustache语法，在大括号中的文本(myData和myMethods)都是作为可变数据形式出现的；AngularJS和微信小程序都是如此，但是需要注意的是，在Vue.js中大括号不能随便使用，否则可能导致语法错误。

双大括号除了输出单向绑定的数据之外，还有一个重要的功能就是计算表达式的值，如<span> 3+5={{3 + 5}}</span>，结果为3+5=8word大括号 。

Vue.js(库)文件有多种安装方式word大括号 ，最简单的方式就是从Vue.js官网直接下载vue.min.js并用<> 标签导入，可以直接使用下列网站的文件：

或

或(自动识别最新稳定版本的Vue.js)

此实例的源文件是MyCode＼ChapD＼ChapD001.htmlword大括号 。

03

源代码下载

关注微信公众号，后台回复关键词 “ Vue.js代码165” 即可获得完整源代码word大括号 。

* 在测试代码时，必须保持网络畅通word大括号 。

04

参考图书

《Bootstrap+Vue.js前端开发超实用代码集锦》

ISBN：978-7-302-56815-5

罗帅 罗斌 编著

定价：99.8元

扫码优惠购书