Vue简介
我给vue的总体评价是“简单却不失优雅，小巧而不乏大匠”，下面将围绕这句话给大家介绍Vue.js，希望能够激发你对Vue.js的兴趣。
Vue.js的作者为Evan You（尤雨溪），曾任职于Google Creative Lab，2016年9月3日，在南京的JSConf上，尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入 Weex 团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。虽然是Vue是一个个人项目，但在发展前景上个人认为绝不输于Google的AngularJs，现在是社区在维护Vue。
Vue.js是一个构建数据驱动的web界面的框架
Vue.js的目标是实现响应的数据绑定和组合的试图组件
Vue.js的核心是一个响应的数据绑定系统
Vue.js主要负责的是上图绿色正方体ViewModel的部分，其在View层（即DOM层）与Model层（即JS逻辑层）之间通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西。
当View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据。相反，当Model层的数据发生改变时，其也会通过Data Bingings来监听并改变View层的展示。这样便实现了一个双向数据绑定的功能，也是Vue.js数据驱动的原理所在。
Vue实例
<!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>--> <script src="test/vue.js"></script> </head> <body> <div id="app"> <h1>{{a}}</h1> <h2>{{b}}</h2> </div> </body> <script> let vm = new Vue({ el :'#app', data:{ a:10, b:2 }, created: function () { console.log('a的值是:' +this.a) } }); </script> </html>
Vue的操作样式以及指令
操作样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模板</title> </head> <body> <div id="app"> <p v-on:click="btnClick" v-bind:style="v_style">点击p文字颜色变为绿色</p> <div v-on:click="btnClick" v-bind:style="v_style">点击div文字颜色变为绿色</div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { v_style: { color: 'black' } }, methods: { btnClick: function () { this.v_style.color = 'green' } } }) </script> </html>
文本指令
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模板</title> </head> <body> <div id="app"> <!-- 插值表达式 --> <p>{{ msg1 }}</p> <p v-text="msg2"></p> <p v-html="msg3"></p> <p v-once="msg3" v-on:mouseover="action">{{ msg3 }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg1: '**msg1**', msg2: '<b>**msg2**</b>', msg3: '<b>**msg3**</b>', }, methods: { action: function () { // var msg = this.$data.msg4; this.msg3 = '<i>**new msg3**</i>' } } }) </script> </html>
事件指令
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模板</title> </head> <body> <div id="app"> <!-- v-on:事件名="函数名" 可以简写为 @事件名="函数名" （v-on: => @）--> <p v-on:click="action1">{{ msgs[0] }}</p> <p @click="action2">{{ msgs[1] }}</p> <!-- 事件的传参 --> <ul> <li @click="liAction(100)">列表项1</li> <li @click="liAction(200)">列表项2</li> <li @click="liAction(300)">列表项3</li> </ul> <!-- 鼠标事件的对象：直接写函数名，默认将鼠标事件对象传入 --> <div @click="func1">func1</div> <!-- 鼠标事件的对象：一旦添加(),就必须手动传参，$event就代表鼠标事件对象 --> <div @click="func2($event, 'abc')">func2</div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msgs: ['11111', '22222'] }, methods: { action1: function () { alert(this.msgs[0]) }, action2: function () { alert(this.msgs[1]) }, liAction: function (num, msg) { console.log(num, msg) }, func1: function (ev) { console.log(ev) }, func2: function (ev, msg) { console.log(ev); console.log(msg) } } }) </script> </html>
属性指令
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模板</title> <style> .rDiv { width: 100px; height: 100px; background-color: red; } .gDiv { width: 200px; height: 50px; background-color: green; } .br { border-radius: 50%; } </style> </head> <body> <div id="app"> <!-- 属性指令：用vue绑定属性，将属性内容交给vue处理 --> <!-- 语法：v-bind:属性名="变量" (v-bind: 可以简写为 :) --> <p class="" style="" v-bind:owen="oo" :jason="jj"></p> <!-- class 属性 --> <p :class="c1" @click="action1"></p> <!-- 多类名 --> <p :class="[c1, c2]"></p> <!-- 'br' 固定写死的数据，不再是变量 --> <p :class="[c1, 'br']"></p> <!-- style 属性 --> <!-- 一个变量：该变量值为{},{}内部完成一个个属性的设置 --> <p class="gDiv" :style="s1">12345</p> <!-- 一个{}：{}内一个个属性有一个个变量单独控制 --> <p class="gDiv" :style="{fontSize: fs, color: c}">67890</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { oo: 'Owen', jj: 'Jason', c1: 'rDiv', c2: 'br', s1: { // 'font-size': '30px' fontSize: '30px', color: 'pink' }, fs: '20px', c: 'orange' }, methods: { action1: function () { if (this.c1 == 'rDiv') { this.c1 = 'gDiv' } else { this.c1 = 'rDiv' } } } }) </script> </html>
表单指令
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模板</title> </head> <body> <div id="app"> <!-- 表单指令：v-model="变量" --> <form action=""> <p> <input type="text" v-model="val" name="user"> </p> <p> <input type="text" v-model="val"> </p> <!-- 单选框 v-model绑定的变量是单选框中某一个input的value --> <p> 男: <input v-model="r_val" value="male" type="radio" name="sex"> 女: <input v-model="r_val" value="female" type="radio" name="sex"> </p> <!-- 复选框 v-model绑定的变量是一个列表，列表存存放0到任一个复选框的value --> <p> 男: <input v-model="c_val" value="m" type="checkbox" name="h"> 女: <input v-model="c_val" value="f" type="checkbox" name="h"> 哇塞: <input v-model="c_val" value="mf" type="checkbox" name="h"> </p> <button type="submit">提交</button> </form> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { val: '', r_val: 'female', c_val: [] } }) </script> </html>
条件指令
<!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>--> <script src="test/vue.js"></script> </head> <body> <div id="app"> <p v-on:click="action1">{{ msg[0] }}</p> <p @click="action2">{{msg[1]}}</p> <ul> <li @click="liAction(100)">列表项1</li> <li @click="liAction(200)">列表项2</li> <li @click="liAction(300)">列表项3</li> </ul> <div @click="func1">func1</div> <div @click="func2($event,'abc')">func2</div> </div> </body> <script> new Vue({ el :'#app', data:{ msg:['1111','2222'] }, methods:{ action1:function () { alert(this.msgs[0]) }, action2:function () { alert(this.msg[1]) }, liAction: function (num, msg) { console.log(num,msg) }, func1: function (ev) { console.log(ev) }, func2: function (ev, msg) { console.log(ev); console.log(msg) } }, }); </script> </html>
条件指令补充
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模板</title> </head> <body> <div id="app"> <p v-if="r1" key="p-r1">if条件</p> <p v-show="r2">show条件</p> <ul> <li v-if="tag==1">111</li> <li v-else-if="tag==2">222</li> <li v-else>333</li> </ul> <ul> <li @click="action('a')">a</li> <li @click="action('b')">b</li> <li @click="action('c')">c</li> </ul> <ul> <li v-show="flag =='a'">aaa</li> <li v-show="flag =='b'">bbb</li> <li v-show="flag =='c'">ccc</li> </ul> </div> </body> <script src="test/vue.js"></script> <script> new Vue({ el: '#app', data: { num:10, r1:false, r2:false, tag:1, flag:'a' }, methods:{ action:function (s) { this.flag=s } } }) </script> </html>
循环指令
循环数组和自定义对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模板</title> </head> <body> <div id="app"> <p>{{nums[2]}}</p> <ul> <li>{{nums[0]}}</li> <li>{{nums[1]}}</li> <li>{{nums[2]}}</li> <li>{{nums[3]}}</li> <li>{{nums[4]}}</li> </ul> <ul> <li v-for="num in nums">{{num}}</li></ul> <ul> <li v-for="(v,k,i) in people">{{v}} {{k}} {{i}}</li></ul> </div> </body> <script src="test/vue.js"></script> <script> new Vue({ el: '#app', data: { nums:[1,2,3,4,5], people:{ name:'owen', age:18, gender:'others' } } }) </script> </html>
在Vue项目的开发中，我们使用的最多的应该就属Vue的指令了。通过Vue提供的常用指令，我们可以淋漓尽致地发挥Vue数据驱动的强大功能。以下便是图中常用指令的简单介绍：
（1）v-text: 用于更新绑定元素中的内容，类似于jQuery的text()方法
（2）v-html: 用于更新绑定元素中的html内容，类似于jQuery的html()方法
（3）v-if: 用于根据表达式的值的真假条件渲染元素，如果条件为false则不会渲染元素
（4）v-show: 用于根据表达式的值的真假条件显示隐藏元素，切换元素的 display CSS 属性
（5）v-for: 用于遍历数据渲染元素或模板
（6）v-on: 用于在元素上绑定事件，可以在P标签上绑定了一个点击事件