1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>常用系统指令</title> 6 </head> 7 <script src="js/vuejs-2.5.16.js"></script> 8 <body> 9 10 <!-- 11 完整语法 12 <a v-on:click="doSomething">...</a> 13 缩写 14 <a @click="doSomething">...</a> 15 --> 16 17 <!--1.v-on：click--> 18 <h4 style="color: blue;text-align:center">1.v-on：click</h1> 19 <div id="app1" align="center"> 20 21 {{message}} 22 23 <button v-on:click="fun1('good')">点击改变</button> 24 </div> 25 <script> 26 new Vue({ 27 el:'#app1',//表示当前对象接管了div区域 28 data:{ 29 message:'时间处理v-on示例1'//注意不要以分号结尾 30 }, 31 methods:{ 32 fun1:function(msg){ 33 this.message=msg; 34 } 35 } 36 }); 37 </script> 38 39 <hr /> 40 41 <!--2.v-on:keydown--> 42 <h4 style="color: blue;text-align:center">2.v-on:keydown</h1> 43 <div id="app2" align="center"> 44 45 <input value="" v-on:keydown="fun1('你好')" /> 46 <input value="" @keyup.49="fun2" /><!--注意：v-on和@两个用哪个都行，这里的49代表键盘上的1，表示按1弹框49，按其他键不弹框--> 47 </div> 48 <script> 49 new Vue({ 50 el:'#app2', 51 methods:{ 52 fun1:function(msg){ 53 alert(msg); 54 }, 55 fun2:function(){ 56 alert(event.keyCode); 57 } 58 } 59 }); 60 </script> 61 62 <hr /> 63 64 <!--3.鼠标悬停事件--> 65 <h4 style="color: blue;text-align:center">3.鼠标悬停事件</h1> 66 <div id="app3" @mouseover="fun1" style="border: 1px solid red;height: 20px;"> 67 68 </div> 69 <script> 70 new Vue({ 71 el:"#app3", 72 methods:{ 73 fun1:function(){ 74 alert(event); 75 } 76 } 77 }) 78 </script> 79 80 <!--4.事件修饰符 81 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或event.stopPropagation()。 82 Vue.js通过由点(.)表示的指令后缀来调用修饰符。 83 .stop 84 .prevent 85 .capture 86 .self 87 .once 88 --> 89 <h4 style="color: blue;text-align:center">4.事件修饰符</h1> 90 <div id="app4" align="center" @click="fn2" style="border:1px solid #FF0000;height: 50px;" > 91 <a href="http://www.itcast.cn" @click.stop @click.prevent @click.once="fn1" >跳转到传智</a> 92 <a href="http://www.baidu.com" @click.prevent="fn1" >跳转到百度</a> 93 </div> 94 </body> 95 <script> 96 var x=new Vue({ 97 el:"#app4", 98 data:{ 99 100 }, 101 methods:{ 102 fn1:function(){ 103 alert("点我跳转不？"); 104 event.preventDefault();//阻止默认事件 105 //event.stopPropagation();//阻止事件冒泡 106 }, 107 fn2:function(){ 108 alert("div被点击了.."); 109 //event.preventDefault(); 110 } 111 } 112 113 }) 114 115 </script> 116 117 <hr /> 118 <!--5.按键修饰符 119 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符 120 全部的按键别名： 121 .enter 122 .tab 123 .delete (捕获 "删除" 和 "退格" 键) 124 .esc 125 .space 126 .up 127 .down 128 .left 129 .right 130 .ctrl 131 .alt 132 .shift 133 .meta 134 --> 135 <h4 style="color: blue;text-align:center">5.按键修饰符</h1> 136 <div id="app5" align="center" style="border:1px solid #FF0000;height: 50px;" > 137 <input type="text" @keyup.enter="fun1"> 138 </div> 139 <script> 140 new Vue({ 141 el:'#app5', //表示当前vue对象接管了div区域 142 methods:{ 143 fun1:function(){ 144 alert("你按了回车"); 145 } 146 } 147 }); 148 </script> 149 150 <!--6. v-text与v-html--> 151 <h4 style="color: blue;text-align:center">6. v-text与v-html</h1> 152 <div id="app6" align="center" style="border:1px solid #FF0000;height: 70px;" > 153 <div v-text="message"></div><!--<h3>传智黑马</h3>--> 154 <div v-html="message"></div><!--传智黑马--> 155 </div> 156 <script> 157 new Vue({ 158 el:'#app6', //表示当前vue对象接管了div区域 159 data:{ 160 message:"<h3>传智黑马</h3>" 161 } 162 }); 163 </script> 164 165 <hr> 166 167 <!--7.v-bind 168 插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令 169 完整语法 170 <a v-bind:href="url">...</a> 171 缩写 172 <a :href="url">...</a> 173 --> 174 <h4 style="color: blue;text-align:center">7.v-bind</h4> 175 <div id="app7" align="center" style="border:1px solid #FF0000;height: 70px;" > 176 <font size="5" v-bind:color="ys1">传智播客</font><br> 177 <font size="5" :color="ys2">黑马程序员</font> 178 <hr> 179 <a v-bind={href:"http://www.itcast.cn/index/"+id}>itcast</a> 180 </div> 181 <script> 182 new Vue({ 183 el:'#app7', //表示当前vue对象接管了div区域 184 data:{ 185 ys1:"red", 186 ys2:"green", 187 id:1 188 } 189 }); 190 </script> 191 <br /> 192 <hr > 193 194 <!--8. v-model 195 v-model用于表单数据的双向绑定，其实它就是一个语法糖。可以通过值改变输入框，也可以通过输入框改变默认值 196 --> 197 <h4 style="color: blue;text-align:center">8. v-model</h4> 198 <div id="app8" align="center" style="border:1px solid #FF0000;height: 70px;" > 199 姓名:<input type="text" id="username" v-model="user.username"><br> 200 密码:<input type="password" id="password" v-model="user.password"><br> 201 <input type="button" @click="fun" value="获取"> 202 </div> 203 <script> 204 new Vue({ 205 206 el:'#app8', //表示当前vue对象接管了div区域 207 data:{ 208 user:{username:"",password:""} 209 }, 210 methods:{ 211 fun:function(){ 212 alert(this.user.username+" "+this.user.password); 213 this.user.username="tom"; 214 this.user.password="11111111"; 215 } 216 } 217 }); 218 </script> 219 220 <hr> 221 222 <!--9.1v-for 223 操作array 224 --> 225 <h4 style="color: blue;text-align:center">9.1v-for操作array</h4> 226 <div id="app9_1" style="border:1px solid #FF0000;height: 150px;" > 227 <ul> 228 <li v-for="(item,index) in list">{{item+" "+index}}</li> 229 </ul> 230 </div> 231 <script> 232 new Vue({ 233 el:'#app9_1', //表示当前vue对象接管了div区域 234 data:{ 235 list:[1,2,3,4,5,6] 236 } 237 }); 238 </script> 239 240 241 <!--9.2v-for 242 操作对象 243 --> 244 <h4 style="color: blue;text-align:center">9.2v-for操作对象</h4> 245 <div id="app9_2" style="border:1px solid #FF0000;height: 150px;" > 246 <table border="1"> 247 <tr> 248 <td>序号</td> 249 <td>名称</td> 250 <td>价格</td> 251 </tr> 252 253 <tr v-for="p in products"> 254 <td> 255 {{p.id}} 256 </td> 257 <td> 258 {{p.pname}} 259 </td> 260 <td> 261 {{p.price}} 262 </td> 263 </tr> 264 </table> 265 </div> 266 <script> 267 new Vue({ 268 el:'#app9_2', //表示当前vue对象接管了div区域 269 data:{ 270 products:[{id:1,pname:"电视机",price:6000},{id:2,pname:"电冰箱",price:8000}, 271 {id:3,pname:"电风扇",price:600}] 272 } 273 }); 274 </script> 275 276 <hr /> 277 278 <!--10.v-if与v-show 279 v-if是根据表达式的值来决定是否渲染元素 现用现渲染，耗内存 280 v-show是根据表达式的值来切换元素的display css属性--> 281 <h4 style="color: blue;text-align:center">9.2v-for操作对象</h4> 282 <div id="app10" style="border:1px solid #FF0000;height: 150px;" > 283 <span v-if="flag">传智播客</span> 284 <span v-show="flag">itcast</span> 285 <button @click="toggle">切换</button> 286 </div> 287 <script> 288 new Vue({ 289 el:'#app10', //表示当前vue对象接管了div区域 290 data:{ 291 flag:false 292 }, 293 methods:{ 294 toggle:function(){ 295 this.flag=!this.flag; 296 } 297 } 298 }); 299 </script> 300 </body> 301 </html>