一、初步了解
Vue.js是一套构建用户界面的渐进式框架，它只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，相当于JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。
使用Vue的过程就是定义MVVM各个组成部分的过程的过程。
- 定义View
- 定义Model
- 创建一个Vue实例或"ViewModel"，它用于连接View和Model
在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。
<div id="vue_det"> ???<h1>姓名 : {{name}}</h1> ???<h1>爱好 : {{hobby}}</h1> ???<h1>{{details()}}</h1></div><script type="text/javascript"> ???var vm = new Vue({ ???????el: ‘#vue_det‘, ???????data: { ???????????name: "糖果波", ???????????hobby: "吃喝玩乐", ???????????alexa: "10000" ???????}, ???????methods: { ???????????details: function() { ???????????????return ?this.name+ "喜欢"+this.hobby; ???????????} ???????} ???}) ???vm.alexa= "1234" ???document.write(vm.alexa)</script><div id="app"> ???{{5+5}}<br> ????????//结果10 ???{{ ok ? ‘YES‘ : ‘NO‘ }}<br> ?????//结果YES ???{{ message.split(‘‘).reverse().join(‘‘) }} ?????//结果BOONUR</div> ???<script>new Vue({ ?el: ‘#app‘, ?data: { ???ok: true, ???message: ‘RUNOOB‘ ?}})</script>二、data值改变
Vue实例的data属性指向exampleData，它是一个引用类型，改变了exampleData对象的属性，同时也会影响Vue实例的data属性。
当下面实例中变量data 进行改变时，定义实例中的data也会改变；当实例中的data改变时，变量data也会随之改变。
<div id="vue_det"> ???<h1>site : {{site}}</h1> ???<h1>url : {{url}}</h1> ???<h1>Alexa : {{alexa}}</h1></div><script type="text/javascript"> ???// 我们的数据对象 ???var data = { site: "教程", url: "www.baidu.com", alexa: 10000} ???var vm = new Vue({ ???????el: ‘#vue_det‘, ???????data: data ???}) ???// 它们引用相同的对象！ ???document.write(vm.site === data.site) // true ???document.write("<br>") ???// 设置属性也会影响到原始数据 ???vm.site = "aa" ???document.write(data.site + "<br>") // Runoob ???// ……反之亦然 ???data.alexa = 1234 ???document.write(vm.alexa) // 1234</script>三、指令
（1）v-bind
v-bind主要是綁定html标签中的一个或多个属性，例如 href，class，name，可以在其名称后面带一个参数，中间放一个冒号隔开。例：
<a v-bind:href="url">小飞飞的博客</a> //注意这里面的url不能直接写网址！，只能写变量传参数才可以//错误示范：v-bind:href="http://blog.csdn.net/qq_37983691"<script> ???new Vue({ ???????data:{ ????????????url:"http://blog.csdn.net/qq_37983691" ???????} ???})<script>对于绑定class只能用如下绑定方式：
第一个参数class的名称，第二个是一个boolean值，就是true，false, 如果是true的话这个绑定的class才生效啊！
v-bind:class=”{className:boolean}”//错误的绑定方式：v-bind:class=”sb”，v-bind:class=”{bigSb}”以下例子是class绑定及监听事件改变属性。
<style> ?.aa { ???background: #444; ???color: #eee; ?}</style><body> ?<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> ?<div id="app"> ???<label for="r1">修改颜色</label> ???<input type="checkbox" v-model="class1" id="r1"> ???<button v-on:click="changeColor">点击</button> ???<br> ???<br> ???<div v-bind:class="{‘aa‘: class1}"> ?????v-bind:class 指令 ???</div> ?</div> ?<script> ???new Vue({ ?????el: ‘#app‘, ?????data: { ???????class1: false ?????}, ?????methods: { ???????changeColor: function () { ?????????if (this.class1 == true) { ???????????this.class1 = false ?????????} else { ???????????this.class1 = true ?????????} ???????} ?????} ???}); ?</script></body>另一种class绑定方法：
<div v-bind:class="classObject"></div><script> ??????new Vue({ ???????????el: ‘#app‘, ???????????data: { ?????????????????classObject: { ????????????????????????active: true, ????????????????????????‘text-danger‘: false ?????????????????} ????????????} ???});</script>绑定多个class:
<div v-bind:class="[activeClass, errorClass]"></div><script> ??????new Vue({ ???????????el: ‘#app‘, ???????????data: { ?????????????????activeClass: ‘active‘, ?????????????????errorClass: ‘text-danger‘ ?????????????????} ????????????} ???});</script>绑定id:
<div id="app"> ???<div v-bind:id="‘list-‘ + id">List</div> ??//id为"list-1"</div> ???<script> ????new Vue({ ?????????el: ‘#app‘, ?????????data: { ???????????id : 1 ?????????} ????})</script>绑定style:
<div id="app"> ???<div v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px‘ }"></div></div> ???<script> ????new Vue({ ?????????el: ‘#app‘, ?????????data: { ??????????????activeColor: ‘red‘, ??????????????fontSize: 30 ?????????} ????})</script><div id="app"> ???<div v-bind:style="styleObject"></div></div> ???<script> ????new Vue({ ?????????el: ‘#app‘, ?????????data: { ??????????????styleObject: { ???????????????????color: ‘red‘, ???????????????????fontSize: ‘13px‘ ??????????????} ?????????} ????})</script>（2）v-model
v-model用于表单数据的双向绑定，v-model只能用在：<input> <select> <textarea> <components> <checkbox> <radio>等表单数据中；
在下面实例中，如果<p>中文本进行变化，<input>中的文本也会随之变化；反之亦然。
<div id="app"> ???<p>{{ message }}</p> ???<input type="text" v-model="message"/></div><script type="text/javascript"> ???new Vue({ ???????el: ‘#app‘, ???????data: { ???????????message: ‘糖果波‘ ???????} ???})</script>（3）v-html
v-html用来输出 html 代码。
<div id="app"> ???<div v-html="message"></div></div> ???<script>new Vue({ ?el: ‘#app‘, ?data: { ???message: ‘<h1>糖果波</h1>‘ ?}})</script>（4）条件判断指令v-if、v-else、v-else-if、v-show
注意：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
①v-if
v-if根据条件的true或false来判断元素是否插入
<div id="app"> ???<p v-if="seen">未插入的存在</p> ???<template v-if="ok"> ?????<h1>糖果波</h1> ?????<h2>润润家的糖果波</h2> ???</template></div> ???<script>new Vue({ ?el: ‘#app‘, ?data: { ???seen: false, ???ok: true ?}})</script>②v-else
下面的例子给一个随机数，判断是否大于0.5，大于输出Yes，否则输出No。
<div id="app"> ???<div v-if="Math.random() > 0.5">Yes</div> ???<div v-else>No</div></div> ???<script>new Vue({ ?el: ‘#app‘})</script>③v-else-if
v-else-if 在 2.1.0 新增，用作 v-if 的 else-if 块。可以链式的多次使用：
<div id="app"> ???<div v-if="name === ‘糖‘"> ?????糖 ???</div> ???<div v-else-if="name === ‘果‘"> ?????果 ???</div> ???<div v-else-if="name === ‘波‘"> ?????波 ???</div> ???<div v-else> ?????润润家的糖果波 ???</div></div> ???<script>new Vue({ ?el: ‘#app‘, ?data: { ???name: ‘波‘ ?}})</script>④v-show
v-show根据条件的true或false来判断元素是否可见
<div id="app"> ???<p v-if="seen">看不见的存在</p> ???<template v-if="ok"> ?????<h1>糖果波</h1> ?????<h2>润润家的糖果波</h2> ???</template></div> ???<script>new Vue({ ?el: ‘#app‘, ?data: { ???seen: false, ???ok: true ?}})</script>注意：
1、v-show 不支持 <template> 元素，也不支持 v-else。
2、v-if用来判断元素是否插入DOM中；v-show已经在DOM中，只是用来判断元素是否可见，相当于CSS中的display属性。
3、不推荐同时使用 v-if 和 v-for。当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
（5）v-for 循环
v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
<div id="app"> ?<ol> ???<li v-for="site in sites"> ?????{{ site.name }} ???</li> ?</ol></div> <script>new Vue({ ?el: ‘#app‘, ?data: { ???sites: [ ?????{ name: ‘张三‘ }, ?????{ name: ‘李四‘ }, ?????{ name: ‘王五‘ } ???] ?}})</script>模板中使用：
<div id="app"> ?<ul> ???<template v-for="site in sites"> ?????<li>{{ site.name }}</li> ?????<li>--------------</li> ???</template> ?</ul></div><script>new Vue({ ?el: ‘#app‘, ?data: { ???sites: [ ?????{ name: ‘张三‘ }, ?????{ name: ‘李四‘ }, ?????{ name: ‘王五‘ } ???] ?}})</script>可以使用多个key 或 index作为参数：
<div id="app"> ?<ul> ???<li v-for="(value, key, index) in object"> ????{{ index }}. {{ key }} : {{ value }} ???</li> ?</ul></div><script>new Vue({ ?el: ‘#app‘, ?data: { ???object: { ?????name: ‘糖果波‘, ?????sex: ‘女‘, ?????job: ‘GIS软件工程师‘ ???} ?}})</script>通过V-for建立表格：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 建立表格</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> ??//在线调用菜鸟教程的Vue.js</head><body> ???????<div id="app"> ???????????<table> ???????????????<thead> ???????????????????<tr> ???????????????????????<th>Name</th> ???????????????????????<th>Age</th> ???????????????????????<th>Sex</th> ???????????????????</tr> ???????????????</thead> ???????????????<tbody> ???????????????????<tr v-for="person in people"> ???????????????????????<td>{{ person.name ?}}</td> ???????????????????????<td>{{ person.age ?}}</td> ???????????????????????<td>{{ person.sex ?}}</td> ???????????????????</tr> ???????????????</tbody> ???????????</table> ???????</div> ???<script> ???????var vm = new Vue({ ???????????el: ‘#app‘, ???????????data: { ???????????????people: [{ ???????????????????name: ‘Jack‘, ???????????????????age: 30, ???????????????????sex: ‘Male‘ ???????????????}, { ???????????????????name: ‘Bill‘, ???????????????????age: 26, ???????????????????sex: ‘Male‘ ???????????????}, { ???????????????????name: ‘Tracy‘, ???????????????????age: 22, ???????????????????sex: ‘Female‘ ???????????????}, { ???????????????????name: ‘Chris‘, ???????????????????age: 36, ???????????????????sex: ‘Male‘ ???????????????}] ???????????} ???????}) ???</script> ???</body></html>整数的循环：
<div id="app"> ?<ul> ???<li v-for="n in 10"> ????{{ n }} ???</li> ?</ul></div><script>new Vue({ ?el: ‘#app‘})</script>（6）v-on 事件监听
v-on 指令可以进行事件监听
下面的例子用来监听click事件次数并增加属性值：
<div id="app"> ?<button v-on:click="counter += 1">点击按钮</button> ?<p>这个按钮被点击了 {{ counter }} 次。</p></div> <script>new Vue({ ?el: ‘#app‘, ?data: { ???counter: 0 ?}})</script>其中methods中写用来接收事件处理方法，可以写入js语句：
<div id="app"> ?<button v-on:click="say(‘糖果波‘)">Say Name</button> ?<button v-on:click="say(‘你好‘)">Say hi</button></div><script>new Vue({ ?el: ‘#app‘, ?methods: { ???say: function (message) { ?????alert(message) ???} ?}})</script>其他事件修饰符：
<!-- 阻止单击事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 ?--><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件侦听器时使用事件捕获模式 --><div v-on:click.capture="doThis">...</div><!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --><div v-on:click.self="doThat">...</div><!-- click 事件只能点击一次，2.1.4版本新增 --><a v-on:click.once="doThis"></a>
其他按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() --><input v-on:keyup.13="submit"><!-- 常用键盘按键别名 --><input v-on:keyup.enter="submit"> ????<!-- 键盘enter键 --><input v-on:keyup.tab="submit"><input v-on:keyup.delete ="submit"> ???<!-- 键盘delete键和退格键 --><input v-on:keyup.esc="submit"><input v-on:keyup.space="submit"><input v-on:keyup.up="submit"><input v-on:keyup.down="submit"><input v-on:keyup.left="submit"><input v-on:keyup.right="submit"><input v-on:keyup.ctrl="submit"><input v-on:keyup.alt="submit"><input v-on:keyup.shift="submit"><input v-on:keyup.meta="submit">
四、缩写
只有v-bind和v-on有缩写
<!-- v-bind --><!-- 完整语法 --><a v-bind:href="url"></a><!-- 缩写 --><a :href="url"></a><!-- v-on --><!-- 完整语法 --><a v-on:click="doSomething"></a><!-- 缩写 --><a @click="doSomething"></a>
Vue.js学习使用心得（一）
原文地址：https://www.cnblogs.com/tangguobo/p/10045769.html