Vue.js（2.x）之插值

看了一些友邻写的文章，不少是基于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>

View Code

代码与页面效果对照着看：使用 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表达式进行插值时只能使用单个有效的表达式才能生效。

转载于:https://www.cnblogs.com/anns/p/7375207.html

Vue.js（2.x）之插值相关推荐

Prettier 1.15代码格式化工具新增Angular和Vue.js支持
Prettier 1.15代码格式化工具新增HTML.Vue.js.Angular.MDX支持以及多项语法优化和改进. 对于Angular和Vue,Prettier现在可以格式化这些扩展HTML的框架 ...
Vue.js高效前端开发 • 【初识Vue.js】
全部章节 >>>> 文章目录一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...
（6）vue.js基础语法—插值表达式
一.vscode插件介绍在我们演示插值表达式之前,我们先安装这一个VScode给我们提供的插件,它可以将我们书写好的网页通过服务端口的方式进行访问,同时它的好处还有:再修改代码后,不需要我们手动点击 ...
vue.js 第四课
(1).插值:在view层上显示model的资料. (2).绑定表达式:在view层上执行js命令. (3).指令:在view层上执行写好的功能. (4).缩写:v-bind 绑定特性 v-on ...
Vue.js用法详解（一）更新中~
前言前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: Vue.js ...
构建你的第一个Vue.js组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易.这些文档不仅结构合理,详尽无遗,而且用户友好.多年以后,这正是我在Vue.js中感受到的.然而,与Cake相比,Vue文档仍然缺少一件事 ...
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
【Vue.js 牛刀小试】：第九章 - 组件基础再探（data、props）
系列目录地址一.基础知识概览第一章 - 一些基础概念(posted at 2018-10-31) 第二章 - 常见的指令的使用(posted at 2018-11-01) 第三章 - 事件修饰符的 ...
Vue.js 学习笔记第5章内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车回顾一下第2.2节,我们己经介绍过指令(Di ...

Vue.js（2.x）之插值

Vue.js（2.x）之插值相关推荐

最新文章

热门文章