随笔分类 - VUE
1
摘要：一、先看下面的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></scr
阅读全文
摘要：你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。 一、文本 <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> 二、
阅读全文
摘要：可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 一、基本示范 <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has bee
阅读全文
摘要：一、我们可以用 v-for 指令基于一个数组来渲染一个列表。 <ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.message }} </li> </ul> var example1 = new Vu
阅读全文
摘要：v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 一、基本用法 <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>
阅读全文
摘要：一、绑定HTML Class 1. 对象语法 我们可以传给 v-bind:class 一个对象，以动态地切换 class： <div v-bind:class="{ active: isActive }">这是测试一</div> 又或者： <div class="static" v-bind:cla
阅读全文
摘要：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。 一、示范代码 <div id="watch-example"> <p> Ask
阅读全文
摘要：对于任何复杂逻辑，你都应当使用计算属性。 一、适用场景 <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </di
阅读全文
摘要：Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写： 一、v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url">单击我试试</a> <br/> <!-- 缩写 --> <a :href="url">单击我试试</a> <br/> <!--
阅读全文
摘要：一、参数：一些指令能够接收一个“参数”，在指令名称之后以冒号表示 <a v-bind:href="url">单击我试试</a> 在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。 <a v-on:click="doSomethin
阅读全文
摘要：一、文本：数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <div id="app-10"> {{lastname}} </div> 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。如下： <div id="app-10" v
阅读全文
摘要：Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 一、每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁 实例、
阅读全文
摘要：当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。 一、示范代码 // 我们的数据对象 var data = { firstname: 'CL', las
阅读全文
摘要：在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。 一、示范代码 Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({
阅读全文
摘要：Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。 一、示范代码 <div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> var app6 = new Vue({ el: '#a
阅读全文
摘要：为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法。 一、示范代码 <div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转消息</butt
阅读全文
摘要：v-for 指令可以绑定数组的数据来渲染一个项目列表： 一、示范代码 <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> var app4 = new Vue({ el: '#app-
阅读全文
摘要：控制切换一个元素是否显示也相当简单 一、示范代码 <div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> var app3 = new Vue({ el: '#app-3', data: { seen: true } }) 二、结果如下图所示 三、在控制
阅读全文
摘要：指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。 一、示范代码 <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </di
阅读全文
摘要：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 一、安装VUE 1. 通过如下方式引入 Vue <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="ht
阅读全文
1
