前端Vue知识小白
- 2019 年 10 月 20 日
- 筆記
感觉是已好久没写博文了。今日难得有时间，便写一篇文章。此文章是关于前端知识的，我本身是后端，因工作或其他需要，便学习了前端Vue。此文章是在菜鸟教程上学习的。那么下面进入正文！
首先，Vue.js是一套构建用户界面的渐进式框架。只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 学习起来非常简单,不过因人而异，有人学的比较快，有人学的较慢。只要有心，有目标，肯定会有收获的。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <style type="text/css"> 9 .class1{background: #444;color: #eee;} 10 .active{width: 100px;height: 100px;background: green;} 11 .text-danger{background: red;} 12 </style> 13 <body> 14 <!-- 指令是带有 v- 前缀的特殊属性 --> 15 <!-- 完整语法 --> 16 <a v-bind:href="url"></a> 17 <!-- 缩写 --> 18 <a :href="url"></a> 19 <!-- 完整语法 --> 20 <a v-on:click="doSomething"></a> 21 <!-- 缩写 --> 22 <a @click="doSomething"></a> 23 24 <div id="demo1"> 25 <h2>site : {{ site }}</h2> 26 <h2>url : {{ url }}</h2> 27 <h2>zys : {{ zys }}</h2> 28 <h2>{{ findUser() }}</h2> 29 <div v-html="message"></div> 30 </div> 31 <script type="text/javascript"> 32 var vue = new Vue({ 33 el: '#demo1', 34 data: { 35 site: "123456", 36 url: "http://baidu.com", 37 zys: "zys", 38 message: "<h1>菜鸟教程</h1>" 39 }, 40 methods: { 41 findUser: function(){ 42 return this.zys + ",有梦想,加油！！！" 43 } 44 } 45 }); 46 </script> 47 <div id="demo2"> 48 <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1"> 49 <br><br> 50 <div v-bind:class="{'class1':use}"> 51 v-bind:class 指令 52 </div> 53 </div> 54 <script type="text/javascript"> 55 new Vue({ 56 el: '#demo2', 57 data: { 58 use: false 59 } 60 }); 61 </script> 62 <div id="demo3"> 63 <h2>{{ 5 + 5}}</h2><br> 64 {{ok ? "YES" : "NO"}}<br> 65 {{message.split('').reverse().join('')}} 66 <div v-bind:id="'list-' + id">菜鸟教程</div> 67 </div> 68 <script type="text/javascript"> 69 new Vue({ 70 el: '#demo3', 71 data: { 72 ok: true, 73 message: 'RUNOOB', 74 id: 2 75 } 76 }); 77 </script> 78 <div id="demo4"> 79 <h2 v-if="see1">现在你可以看到我</h2> 80 <template v-if="ok"> 81 <h3>Hello World!!!</h3> 82 </template> 83 </div> 84 <script type="text/javascript"> 85 new Vue({ 86 el: '#demo4', 87 data: { 88 see1: true, 89 ok: true 90 } 91 }); 92 </script> 93 94 <div id="demo5"> 95 <a v-bind:href="url">百度</a> 96 </div> 97 <script type="text/javascript"> 98 new Vue({ 99 el: '#demo5', 100 data: { 101 url: "http://baidu.com" 102 } 103 }); 104 </script> 105 106 <div id="demo6"><!-- 使用 v-model 指令来实现双向数据绑定 --> 107 {{ msg }} 108 <input v-model="msg"> 109 </div> 110 <script type="text/javascript"> 111 new Vue({ 112 el: '#demo6', 113 data: { 114 msg: "你好" 115 } 116 }); 117 </script> 118 119 <div id="demo7"><!-- 使用 v-on 监听事件 --> 120 {{ msg }} 121 <button v-on:click="reverseMsg">反转字符串</button> 122 </div> 123 <script type="text/javascript"> 124 new Vue({ 125 el: '#demo7', 126 data: { 127 msg : "Runoob!" 128 }, 129 methods: { 130 reverseMsg: function (){ 131 this.msg = this.msg.split('').reverse().join(''); 132 } 133 } 134 }); 135 </script> 136 <div id="demo8"> 137 {{ message | capitalize }} 138 </div> 139 <script> 140 new Vue({ 141 el: '#demo8', 142 data: { 143 message: 'runoob' 144 }, 145 filters: { 146 capitalize: function (value) { 147 if (!value) return '' 148 value = value.toString() 149 return value.charAt(0).toUpperCase() + value.slice(1) 150 } 151 } 152 }) 153 </script> 154 <div id="demo9"> 155 <div v-if="Math.random() > 0.5"> 156 Sorry 157 </div> 158 <div v-else> 159 Not Sorry 160 </div> 161 </div> 162 <script> 163 new Vue({ 164 el: '#demo9' 165 }) 166 </script> 167 <div id="demo10"> 168 <div v-if="type=='A'"> 169 A 170 </div> 171 <div v-else-if="type=='B'"> 172 B 173 </div> 174 <div v-else-if="type=='C'"> 175 C 176 </div> 177 <div v-else> 178 Not ABC 179 </div> 180 </div> 181 <script> 182 new Vue({ 183 el: '#demo10', 184 data: { 185 type: 'A' 186 } 187 }) 188 </script> 189 190 <div id="demo11"><!-- v-for 可以绑定数据到数组来渲染一个列表 --> 191 <ol><!-- v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 --> 192 <li v-for="site in sites"> 193 {{ site.name }} 194 </li> 195 </ol> 196 </div> 197 <script> 198 new Vue({ 199 el: '#demo11', 200 data: { 201 sites: [ 202 { name : 'A'}, 203 { name : 'B'}, 204 { name : 'C'} 205 ] 206 } 207 }) 208 </script> 209 <div id="demo12"><!-- v-for 可以通过一个对象的属性来迭代数据 --> 210 <ol> 211 <li v-for="value in object"> 212 {{ value }} 213 </li> 214 </ol> 215 </div> 216 <script> 217 new Vue({ 218 el: '#demo12', 219 data: { 220 object: { 221 name: "菜鸟教程", 222 url: "http://baidu.com", 223 explain: "说明描述等等", 224 } 225 } 226 }) 227 </script> 228 <div id="demo13"><!-- v-for 也可以循环整数 --> 229 <li v-for="n in 10"> 230 {{ n }} 231 </li> 232 </div> 233 <script> 234 new Vue({ 235 el: '#demo13' 236 }) 237 </script> 238 239 <div id="demo14"><!-- 计算属性关键词: computed --> 240 <p>原始字符串: {{ message }}</p> 241 <p>计算后反转字符串: {{ reversedMessage }}</p> 242 </div> 243 <script> 244 new Vue({ 245 el: '#demo14', 246 data: { 247 message: 'Runoob!' 248 }, 249 computed: { 250 // 计算属性的 getter 251 reversedMessage: function () { 252 // `this` 指向 vm 实例 253 return this.message.split('').reverse().join('') 254 } 255 } 256 }) 257 </script> 258 <div id="demo15"><!-- 通过 watch 来响应数据的变化 --> 259 <p style="font-size: 25px;">计数器: {{ counter }}</p> 260 <button @click="counter++" style="font-size: 25px;">点击</button> 261 </div> 262 <script> 263 var vm = new Vue({ 264 el: '#demo15', 265 data: { 266 counter: 1 267 } 268 }); 269 vm.$watch('counter',function(nval,oval){ 270 alert("计数器值的变化：" + oval + "变为" + nval + "!"); 271 }); 272 </script> 273 <div id="demo16"><!-- 千米与米之间的换算 --> 274 千米：<input type="text" v-model="kilometers"> 275 米：<input type="text" v-model="meters"> 276 <p id="info"></p> 277 </div> 278 <script> 279 var vm = new Vue({ 280 el: '#demo16', 281 data: { 282 kilometers: 0, 283 meters: 0 284 }, 285 methods: { 286 287 }, 288 watch: { 289 kilometers:function(val){ 290 this.kilometers = val; 291 this.meters = this.kilometers*1000; 292 }, 293 meters:function(val){ 294 this.kilometers = val/1000; 295 this.meters = val; 296 } 297 } 298 }); 299 vm.$watch('kilometers',function(newValue,oldValue){ 300 // 这个回调将在 vm.kilometers 改变后调用 301 document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue; 302 }); 303 </script> 304 305 <div id="demo17"><!-- 样式绑定 --> 306 <!-- <div class="active"></div> --> 307 <div :class="{active: isActive}"></div> 308 </div> 309 <script> 310 new Vue({ 311 el: '#demo17', 312 data: { 313 isActive: true 314 } 315 }); 316 </script> 317 <div id="demo18"><!-- 可以在对象中传入更多属性用来动态切换多个 class --> 318 <!-- <div class="static active text-danger"></div> --> 319 <div class="static" :class="{active: isActive,'text-danger': hasError}"></div> 320 </div> 321 <script> 322 new Vue({ 323 el: '#demo18', 324 data: { 325 isActive: true, 326 hasError: true 327 } 328 }); 329 </script> 330 <div id="demo19"><!-- 可以把一个数组传给 v-bind:class --> 331 <div :class="[activeClass, errorClass]"></div> 332 </div> 333 <script> 334 new Vue({ 335 el: '#demo19', 336 data: { 337 activeClass: 'active', 338 errorClass: 'text-danger' 339 } 340 }); 341 </script> 342 <div id="demo20"><!-- 可以把一个数组传给 v-bind:class --> 343 <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div> 344 </div> 345 <script> 346 new Vue({ 347 el: '#demo20', 348 data: { 349 activeColor: 'green', 350 fontSize: 30 351 } 352 }); 353 </script> 354 <div id="demo21"><!-- 可以把一个数组传给 v-bind:class --> 355 <div :style="styleObject">菜鸟教程</div> 356 </div> 357 <script> 358 new Vue({ 359 el: '#demo21', 360 data: { 361 styleObject: { 362 color: 'orange', 363 fontSize: '30px' 364 } 365 } 366 }); 367 </script> 368 369 <div id="demo22"><!-- Vue.js 事件处理器 --> 370 <button @click="counter += 1">增加1</button> 371 <p>这个按钮被点击了{{ counter }}次！</p> 372 </div> 373 <script> 374 new Vue({ 375 el: '#demo22', 376 data: { 377 counter: 0 378 } 379 }); 380 </script> 381 <div id="demo23"><!-- Vue.js 事件处理器 --> 382 <button @click="greet">Greet</button> 383 </div> 384 <script> 385 new Vue({ 386 el: '#demo23', 387 data: { 388 name: 'Vue.js' 389 }, 390 methods:{ 391 greet: function(event){ 392 // `this` 在方法里指当前 Vue 实例 393 alert('Hello ' + this.name + '!') 394 // `event` 是原生 DOM 事件 395 if(event){ 396 alert(event.target.tagName) 397 } 398 } 399 } 400 }); 401 </script> 402 <div id="demo24"><!-- 可以用内联 JavaScript --> 403 <button @click="say('hi')">Say hi</button> 404 <button @click="say('what')">Say what</button> 405 </div> 406 <script> 407 new Vue({ 408 el: '#demo24', 409 methods:{ 410 say: function(msg){ 411 alert(msg) 412 } 413 } 414 }); 415 </script> 416 <!-- 事件修饰符 --> 417 <!-- 阻止单击事件冒泡 --> 418 <a v-on:click.stop="doThis"></a> 419 <!-- 提交事件不再重载页面 --> 420 <form v-on:submit.prevent="onSubmit"></form> 421 <!-- 修饰符可以串联 --> 422 <a v-on:click.stop.prevent="doThat"></a> 423 <!-- 只有修饰符 --> 424 <form v-on:submit.prevent></form> 425 <!-- 添加事件侦听器时使用事件捕获模式 --> 426 <div v-on:click.capture="doThis">...</div> 427 <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> 428 <div v-on:click.self="doThat">...</div> 429 <!-- click 事件只能点击一次，2.1.4版本新增 --> 430 <a v-on:click.once="doThis"></a> 431 432 <!-- 表单 --> 433 <div id="demo25"><!-- 可以用 v-model 指令在表单控件元素上创建双向数据绑定 --> 434 <input v-model="message" placeholder="编辑input"> 435 <p>input消息是{{ message }}</p> 436 <textarea v-model="message2" placeholder="编辑textarea"></textarea> 437 <p>textarea消息是{{ message2 }}</p> 438 </div> 439 <script> 440 new Vue({ 441 el: '#demo25', 442 data: { 443 message: 123, 444 message2: 456 445 } 446 }); 447 </script> 448 <div id="demo26"><!-- 复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组 --> 449 <p>单个复选框</p> 450 <input type="checkbox" name="checkbox" v-model="checked"> 451 <label>{{ checked }}</label> 452 <p>多个复选框</p> 453 <input type="checkbox" id="runoob" value="runoob" v-model="checkedNames"><label>Runoob</label> 454 <input type="checkbox" id="google" value="google" v-model="checkedNames"><label>Google</label> 455 <input type="checkbox" id="taobao" value="taobao" v-model="checkedNames"><label>Taobao</label> 456 <span>选择的值为: {{ checkedNames }}</span> 457 </div> 458 <script> 459 new Vue({ 460 el: '#demo26', 461 data: { 462 checked: false, 463 checkedNames: [] 464 } 465 }); 466 </script> 467 <div id="demo27"><!-- 单选按钮的双向数据绑定 --> 468 <input type="radio" id="google" value="google" v-model="picked"><label>Google</label> 469 <input type="radio" id="runoob" value="runoob" v-model="picked"><label>Runoob</label> 470 <span>选择的值为: {{ picked }}</span> 471 </div> 472 <script> 473 new Vue({ 474 el: '#demo27', 475 data: { 476 picked: 'google' 477 } 478 }); 479 </script> 480 <div id="demo28"><!-- 下拉列表的双向数据绑定 --> 481 <select v-model="selected" > 482 <option value="">选择一个网站</option> 483 <option value="http://google.com">谷歌</option> 484 <option value="http://baidu.com">百度</option> 485 </select> 486 <div>选择的网站：{{ selected }}</div> 487 </div> 488 <script> 489 new Vue({ 490 el: '#demo28', 491 data: { 492 selected: '' 493 } 494 }); 495 </script> 496 497 <!-- 组件 --> 498 <!-- 注册一个全局组件语法格式 Vue.component(tagName, options) --> 499 <!-- tagName 为组件名，options 为配置选项 <tagName></tagName> --> 500 501 <!-- 全局组件 --> 502 <div id="demo29"> 503 <runoob></runoob> 504 </div> 505 <script> 506 /*注册*/ 507 Vue.component('runoob',{ 508 template: '<h1>自定义组件1！</h1>' 509 }) 510 /*创建根实例*/ 511 new Vue({ 512 el: '#demo29' 513 }) 514 </script> 515 <!-- 局部组件 --> 516 <div id="demo30"> 517 <runoob></runoob> 518 </div> 519 <script> 520 /*注册*/ 521 var Chlid = { 522 template: '<h1>自定义组件2！</h1>' 523 } 524 /*创建根实例*/ 525 new Vue({ 526 el: '#demo30', 527 components:{ 528 // <runoob> 将只在父模板可用 529 'runoob': Chlid 530 } 531 }) 532 </script> 533 <!-- prop 是父组件用来传递数据的一个自定义属性 --> 534 <div id="demo31"> 535 <chlid message="hello!"></chlid> 536 </div> 537 <script> 538 Vue.component('chlid',{ 539 // 声明 props 540 props: ['message'], 541 // 同样也可以在 vm 实例中像 “this.message” 这样使用 542 template: '<span>{{ message }}</span>' 543 }) 544 /*创建根实例*/ 545 new Vue({ 546 el: '#demo31' 547 }) 548 </script> 549 </body> 550 </html>
以上这些Demo呢，是Vue部分知识点，后续呢我也会学习下面的知识，让我们一起进步，当然我这边只是我学习完之后的总结。具体想看详细的话，可看官方文档，便于自己学习。
目标就像船舰上的指南针，有指南针才知去何方。而那些没有指南针的船舰只能跟随它去远方，做一个小目标吧，让告诉你究竟想要干什么！
