在学习VUE入门视频时记录的知识点和代码，备忘。

基本

el:挂载点，id选择器#，不能挂载到<html> <body>两个标签

Vue指令

内容绑定、事件绑定

v-text设置标签内容，支持用插值表达式对原有变量进行相关操作。和两个花括号基本等价。

  1. <div id="vtext_app">
  2.     <h2 v-text="message + '!'"></h2>
  3.     <h2>局部更新{{ message + "!" }}</h2>
  4.     <h2 v-text="info"></h2>
  5. </div>
  6. <script>
  7.     var cur_app = new Vue({
  8.         el:"#vtext_app",
  9.         data:{
  10.             message:"test",
  11.             info: "多个变量支持"
  12.         }
  13.     })
  14. </script>

v-html设置innerhtml属性，如果要渲染html结构，需要使用该语句。

  1. <html>
  2.     <head>
  3.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  4.     </head>
  5.     <body>
  6.         <div id="app">
  7.             <p v-text="content1"></p>
  8.             <p v-html="content1"></p>
  9.             <p v-text="content2"></p>
  10.             <p v-html="content2"></p>
  11.         </div>
  12.         <script>
  13.             var app = new Vue({
  14.                 el:"#app",
  15.                 data:{
  16.                     content1:"hello",
  17.                     content2:"<a href='http://www.baidu.com'>百度</a>"
  18.                 }
  19.             });
  20.         </script>
  21.     </body>
  22. </html>

v-on为元素绑定事件，点击、按键、鼠标滚动等，与@符号等价。时间对应的方法需要提前准备在methods当中。

  1. <html>
  2.     <head>
  3.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  4.     </head>
  5.     <body>
  6.         <div id="app">
  7.             <input type="button" value="v-on" v-on:click="doIt">
  8.             <input type="button" value="v-on简写" @click="doIt">
  9.             <input type="button" value="双击事件" @dblclick="doIt">
  11.             <!-- 不操作dom，修改数据 -->
  12.             <h2 @click="changeFood">{{ food }}</h2>
  13.         </div>
  14.         <script>
  15.             var app = new Vue({
  16.                 el:"#app",
  17.                 data: {
  18.                     food:"番茄",
  19.                 },
  20.                 methods: {
  21.                     doIt: function(){
  22.                         alert("方法测试");
  23.                     },
  24.                     changeFood:function(){
  25.                         console.log(this.food);
  26.                         this.food += '好吃';
  27.                     }
  28.                 },
  29.             });
  30.         </script>
  31.     </body>
  32. </html>

综合小实例，计数器。

  1. <html>
  2.     <head>
  3.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  4.     </head>
  5.     <body>
  6.         <div id="app">
  7.             <div class="input-num">
  8.                 <button @click="sub">-</button>
  9.                 <span>{{ num }}</span>
  10.                 <button @click="add">+</button>
  11.             </div>
  12.         </div>
  13.         <script>
  14.             var app = new Vue({
  15.                 el:"#app",
  16.                 data: {
  17.                     num: 0,
  18.                 },
  19.                 methods: {
  20.                     add:function(){
  21.                         if(this.num < 10){
  22.                             this.num++;
  23.                         }else{
  24.                             alert('已经达到最大值');
  25.                         }                        
  26.                     },
  27.                     sub:function(){
  28.                         if(this.num > 0){
  29.                             this.num--;
  30.                         }else{
  31.                             alert('已经到达最小值');
  32.                         }
  33.                     }
  34.                 },
  35.             });
  36.         </script>
  37.     </body>
  38. </html>

显示切换、属性绑定

v-show根据表达式的真假，切换元素的显示隐藏状态。本质上是切换display属性。

  1. <html>
  3. <head>
  4.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  5. </head>
  7. <body>
  8.     <div id="app">
  9.         <input type="button" value="切换显示状态" @click="changeIsShow">
  10.         <img v-show="isShow" src="https://i0.hdslb.com/bfs/archive/e62b6b095ef38dfb742687f11e4b570dde420b5d.png" alt="">
  11.         <img v-show="age>=18" src="https://i0.hdslb.com/bfs/archive/e62b6b095ef38dfb742687f11e4b570dde420b5d.png" alt="">
  12.     </div>
  13.     <script>
  14.         var app = new Vue({
  15.             el: "#app",
  16.             data:{
  17.                 isShow: false,
  18.                 age: 18
  19.             },
  20.             methods: {
  21.                 changeIsShow:function(){
  22.                     this.isShow = !this.isShow;
  23.                 }
  24.             },
  25.         });
  26.     </script>
  27. </body>
  29. </html>

