1、一个vue的简单实例：
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue的简单实例title> 6 <script src="./lib/vue.js">script> 7 <style> 8 .red { 9 color: red; 10 font-size: large; 11 } 12 style> 13 head> 14 <body> 15 <div id="app"> 16 {{hello}} 17 <h1 v-text="hello" :class="color">h1><br/> 18 <input type="text" v-model="hello" /><br/> 19 <span>{{}}:输出的模式：span>{{html}}<br/> 20 <span>v-text:输出的模式：span><span v-text="html">span><br/> 21 <span>v-html:输出的模式：span><span v-html="html">span><br/> 22 div> 23 body> 24 <script> 25 var vm = new Vue({ 26 el:'#app', 27 data: { 28 hello: 'MGY', 29 html: '你好，世界
', 30 color: 'red' 31 } 32 }); 33 script> 34 html>
解释：v-bind:class 可以简写成： :class 表示绑定 class 属性，所以 :class="color" 中的 color 是一个变量，该 :class 指令 可以与普通的 class 属性共存。
v-model 指令实现表单 、）并不会生效，应用 v-model 来代替 }
checkedbox 和 radio 使用 checked 属性和 change 事件
select 字段将 value 作为 prop 并将 change 作为事件 {注意：如果 v-model 表达式的初始值未能匹配任何选项，
v-once 指令能执行一次性地插值，当数据改变时，插值处的内容不会更新。
{{}}、v-text 与 v-html 的区别：{{}} 和 v-text 会将内容原样输出、而 v-html 会对里面包含 html 标签的，会以 html 标签的样式输出。{注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值}
2、计算属性：
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue的简单实例title> 6 <script src="lib/vue.js">script> 7 head> 8 <body> 9 <div id="app"> 10 <input type="text" v-model="n1"> + 11 <input type="text" v-model="n2"> = 12 <input type="text" v-model="sum"> 13 div> 14 body> 15 <script> 16 var vm = new Vue({ 17 el:'#app', 18 computed: { 19 // 计算属性的 getter 20 sum: function () { 21 // `this` 指向 vm 实例 22 return this.n1*1 + this.n2*1; 23 } 24 }, 25 data: { 26 n1: 0, 27 n2: 0 28 } 29 }); 30 script> 31 html>
解释：这里我们声明了一个计算属性 sum。我们提供的函数将用作属性 vm.sum的 getter 函数。
3、监听属性：
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue的简单实例title> 6 <script src="lib/vue.js">script> 7 head> 8 <body> 9 <div id="app"> 10 <input type="text" v-model="word" /> 11 <h1> 12 结果：{{result}} 13 h1> 14 div> 15 body> 16 <script> 17 var vm = new Vue({ 18 el:'#app', 19 watch: { 20 word: function (newV, oldV) { 21 axios.get('9.php?word='+newV).then(function (response) { 22 app.result = response.data; 23 }) 24 } 25 }, 26 data: { 27 word: '', 28 result: '' 29 } 30 }); 31 script> 32 html>
4、使用object与array来控制class：
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用object与array控制classtitle> 6 <script src="./lib/vue.js">script> 7 <style> 8 .green {color: green;} 9 .color {color: red;} 10 .font {font-size: 200px;} 11 style> 12 head> 13 <body> 14 <div id="app"> 15 <h1 class="green" :class="hd">后盾人h1> 16 <hr> 17 <h2 :class="[success,font]">houdunren.comh2> 18 div> 19 body> 20 <script> 21 var vm = new Vue({ 22 el:'#app', 23 data: { 24 hd: {font:true}, 25 success: 'color', 26 font: 'font' 27 } 28 }); 29 script> 30 html>
5、在 class 写表达式控制类型：
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>在 class 写表达式控制类型title> 6 <script src="./lib/vue.js">script> 7 <style> 8 .success {color: green;} 9 .error {color: red;} 10 style> 11 head> 12 <body> 13 <div id="app"> 14 <li v-for="v in news"> 15 <span v-bind:class="v.status?'success':'error'">{{v.status}}span> 16 <button v-on:click="changeStatus(v,false)" v-if="v.status">删除button> 17 <button v-on:click="changeStatus(v,true)" v-if="!v.status">恢复button> 18 li> 19 div> 20 body> 21 <script> 22 var vm = new Vue({ 23 el:'#app', 24 methods: { 25 changeStatus: function (item, status) { 26 item.status = status; 27 } 28 }, 29 data: { 30 news: [ 31 {title: '后盾人', status: true}, 32 {title: 'houdunren.com', status: true} 33 ] 34 } 35 }) 36 script> 37 html>
6、使用vue来设计行级样式：
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用vue来设计行级样式title> 6 <script src="./lib/vue.js">script> 7 <style> 8 style> 9 head> 10 <body> 11 <div id="app"> 12 <h1 :style="{color:'red',fontSize:size+'px'}">后盾人h1> 13 <h2 :style="style">后盾人h2> 14 <h3 :style="[hdcms]">houdunren.comh3> 15 <input type="number" v-model="size" /> 16 div> 17 body> 18 <script> 19 var vm = new Vue({ 20 el:'#app', 21 data: { 22 red: 'green', 23 size: 16, 24 style: { 25 color: 'blue' 26 }, 27 hdcms: { 28 color: 'yellow', 29 backgroundColor: 'blue' 30 } 31 } 32 }) 33 script> 34 html>
7、v-if 的使用：
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-if的使用title> 6 <script src="./lib/vue.js">script> 7 <style> 8 style> 9 head> 10 <body> 11 <div id="app"> 12 <input type="text" v-model="age" /> 13 <span v-if="age<20">小孩span> 14 <span v-else-if="age<30">青年span> 15 <span v-else-if="age<50">壮年span> 16 <span v-else>老年span> 17 <hr /> 18 <input type="checkbox" v-model="copyright" />接受协议 <br> 19 <span v-if="!copyright">请先接受协议span> 20 <button v-else>注册button> 21 div> 22 body> 23 <script> 24 var vm = new Vue({ 25 el:'#app', 26 data: { 27 copyright: false, 28 age: 0 29 } 30 }) 31 script> 32 html>
8、使用key唯一令牌解决表单值混乱问题：
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用key唯一令牌解决表单值混乱问题title> 6 <script src="./lib/vue.js">script> 7 <style> 8 style> 9 head> 10 <body> 11 <div id="app"> 12 <template v-if="regType=='mail'"> 13 邮箱：<input type="text" name="username" key="mail-register"/> 14 template> 15 <template v-else> 16 手机：<input type="text" name="username" key="phone-register"/> 17 template> 18 <br/> 19 <input type="radio" value="mail" v-model="regType"/>邮箱注册 20 <input type="radio" value="phone" v-model="regType"/>手机注册 21 div> 22 body> 23 <script> 24 var vm = new Vue({ 25 el: '#app', 26 data: { 27 regType: 'mail' 28 } 29 }) 30 script> 31 html>
9、v-show与v-if的对比：
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-if与v-show的对比title> 6 <script src="./lib/vue.js">script> 7 <style> 8 style> 9 head> 10 <body> 11 <div id="app"> 12 <h1 v-if="status">后盾人h1> 13 <h1 v-show="status">houdunren.comh1> 14 <input type="checkbox" v-model="status" /> 15 div> 16 body> 17 <script> 18 var vm = new Vue({ 19 el: '#app', 20 data: { 21 status: true 22 } 23 }); 24 script> 25 html>
解释：v-show：会把元素隐藏掉，即把样式设置为隐藏的样式，而 v-if：直接把元素删除掉。所以 v-show 的性能比 v-if 好，但 v-if 的功能比 v-show 好，它有 v-if、v-else-if、v-else
10、v-for 的使用：
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-for的使用title> 6 <script src="./lib/vue.js">script> 7 <style> 8 style> 9 head> 10 <body> 11 <div id="app"> 12 <table border="1"> 13 <tr> 14 <th>序号th> 15 <th>编号th> 16 <th>标题th> 17 <th>老师th> 18 tr> 19 <tbody> 20 21 <tr v-for="(field, key) in news"> 22 <td>{{key+1}}td> 23 <td>{{field.id}}td> 24 <td>{{field.title}}td> 25 <td>{{name}}td> 26 tr> 27 tbody> 28 table> 29 div> 30 body> 31 <script> 32 var vm = new Vue({ 33 el: '#app', 34 data: { 35 name: '向军老师', 36 news: [ 37 {id: 22, title: 'houdunren.com'}, 38 {id: 66, title: '后盾人'} 39 ] 40 } 41 }); 42 script> 43 html>