看了一些友邻写的文章，不少是基于1.0版本的，有些东西在2.x版本应该已经废除了（如属性插值、单次插值在2.x版本上运行根本不执行）。对于不理解的东东，找起资料来就更麻烦了。不得不老老实实线下测试并整理记录：

1.文本插值
官网文档的文字解释看的好没意思，不给栗子让人咋整：

v-once指令的用法应该与1.0版本的单次插值是一个意思。

完整示例如下图所示，Vue下的data中message里的内容只会被当做文本输出到页面，即使这样写也同样会直接输出，并不会被当作HTML标签解析：message: '<b>Hello Vue.js!</b>'，页面输出就是：<b>Hello Vue.js!</b>。

2.纯 HTML
官网文档注释如下，看完一头雾水。照例找了个栗子出来看了看：

栗子代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

    <div v-html="message"></div>

    <div v-html="login"></div>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    message: '<h1>菜鸟教程</h1>',

    login: '<input type="button" value="登录" >'

  }

})

</script>

</body>

</html>

代码与页面效果对照着看：使用 v-html 指令用于输出 html 代码：直接在需要操作的元素上添加v-html属性，属性值为Vue数据data中定义的属性名。

再看下页面是怎么解析的，如下图：

到这里，使用Vue.js向HTML页面中插入HTML元素算是理解了。

3.属性

经过前面两个的理解，偶知道了使用Vue.js操作HTML元素的属性需要使用v-bind指令；但是不明白v-bind咋使用的，也不明白后面那句“这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除”。照例找栗子看代码：

查看栗子并测试后发现，v-bind指令可以用来设置元素的属性是否显示及显示后的属性值，以下图为例：

1）、如果data下的class1属性值设置为0或false，则div的class没有属性值，即为空；

2）、如果data下的class1属性值设置为1或true，则div的class值为class1；

3）、v-bind:class="{'类名class1':data中的class1}"，这么设置元素的class是没问题的，可是改成其他的就不行，比如加一个设置id的，解析后代码却是这样的：

为毛class值正常，id值却显示的是[object Object]?（先留着明天再试试看：今天有小伙伴提醒看看关于JSON.stringify的知识。看到后面疑团解开了，如下面第二张图所示）


4.使用 JavaScript 表达式

还是先看一遍官网文档，依然需要栗子：

使用js表达式的插值方式如下图所示：

运行后页面显示：4 10 2；OK，这里疑问不大，到这里算是明白了：使用JavaScript表达式进行插值时只能使用单个有效的表达式才能生效。

Vue.js（2.x）之插值的更多相关文章

  1. Vue.js高效前端开发 • 【初识Vue.js】

    全部章节 >>>> 文章目录 一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...

  2. vue.js学习笔记

    有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...

  3. Vue.js——60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  4. vue.js 第四课

    (1).插值:在view层上显示model的资料. (2).绑定表达式:在view层上 执行js命令. (3).指令:在view层上 执行写好的功能. (4).缩写:v-bind 绑定 特性 v-on ...

  5. Vue.js：轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  6. vue.js慢速入门（1）

    0.MVVM 什么是MVVM?就是Model-View-ViewModel. ViewModel是Vue.js的核心,它是一个Vue实例. 不太懂也没关系,慢慢就懂了. 1.基础示例 代码: < ...

  7. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  8. 【vue.js权威指南】读书笔记（第二章）

    [第2章:数据绑定] 何为数据绑定?答曰:数据绑定就是将数据和视图相关联,当数据发生变化的时候,可以自动的来更新视图. 数据绑定的语法主要分为以下几个部分: 文本插值:文本插值可以说是最基本的形式了. ...

  9. Vue.js——60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

随机推荐

  1. 任务调度TimerTask&Quartz的 Java 实现方法与比较

    文章引自--https://www.ibm.com/developerworks/cn/java/j-lo-taskschedule/ 前言 任务调度是指基于给定时间点,给定时间间隔或者给定执行次数自 ...

  2. C++中的友元小结

    我们知道,在一个类总可以有公有的(public)成员和私有的(private)成员.在类外可以访问公用成员,只有本类中的函数可以访问本类的私有成员. 现在,我们学习一种新的情况--友元. 在C++中, ...

  3. 5、预测和鉴定miRNA的靶基因

    转载:http://www.oebiotech.com/Article/mirnabjyyc.html http://www.ebiotrade.com/newsf/2014-9/2014925941 ...

  4. 各版本Google浏览器下载地址

    各版本谷歌浏览器下载地址 https://www.chromedownloads.net/chrome64win/

  5. 6.5 系统打开缓慢，怎么办？---更新Ubuntu系统

    早早的来公司打开电脑,希望看到Ubuntu能启动成功.可是,当我重启后,使用Ubuntu系统,打开界面速度非常慢,当时,又怀疑自己安装出错了.而且,6.2日Ubuntu系统的工作日志又没了.无奈,我把 ...

  6. es6基础系列五--数组的拓展

    Array.from() 用于将两类对象转为真正的数组,类似数组对象和可遍历对象(包括数据结构Set和Map)转化为数组 格式:Array.from(arrayLike[, mapFn[, thisA ...

  7. sql server 2008 r2安装

    选择功能(好像报错了-下次重装系统测试)

  8. CAS客户端整合（四）-- Cacti

    Cacti 是一套纯 lnmp 搭建的服务器监控系统,用 SNMP 抓取数据,RRDTool 绘制表格 登录流程 Cacti 的登录同样是先判断session,再尝试从 cookie 读取 sessi ...

  9. C#中参数值传递和址传递

    概论 我认为的形参和实参是这样的,形参是形式上的参量,和"抽象类"的概念差不多,不是实际存在的.不用的时候不占用内存,被调用的时候分配内存,调用结束,释放内存.类似于"抽 ...

  10. linux线程私有数据---TSD池

    进程内的所有线程共享进程的数据空间,所以全局变量为所有线程共有.在某些场景下,线程需要保存自己的私有数据,这时可以创建线程私有数据(Thread-specific Data)TSD来解决.在线程内部, ...