v-if根据表达式的真假，切换元素的显示和隐藏，本质是操作dom元素的移除或添加，并非切换样式。表达式最终会解释为布尔值。

  1. <html>
  3. <head>
  4.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  5. </head>
  7. <body>
  8.     <div id="app">
  9.         <input type="button" value="切换显示状态" @click="toggleIsShow">
  10.         <p v-if="isShow">v-if测试</p>
  11.         <p v-show="isShow">v-show测试</p>
  12.     </div>
  13.     <script>
  14.         var app = new Vue({
  15.             el: "#app",
  16.             data: {
  17.                 isShow: false,
  18.             },
  19.             methods: {
  20.                 toggleIsShow: function () {
  21.                     this.isShow = !this.isShow;
  22.                 }
  23.             },
  24.         });
  25.     </script>
  26. </body>
  28. </html>

v-bind设置元素的属性，src、class，使用方式为v-bind:属性=值，可以省略指令，直接用冒号拼接属性值。设置class可以通过三元表达式或者用对象的方式来设置，推荐用后者。

  1. <html>
  3. <head>
  4.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  5.     <style>
  6.         .active{
  7.             border: 1px solid red;
  8.         }
  9.     </style>
  10. </head>
  12. <body>
  13.     <div id="app">
  14.         <img v-bind:src="imgSrc" alt="">
  15.         <br>
  16.         <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
  17.         <br>
  18.         <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
  19.     </div>
  20.     <script>
  21.         var app = new Vue({
  22.             el: "#app",
  23.             data: {
  24.                 imgSrc:"https://i0.hdslb.com/bfs/archive/e62b6b095ef38dfb742687f11e4b570dde420b5d.png",
  25.                 imgTitle: "vbind测试",
  26.                 isActive: false,
  27.             },
  28.             methods: {
  29.                 toggleActive:function(){
  30.                     this.isActive = !this.isActive;
  31.                 }
  32.             },
  33.         });
  34.     </script>
  35. </body>
  37. </html>

轮播图实例

  1. <html>
  3. <head>
  4.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  5. </head>
  7. <body>
  8.     <div id="mask">
  9.         <div class="center">
  10.             <!-- 左箭头 -->
  11.             <!-- <a href="javascript:void(0)" @click="prev" class="left">
  12.                 <img src="" alt="">
  13.             </a> -->
  14.             <input type="button" value="←" v-show="index!=0" @click="prev">
  16.             <!-- 图片 -->
  17.             <img :src="imgArr[index]" alt="">
  19.             <!-- 右箭头 -->
  20.             <!-- <a href="javascript:void(0)" @click="next" class="right">
  21.                 <img src="" alt="">
  22.             </a> -->
  23.             <input type="button" value="→" v-show="index<imgArr.length-1" @click="next">
  24.         </div>
  25.     </div>
  27.     <script>
  28.         var app = new Vue({
  29.             el:"#mask",
  30.             data:{
  31.                 imgArr:[
  32.                     "https://i0.hdslb.com/bfs/archive/23f7ccf8b4cb143c6af7e6dc8534283bef293cb4.jpg@321w_182h_1c_100q.webp",
  33.                     "https://i0.hdslb.com/bfs/archive/6a85c04866e27c51929c289dcef3011cb5db1d5f.jpg@321w_182h_1c_100q.webp",
  34.                     "https://i2.hdslb.com/bfs/archive/90b09328d7daaa6fbff5002d25a311ada086f21b.jpg@321w_182h_1c_100q.webp"
  35.                 ],
  36.                 index:1
  37.             },
  38.             methods: {
  39.                 prev:function(){
  40.                     console.log(this.index);
  41.                     this.index--;
  42.                 },
  43.                 next:function(){
  44.                     this.index++;
  45.                 }
  46.                 
  47.             },
  48.         })
  49.     </script>
  50. </body>
  52. </html>

列表循环、表单元素绑定

