开发之路，羊肠九曲，荆棘密布，幸得高人指点，前辈填坑，一路谨小慎微，终得工程圆满；其间填坑之经验，开路之历程，皆为精华，不可弃之；记录于此，以便事后回顾，亦想于有相关开发疑惑之同学做参考之用，文中如若有错，恳请雅正，不胜感激。

Vue.js

简介

构建用户界面的渐进式框架，采用自底向上增量开发的设计。很久之前需要用到vue时的学习记录，希望能帮助到正在入门的同学们。

起步

使用

需要引入vue

<script src="https://unpkg.com/vue"></script>

声明式渲染

<div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

绑定 DOM 元素属性：

<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div> var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date() } })

指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。

条件与循环

<div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> var app3 = new Vue({ el: '#app-3', data: { seen: true } }) <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } })

处理用户输入

为了让用户和你的应用进行互动，我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：

<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆转消息</button> </div> var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })

v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } })

Vue实例

构造器

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的：

var viewmodel = new Vue({ //配置 })

属性与方法

var data = { a: 1 } var vm = new Vue({ data: data }) vm.a === data.a // -> true // 设置属性也会影响到原始数据 vm.a = 2 data.a // -> 2 // ... 反之亦然 data.a = 3 vm.a // -> 3