摘要: 13组件基础 13.1基本示例 Vue 组件的示例: // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<butt 阅读全文
posted @ 2019-08-17 14:02 大强的博客 阅读(157) 评论(0) 推荐(0) 编辑
摘要: 12表单输入绑定 12.1基础用法 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 文本 <input v-model="message" placeholder="edit m 阅读全文
posted @ 2019-08-17 14:02 大强的博客 阅读(122) 评论(0) 推荐(0) 编辑
摘要: 11事件处理 11.1监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。 示例: <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button 阅读全文
posted @ 2019-08-17 14:01 大强的博客 阅读(181) 评论(0) 推荐(0) 编辑
摘要: 9条件渲染 9.1 v-if v-if 指令用于条件性地渲染一块内容。 <h1 v-if="awesome">Vue is awesome!</h1> 在 <template> 元素上使用 v-if 条件渲染分组 <template v-if="ok"> <h1>Title</h1> <p>Para 阅读全文
posted @ 2019-08-17 14:00 大强的博客 阅读(205) 评论(0) 推荐(0) 编辑
摘要: 10列表渲染 10.1用 v-for 把数组对应为元素 <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> var example1 = new Vue({ el: '#example-1', d 阅读全文
posted @ 2019-08-17 14:00 大强的博客 阅读(177) 评论(0) 推荐(0) 编辑
摘要: 8 Class与Style绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。 8.1绑定HTML Class 对象语法 我们可以传给 v-bind:class 一个对象,以动态地切换 class: <div v-bind:class="{ active: isActive }"> 阅读全文
posted @ 2019-08-17 13:59 大强的博客 阅读(167) 评论(0) 推荐(0) 编辑
摘要: 7计算属性和侦听器 7.1计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。 在模板中放入太多的逻辑会让模板过重且难以维护。 所以,对于任何复杂逻辑,你都应当使用计算属性。 基础例子 <div id="example"> <p>Original message: "{{ mess 阅读全文
posted @ 2019-08-17 13:56 大强的博客 阅读(157) 评论(0) 推荐(0) 编辑
摘要: Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 6.1插值 var obj = { msg: 'Hello Vue.js', rawHtml: '<span style="color: red">This should be red.< 阅读全文
posted @ 2019-08-17 13:55 大强的博客 阅读(288) 评论(0) 推荐(0) 编辑
摘要: 5 Vue实例 5.1创建一个 Vue 实例 创建 Vue 实例: var vm = new Vue({ // ... }) 5.2数据与方法 // 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ data: d 阅读全文
posted @ 2019-08-17 13:54 大强的博客 阅读(189) 评论(0) 推荐(0) 编辑
摘要: 4安装 4.1 Vue Devtools 在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools。 4.2直接引入 直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。 4.3 NPM 在用 Vue 构建大型应用时推荐使用 NPM 安装。 # 最新稳定版 $ 阅读全文
posted @ 2019-08-17 13:53 大强的博客 阅读(229) 评论(0) 推荐(0) 编辑