js 点击button切换颜色_Vue.js从零开始——入门（2）

最新推荐文章于 2022-08-19 15:13:55 发布

weixin_39965102

最新推荐文章于 2022-08-19 15:13:55 发布

阅读量558

点赞数

文章标签： js 点击button切换颜色 js 点击选择前和选择后的数据对比 js 隐藏div js三元表达式 js修改id的值 js可以两个标签一起bind吗

前一个章节做了简单的介绍、示例和安装方式的演示，接下来我们就可以来看看 Vue 的基础使用了，这里参考了官网介绍 — Vue.js，并且直接使用了官网的名词和解释，当然还有些自己的理解。

1 模板语法

Vue 的最基础实现就是模板语法，也就是使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

简单的说法，Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，比如前一章节的例子：

<!DOCTYPE html>

上面的代码，其实看起来就像是在渲染字符串模板，不过数据和 DOM 已经被建立了关联，所有东西都是响应式的，可以通过在页面上打开开发者工具，并在控制台直接修改 app.message 就可以看到实时变化的结果：

一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

1.1 文本插值

上面的例子当中，我们可以详细的解释一下，Vue 的标准语法。

首先是在 HTML 当中，需要有一个可供 Vue 进行交互的容器，为其命名，比如 id 或者 class 都可以，不过这里要注意的是，因为 id 具有唯一性，所以是个更好定位或者说更符合要求的命名方式：

其次，在容器内部需要插入文本的子容器内，放入文本数据绑定的关键字 {{ 属性名 }}，官方称其为“Mustache”语法：

Mustache 标签将会被替代为对应数据对象上 message 属性的值。无论何时，绑定的数据对象上 message 属性发生了改变，插值处的内容都会更新。

通过使用 v-once 指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

之后就到了真正的 Vue 代码部分，首先要新建一个 Vue 实例：

let

上面的代码很简单，不过这里需要注意的一点是，即便不声明变量，直接使用 new Vue({ }); 也是允许的，不过并不推荐，除非是做演示，毕竟没有合适的变量名来引用实例，对于开发来说是不可取的。

然后通过在 el 属性内指定选择器，来指定需要绑定的 DOM 元素：

let

这里其实就是 CSS 基础选择器，也就是说支持通过 #id 选择 id，通过 .class 选择 class，不过因为 id 具有唯一性，所以我也更倾向使用 id选择器。

最后通过 data 为属性赋值，这里我们需要使用之前已经在 Mustache 中定义的属性名，这里是 message：

let

一个完整的文本插值就是这样的，非常简单，大家可以随意地尝试一下。

1.2 HTML 插值

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，我们需要使用 f="https://cn.vuejs.org/v2/api/#v-html">v-html指令，把上面的例子修改一下：

<!DOCTYPE html>

可以看到，上面的代码在渲染后生成了 HTML 标签以及内容。不过这里再提醒一下，直接渲染 HTML 对站点安全是个威胁，容易导致 XSS攻击，所以请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用该插值方法。

1.3 属性插值

同上一节的原理，Mustache 语法不能作用在 HTML 属性上，遇到这种情况应该使用v-bind指令，还用上面的例子来修改：

<!DOCTYPE html>

原始页面

点击按钮后

上面的代码将 <p> 元素的 class 指定为一个 JavaScript 对象表达式，当 use 的值为 false 时，class 为空，而 use 为 true 时，class 被设置为 color；因为前面使用 CSS 指定了 .color 的颜色，所以点击按钮可以改变 <p> 元素的颜色和背景。

对于布尔值属性 (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 属性甚至不会被包含在渲染出来的 <button> 元素中。

1.4 JavaScript表达式插值

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持，举例如下：

实际应用的例子：

<!DOCTYPE html>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效：

<!-- 这是赋值语句，不是表达式 -->
{{ var a = 1 }}

2 指令

指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式(v-for是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM，譬如下面的例子：

<!DOCTYPE html>

v-if 指令就是用来做条件判断的，当给出的属性为 true 时，满足条件，元素显示；为 false 时不满足，元素隐藏。

2.1 参数

一些指令能够接收一个参数，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个比如前面例子中的 v-on 指令，相当于原生 JavaScript 的监听器，这里 click 就是参数，一旦按钮发生点击事件，就会调用 changeColor 函数。

2.2 动态参数

从 Vue 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性，其值为 "href"，那么这个绑定将等价于 v-bind:href。

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

（1）对动态参数的值的约束

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

（2）对动态参数表达式的约束

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML 属性名里是无效的。例如：

<!-- 这会触发一个编译警告 -->

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把属性名全部强制转为小写：

<!--

2.3 修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

3 缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的属性。当我们在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

3.1 v-bind 缩写

<!-- 完整语法 -->

3.2 v-on 缩写

<!-- 完整语法 -->

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于属性名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，不过因为真的非常好用，所以这样写会更顺畅——不是这一次重新学习，我差一点忘记 v-bind 这个指令了，惭愧一下。

章节的最后，我夹带一点私货：

由于 Vue.js 绝大部分内容都是声明式渲染，所以我曾经在原生 JavaScript 部分当中强调过的一定要使用 ; 结尾在 Vue 项目当中经常都是消失的，举个例子，下面是通过 Vue Cli 生成的项目内容（main.js），可以看到使用分号结尾是不存在的：

import

讲句公道话，这个完全要看开发者或团队的习惯，所以我也知道在很多大型项目里面是完全没有使用过分号的，可以说这些人是把 ASI（Automatic semicolon insertion）研究的很透彻（比如 NPM、Vue.js的开发者/团队），而作为使用者，我的建议是原生 JavaScript 是必须使用分号的，而虽然 Vue.js 的开发过程，可以完全不用分号，但是为了保证语义的完整和准确（也就是很多人所说的代码可读性），还是要使用的。

当然这个就见仁见智了，我也不会上升到什么理论高度去评价，这就单纯是个人建议，毕竟每个人都是独立的个体，有自己的思想和考虑。

weixin_39965102

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 点击button切换颜色_Vue.js从零开始——入门（2）

前一个章节做了简单的介绍、示例和安装方式的演示，接下来我们就可以来看看 Vue 的基础使用了，这里参考了官网介绍 — Vue.js，并且直接使用了官网的名词和解释，当然还有些自己的理解。1 模板语法Vue 的最基础实现就是模板语法，也就是使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的...
复制链接

扫一扫