Vue.js（2.x）之插值
看了一些友邻写的文章，不少是基于1.0版本的，有些东西在2.x版本应该已经废除了（如属性插值、单次插值在2.x版本上运行根本不执行）。对于不理解的东东，找起资料来就更麻烦了。不得不老老实实线下测试并整理记录：
1.文本插值
官网文档的文字解释看的好没意思，不给栗子让人咋整：
v-once指令的用法应该与1.0版本的单次插值是一个意思。
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）之插值的更多相关文章
- Vue.js高效前端开发 • 【初识Vue.js】
全部章节 >>>> 文章目录 一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...
- vue.js学习笔记
有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- vue.js 第四课
(1).插值:在view层上显示model的资料. (2).绑定表达式:在view层上 执行js命令. (3).指令:在view层上 执行写好的功能. (4).缩写:v-bind 绑定 特性 v-on ...
- Vue.js：轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
- vue.js慢速入门（1）
0.MVVM 什么是MVVM?就是Model-View-ViewModel. ViewModel是Vue.js的核心,它是一个Vue实例. 不太懂也没关系,慢慢就懂了. 1.基础示例 代码: < ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- 【vue.js权威指南】读书笔记（第二章）
[第2章:数据绑定] 何为数据绑定?答曰:数据绑定就是将数据和视图相关联,当数据发生变化的时候,可以自动的来更新视图. 数据绑定的语法主要分为以下几个部分: 文本插值:文本插值可以说是最基本的形式了. ...
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
随机推荐
- @Deprecated使用技巧
本文转自 http://www.cnblogs.com/hzhuxin/p/4645070.html 我们在做项目时,前期写的类中的一些代码可能由于需求变化的原因需要重写,有时重写时方法的传参和返回值 ...
- Angular08 依赖注入
1 angular应用中依赖注入的工作原理 技巧01:在模块级别进行注册时所有在应用级别的组件都可以使用,因为主模块会导入其他模块,所以在模块中注入就相当于在主模块进行注入操作:懒加载的模块除外 技巧 ...
- 项目一:项目第二天 Jquery ztree使用展示菜单数据 2、 基础设置需求分析 3、 搭建项目框架环境--ssh（复习） 4、 SpringData-JPA持久层入门案例（重点） 5、 Easyui menubutton菜单按钮使用 6、 Easyui messager消息框使用
1. Jquery ztree使用展示菜单数据 2. 基础设置需求分析 3. 搭建项目框架环境--ssh(复习) 4. SpringData-JPA持久层入门案例(重点) 5. Easyui menu ...
- php学习笔记-可变变量
看一个例子. <?php $a = 'hello'; $hello = 'hi'; echo $$a; ?> 如果一个变量名前面有两个美元符号,那么这个变量就叫做可变变量.就拿上面这个举例 ...
- WHAT is CPU负载？
WHAT?? 1.CPU负载都有哪些? cpu负载的定义:在一般情况下可以将单核心cpu的负载看成是一条单行的桥,数字1代表cpu刚好能够处理过来,即桥上能够顺利通过所有的车辆,桥外没有等待的车辆,桥 ...
- 6.【应急响应】Linux入侵排查思路
0x01 入侵排查思路 一.账号安全 基本使用: 1.用户信息文件/etc/passwd root:x:0:0:root:/root:/bin/bash account:password:UID:GI ...
- 【本人译作推荐】Windows 8应用开发：C#和XAML卷（原名：Building Windows 8 Apps with C# and XAML）
[图书推荐] 译名:Windows 8应用开发:C#和XAML卷 原名:Building Windows 8 Apps with C# and XAML 编辑推荐 国内第一本使用XAML与C#语言 ...
- 洛谷P3380 【模板】二逼平衡树（树套树）（线段树+树状数组）
P3380 [模板]二逼平衡树(树套树) 题目描述 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作: 查询k在区间内的排名 查询区间内排名为k的值 修改某一位值上的数 ...
- 洛谷P1373 小a和uim之大逃离
P1373 小a和uim之大逃离 题目背景 小a和uim来到雨林中探险.突然一阵北风吹来,一片乌云从北部天边急涌过来,还伴着一道道闪电,一阵阵雷声.刹那间,狂风大作,乌云布满了天空,紧接着豆大的雨点从 ...
- Java学习笔记——Map接口
Map接口 Map接口 Map接口中键和值一一映射. 可以通过键来获取值. 异常 NoSuchElementException:访问的值不存在 ClassCastException:对象类型错误 Un ...