v-for根据数据生成列表结构，经常和数组结合使用，语法是(item, index) in 数据，数组内容的更新会同步到页面上。

  1. <html>
  3. <head>
  4.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  5. </head>
  7. <body>
  8.     <div id="app">
  9.         <ul>
  10.             <li v-for="(item,index) in arr">
  11.                 {{ index + 1}} 地点：{{ item }}
  12.             </li>
  13.         </ul>
  14.         
  15.         <input type="button" value="添加数据" @click="add">
  16.         <input type="button" value="移除数据" @click="remove">
  17.         <h2 v-for="item in vegetable" v-bind:title="item.name">
  18.             {{ item.name }}
  19.         </h2>
  20.         
  21.     </div>
  22.     <script>
  23.         var app = new Vue({
  24.             el: "#app",
  25.             data:{
  26.                 arr:["Beijing", "ShangHai", "GuangZhou"],
  27.                 vegetable:[
  28.                     {name:"西兰花炒蛋"},
  29.                     {name:"蛋炒西兰花"}
  30.                 ]
  31.             },
  32.             methods: {
  33.                 add:function(){
  34.                     this.vegetable.push({name:"🥦"})
  35.                 },
  36.                 remove:function(){
  37.                     this.vegetable.shift();
  38.                 }
  39.             },
  40.         });
  41.     </script>
  42. </body>
  44. </html>

v-on补充内容，传递自定义参数、事件修饰符。

  1. <html>
  3. <head>
  4.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  5. </head>
  7. <body>
  8.     <div id="app">
  9.         <input type="button" value="点击" @click="doIt(666, '老铁')">
  10.         <input type="text"  @keyup.enter="sayHi">
  11.     </div>
  12.     <script>
  13.         var app = new Vue({
  14.             el: "#app",
  15.             methods: {
  16.                 doIt:function(p1, p2){
  17.                     console.log('do it');
  18.                     console.log(p1);
  19.                     console.log(p2);
  20.                 },
  21.                 sayHi:function(){
  22.                     alert("吃了没？");
  23.                 }
  24.             },
  25.         });
  26.     </script>
  27. </body>
  29. </html>

v-model获取和设置表单元素的值（双向数据绑定）

  1. <html>
  3. <head>
  4.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  5. </head>
  7. <body>
  8.     <div id="app">
  9.         <input type="text" v-model="message" @keyup.enter="getM">
  10.         <h2>{{ message }}</h2>
  11.     </div>
  12.     <script>
  13.         var app = new Vue({
  14.             el: "#app",
  15.             data:{
  16.                 message:"双向数据绑定 VUE全响应数据开发"
  17.             },
  18.             methods: {
  19.                 getM:function(){
  20.                     alert(this.message);
  21.                 }
  22.             },
  23.         });
  24.     </script>
  25. </body>
  27. </html>

本地应用 记事本

没有写样式，只用了几个按钮：

  1. <html>
  3. <head>
  4.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  5. </head>
  7. <body>
  8.     <div id="app">
  9.         <p>输入回车自动记录</p>
  10.         <input type="text" v-model="message" @keyup.enter="addNote(message)">
  11.         <input type="button" value="删除全部" @click="deleteAll" v-show="todos.length!=0">
  12.         <br>
  13.         <h3 v-text="'待办总数' + todos.length" v-if="todos.length != 0"></h3>
  14.         <ul>
  15.             <li v-for="(item, index) in todos">
  16.                 {{index}} {{ item }}
  17.                 <input type="button" value="×" @click="deleteOne(index)">
  18.             </li>
  19.         </ul>
  20.     </div>
  21.     <script>
  22.         var app = new Vue({
  23.             el: "#app",
  24.             data: {
  25.                 message: "输入待办",
  26.                 todos:['写代码', '备考']
  27.             },
  28.             methods: {
  29.                 deleteAll:function(){
  30.                     // this.todos.splice(0);
  31.                     this.todos = [];
  32.                 },
  33.                 addNote:function(message){
  34.                     this.todos.push(message);
  35.                 },
  36.                 deleteOne:function(index){
  37.                     this.todos.splice(index, 1);
  38.                 }
  39.             },
  40.         });
  41.     </script>
  42. </body>
  44. </html>

网络

axios引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用的api：https://github.com/AutumnFish/testApi

需要注意axios回调函数中的this已经改变，不能访问VUE实例中的数据。可以先把this保存起来，在回调函数中使用保存的this。

https://autumnfish.cn/歌曲相关api