vue
1、
- 事件绑定
- @click
- 简写
- v-on:click
- 全写
- click对应的方法是methods的方法
- 标签属性绑定
- :class
- 简写
- v-bind:class
- 全写
- 可以使用data中的数据
- class的样式绑定
- v-if v-else-if v-else
- v-show
- v-for：循环
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .bg{ 8 background-color:blue; 9 width: 100px; 10 height: 100px; 11 } 12 13 .box{ 14 border:1px solid red; 15 } 16 17 </style> 18 </head> 19 <body> 20 <!--vue只能接管一个div--> 21 <div id="app"> 22 23 <!--{{msg}}--> 24 25 26 <!--简写--> 27 <!--<input type="button" value="登录" @click="login">--> 28 29 <!--全写--> 30 <!--<input type="button" value="登录" v-on:click="change" value="change">--> 31 32 33 <!--v-bind--> 34 35 <!--全写--> 36 <!--<a v-bind:href="url">{{url}}</a>--> 37 38 39 <!--简写--> 40 <!--<div :class="['bg','box']"></div>--> 41 <!--<div :class="{bg:true,box:true}"></div>--> 42 <!--<div :class="{bg:is_bg,box:is_box}"></div>--> 43 44 <!--<div :class="classes"></div>--> 45 <!--<input type="button" value="changeClass" @click="changeClass">--> 46 47 48 <!--v-if v-else-if v-else--> 49 <!--<span v-if="phoneNumber == 10086">移动公司</span>--> 50 <!--<span v-else-if="phoneNumber == 10010">联通公司</span>--> 51 <!--<span v-else>电信公司</span>--> 52 53 54 <!--v-show--> 55 <!--<span v-show="phoneNumber == 10086">移动公司</span>--> 56 57 58 <!--v-for:list--> 59 <!--<ul>--> 60 <!--<li v-for="(game,index) in games">{{game}}&#45;&#45;{{index+1}}</li>--> 61 <!--</ul>--> 62 63 <!--v-for:map--> 64 <!--&lt;!&ndash;<ul>&ndash;&gt;--> 65 <!--<li v-for="(value,key) in games">{{value}}&#45;&#45;{{key}}</li>--> 66 <!--</ul>--> 67 68 <!--v-for:list+map--> 69 <ul> 70 <li v-for=" game in games">{{game.name}}</li> 71 </ul> 72 73 74 75 76 77 78 </div> 79 80 <script src="vue.js"></script> 81 <script> 82 new Vue({ 83 //接管的标签 84 el:'#app', 85 data:{ 86 msg:'test', 87 count:0, 88 url:'http://www.baidu.com', 89 classes:['bg','box'], 90 is_bg:true, 91 is_box:true, 92 phoneNumber:10010, 93 // games:['绝地求生','英雄联盟','王者荣耀'] 94 // games:{'name':'绝地求生','company':'蓝洞'} 95 games:[{'name':'绝地求生'},{'name':'英雄联盟'},{'name':'王者荣耀'}] 96 }, 97 methods:{ 98 login:function(){ 99 alert(this.msg) 100 }, 101 change:function(){ 102 this.msg='change msg' 103 }, 104 changeClass:function(){ 105 this.classes=['bg'] 106 } 107 } 108 }) 109 110 </script> 111 </body> 112 </html>
2、v-model:双向数据绑定
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 <!--<div>{{input_value}}</div>--> 10 <!--&lt;!&ndash;v-model双向数据绑定&ndash;&gt;--> 11 <!--<input type="text" v-model="input_value">--> 12 <!--<input type="button" value="change" @click="change">--> 13 14 15 <!--<div>{{sex}}</div>--> 16 <!--<input type="radio" value="1" name="sex" v-model="sex"> 男--> 17 <!--<input type="radio" value="2" name="sex" v-model="sex"> 女--> 18 19 20 <!--<div>{{movies}}</div>--> 21 <!--<input type="checkbox" value="name1" v-model="movies"> 钢铁侠--> 22 <!--<input type="checkbox" value="name2" v-model="movies"> 复仇者联盟--> 23 24 25 <!--<div>{{movie}}</div>--> 26 <!--<select name="" id="" v-model="movie">--> 27 <!--<option disabled value="">请选择</option>--> 28 <!--<option value="钢铁侠">钢铁侠</option>--> 29 <!--<option value="复仇者联盟">复仇者联盟</option>--> 30 <!--</select>--> 31 32 <div>{{movie}}</div> 33 <select v-model="movie"> 34 <option disabled value="">请选择</option> 35 <!--<option v-for="option in options" v-bind:value="option.id">{{option.name}}</option>--> 36 <option v-for="option in options" :value="option.id">{{option.name}}</option> 37 </select> 38 39 40 41 </div> 42 43 <script src="vue.js"></script> 44 <script> 45 new Vue({ 46 el:'#app', 47 data:{ 48 input_value:'default', 49 sex:1, 50 movies:['钢铁侠'], 51 movie:"2", 52 options:[{"name":"变形金刚","id":1}, {"name":"复仇者联盟","id":2}, {"name":"飞驰人生","id":3}] 53 }, 54 methods:{ 55 change:function(){ 56 this.input_value='change value' 57 58 } 59 } 60 }) 61 </script> 62 63 </body> 64 </html>
