SuperXXA的Vue的极限学习-day1

vue学习笔记

☀️第一天

1.指令

1. v-once：只渲染一次，后面无法改动

2. v-html：将文本解析成html

3. v-pre：将标签里东西原样显示

4. v-cloak：斗篷，掩盖未解析的代码

5. v-bind：动态绑定值

6. 语法糖：‘：’

   • 动态绑定class（对象语法）：

     <div id="app">
         <div :class="{active:isActive,hide:isHide}">hello</div>
     </div>
     <script>
       let app = new Vue({
         el: '#app',
         data: {
           isActive:true,
           isHide:false
         }
       })
     </script>
     
     

   • 也可以加上自己的类名，vue会自动合并

     <div class="style1" :class="{active:isActive,hide:isHide}">hello</div>
     

   • 动态绑定class（数组语法）：

     <div class="style1" :class="[style1,style2]">hello</div>
     

   • 动态绑定style（对象语法）：

     <div id="app" v-cloak>
         <div :style="{fontSize:fontSize+'px'}">hello</div>
     </div>
     <script>
       let app = new Vue({
         el: '#app',
         data: {
           fontSize:100
         }
       })
     </script>
     

2.计算属性

1. 使用方法

   <div id="app">
       <div>{{total}}</div>
   </div>
   <script>
       let app = new Vue({
         el:'#app',
         data:{
           num1:50,
           num2:100
         },
         computed:{
           total() {
               return this.num1+this.num2
           }
         }
       })
   </script>
   

3.事件监听

1. v-on：用作监听一些事件
2. 传参问题：
   • 在事件监听中，若无参数，函数的括号可以省略
   • 若不加括号，函数形参可以接收event
   • 若同时需要event和一个用户自定义参数，需要传参$event
3. v-on语法糖：@
4. v-on的修饰符：例（@click.stop=“btnClick”）
   • stop：阻止事件冒泡
   • prevent：阻止默认事件，例如表单提交
   • enter：与按键监听事件配合使用，当回车按下触发
   • once：触发一次之后监听失效

4.条件判断

1. v-if、v-else、v-else-if
2. v-if和v-show的区别在于前者直接决定dom节点是否存在，后者加上display：none的样式
   • 如何选择：切换频率高，选择v-show，反之

出现vue底层复用代码时，应当给dom节点加上唯一key

5.v-for遍历

1. 遍历数组使用方法：
   • 未使用下标值：v-for=“item in list”
   • 获取下标值：v-for="(item,index) in list"
2. 遍历对象使用方法：
   • 遍历属性值：v-for=“value in person”
   • 获取key、下标值：v-for="(value,key,index) in person"

遍历时绑定key可以提升复用性，提升性能

6.数组的响应式

响应式的：

1. push：最后添加一个或多个
2. pop：删除最后一个
3. shift：删除第一个
4. unshift：最前面添加一个或多个元素
5. splice：
   • 删除元素：参数一为开始下标，参数二为结束，没有则闪到最后
   • 替换元素：在1的基础上后面加上删除后要插入的元素
   • 插入元素：在二的基础上第二个参数为0，也就是不删除
6. sort：排序
7. reverse：翻转

非响应式的：

1. list[0]=1

7.vue中的过滤器

1. 本质上是一个函数，是一个option

   <div id="app">
   {{price | showPrice}}
   </div>
   <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
   <script>
       let app = new Vue({
         el:'#app',
         data:{
           price:25.2
         },
         filters:{
           showPrice(p){
             return '$'+p.toFixed(2)
           }
         }
       })
   </script>
   

8.高阶函数

1. 数组的filter

   const list=[10,500,30,150,80]
       let newNumbers = list.filter(function (n) {
           return n<100
       });
       /*以上代码会过滤出小于100的数*/
   

2. 数组中的map

   let newNumbers2 = list.map(function (n) {
           return n*2
       });
       alert(newNumbers2)
       /*以上代码会将每个元素做一些操作*/
   

3. 数组的reduce

   let total = list.reduce(function (pre, now) {
           return pre+now
       });
       /*以上代码遍历数组，对上一次值操作*/
   

4. 箭头函数

   let number = list.filter(n => n < 100).map(n => n * 2).reduce((pre, now) => {
       if ((pre+now)<280){
         return pre+now
       }else {
         return pre
       }
     });
   

9.表单双向绑定v-model

1. 将表单的value和data中的值绑定

2. 特例：radio单选框

   <div id="app">
       <input type="radio" v-model="gender" value="男">男
       <input type="radio" v-model="gender" value="女">女
       <br>
       {{gender}}
   </div>
   
   <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
   <script>
       let app = new Vue({
         el:'#app',
         data:{
           gender:'男'
         }
       })
   </script>