![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue.js 2.x
文章平均质量分 51
「已注销」
这个作者很懒,什么都没留下…
展开
-
事件处理
监听事件可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。代码<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> var exa转载 2017-12-01 14:24:14 · 170 阅读 · 0 评论 -
安装
兼容性Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。Vue.js 支持所有兼容 ECMAScript 5 的浏览器。NPM在用 Vue.js 构建大型应用时推荐使用 NPM 安装,NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。命令行工具转载 2017-12-01 14:12:27 · 132 阅读 · 0 评论 -
Vue 实例
你只需要明白所有的 Vue 组件都是 Vue 实例,并且接受相同的选项对象即可 (一些根实例特有的选项除外)。数据与方法当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。代码// 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 v转载 2017-12-01 14:21:13 · 321 阅读 · 0 评论 -
模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,在应用状态改变时,Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。插值文本代码<span>转载 2017-12-01 14:21:47 · 1843 阅读 · 0 评论 -
介绍
Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。声明式渲染Vue.js 的核心是一个允许采用简洁的模板语法来声转载 2017-12-01 14:22:14 · 200 阅读 · 0 评论 -
计算属性和观察者
计算属性在模板中放入太多的逻辑会让模板过重且难以维护。代码<div id="example"> {{ message.split('').reverse().join('') }} </div> 你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。 所以,对于任何复杂逻辑,你转载 2017-12-01 14:22:42 · 156 阅读 · 0 评论 -
Class 与 Style 绑定
将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。绑定 HTML Class对象语法代码<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> 上面的语法表示 active 这个转载 2017-12-01 14:23:07 · 203 阅读 · 0 评论 -
条件渲染
v-if代码<h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> 因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个 元素(自定义组件)当做不可见的包裹元素,并在上面使用 v-if。v-else-if代码<div v-if="type === 'A'"> A </div> <div v-else-if转载 2017-12-01 14:23:29 · 165 阅读 · 0 评论 -
列表渲染
用 v-for 把一个数组对应为一组元素代码<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> var example1 = new Vue({ el: '#example-1', data: { items: [ { message:转载 2017-12-01 14:23:53 · 209 阅读 · 0 评论