一、初步了解
Vue.js是一套构建用户界面的渐进式框架，它只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，相当于JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。
使用Vue的过程就是定义MVVM各个组成部分的过程的过程。
- 定义View
- 定义Model
- 创建一个Vue实例或"ViewModel"，它用于连接View和Model
在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。
例1：
<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>
获得以下结果：
例2:
<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>单个复选框：</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>多个复选框：</p> <input type="checkbox" id="tang" value="糖" v-model="checkedNames"> <label for="tang">糖</label> <input type="checkbox" id="guo" value="果" v-model="checkedNames"> <label for="guo">果</label> <input type="checkbox" id="bo" value="波" v-model="checkedNames"> <label for="bo">波</label> <br> <span>选择的值为: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script>
得到如下结果：
以下是input框与文本框双向绑定的应用：
<div id="app"> <h1>input 元素：</h1> <p>{{ message }}</p> <input type="text" v-model="message"/> <h1>textarea 元素：</h1> <p style="white-space: pre">{{ message2 }}</p> <textarea v-model="message2" placeholder="多行文本输入……" style="300px;"></textarea> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { message: '糖果波', message2: 'Vue.js教程 https://vuejs.bootcss.com/support-vuejs/' } }) </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>