title: Vue學(xué)習(xí)
date: 2020-12-06 20:23:50
tags: [隨筆,Vue學(xué)習(xí),入門]
top: 4

Vue筆記

以下是我最近學(xué)習(xí)Vue的總結(jié),現(xiàn)在分享給大家赁项，望給大家?guī)硎斋@冗疮！

一.基本指令的使用

1.v-once ---vue屬性

動(dòng)態(tài)渲染數(shù)據(jù)暮现，當(dāng)數(shù)據(jù)改變時(shí)顽爹，第二次的數(shù)據(jù)仍然是第一次的數(shù)據(jù)，并不會(huì)跟之刷新瑰妄。

1604244244604

2.v-html ---vue屬性

當(dāng)后臺(tái)傳過來數(shù)據(jù)之后原本是string文本（<a >這是連接</a>）,想把數(shù)據(jù)在頁面中展示則需要荚守，使用v-html屬性

1604244738486

3.v-text ---vue屬性

v-text屬性會(huì)把文本節(jié)點(diǎn)中的相關(guān)屬性替換掉，

1604244910084

4.v-pre ---vue屬性

這個(gè)屬性不會(huì)對(duì)插值表達(dá)式進(jìn)行匹配泣矛，原封不動(dòng)的將內(nèi)容直接 渲染到網(wǎng)頁上來

1604245265331

5.v-clock ---vue屬性

這個(gè)屬性就是處理網(wǎng)速過慢時(shí),網(wǎng)頁上渲染出差值表達(dá)式的解決辦法

<style> [v-clock]{
    display:none;
}

1604245698484

6.v-bind ---vue屬性--動(dòng)態(tài)綁定class屬性

①通過給屬性加上對(duì)象的方式,{}-------對(duì)象語法

格式:{類名1:boolean,類名2:boolean,類名3:boolean}

<h2 :class="{activity:isactivity,line:isline}">測(cè)試</h2>

1604284082603

②通過給屬性加上數(shù)組的方式,[]-------數(shù)組語法

方法一：這種方式會(huì)把類寫死，不建議使用
<h2 :class="['activity','line']">測(cè)試</h2>
方法二：將數(shù)組里面的冒號(hào)去掉,采用動(dòng)態(tài)綁定
<h2 :class="[activity,line]">測(cè)試</h2>
在data里面指明activity指向的類以及isline指向的類

1604284995497

7.v-bind ---vue屬性--動(dòng)態(tài)綁定style屬性

①通過給屬性加上對(duì)象的方式,{}-------對(duì)象語法

格式：{key（屬性名）:value（屬性值）}
<h2 :style="{fontSize:'50px'}">測(cè)試</h2>
注意：屬性值要加冒號(hào)否則會(huì)以變量值處理

②通過給屬性加上數(shù)組的方式,[]-------數(shù)組語法

<h2 :style="[basestyle,basestyle1]">測(cè)試</h2>
在data里面指明basestyle指向的對(duì)象以及basestyle1指向的對(duì)象
data{
    basestyle：{
        color:'#333',
        fontSize:'18px',
    }
}

8.==計(jì)算屬性== ----computed計(jì)算屬性

computed:{
    fullName:function(){
        return this.firstName+this.secondName;
    }
}

computed計(jì)算屬性中引申的 ES6——for語法

for(book of this.books){
    book            //即為該books里面的每一個(gè)對(duì)象的值禾蚕，也即每一本書的屬性的集合
}

computed計(jì)算屬性中的get---

computed之所以調(diào)用的時(shí)候不用加上()的原因就是computed默認(rèn)會(huì)直接調(diào)用get 函數(shù)

1604293016004

computed函數(shù)中的set函數(shù)

set:function(newdata){
        newdata //里面就是為它設(shè)置的值  列如:app.fullName="zhang san"


}

1604294698882

==computed中優(yōu)點(diǎn)是有緩存作用,當(dāng)數(shù)據(jù)不發(fā)生改變的時(shí)候多次調(diào)用時(shí)只會(huì)執(zhí)行一次該代碼,==

9.v-on ----vue屬性的使用

• 1.當(dāng)調(diào)用的方法不傳遞任何參數(shù)的時(shí)候

  <button @click="func"</button>
  
  var app=new Vue({
      
     methods{
         func(event){
             console.log(event)  //此處的event是vue默認(rèn)傳遞進(jìn)來的參數(shù)
         }
     } 
  }
  )
  
  

• 2.當(dāng)調(diào)用的函數(shù)需要一些參數(shù)的時(shí)候 傳遞vue默認(rèn)的event的時(shí)候要==$event==

  • <button @click="func(123,$event)"</button>
    
    var app=new Vue({
        
       methods{
           func(data,event){
               console.log(data+event)  //此處的event是vue默認(rèn)傳遞進(jìn)來的參數(shù)
           }
       } 
    }
    )
    
    

• 3.onclick的相關(guān)的修飾符

  • stop---阻止冒泡
  • pre----阻止默認(rèn)行為
  • @click.keydown.enter
  • once---只允許事件觸發(fā)一次

10.v-for ---vue指令

• 1.在遍歷對(duì)象的 時(shí)候遍歷出來的值 遍歷出來的結(jié)果是==value值==

  • <ul>
        <li v-for="item in list"></li>
    </ul>   
    
    var app=new Vue({
        data:{
            list{
                name:"張三",
                age：18,
                
            }
        }
    })
    

  • 2.遍歷鍵的時(shí)候加上(value,key)

  • 3.遍歷鍵同時(shí)遍歷下標(biāo)的時(shí)候加上(value,key,index)

    
    
    1604327020768

11.哪些 數(shù)組的方法是支持?jǐn)?shù)據(jù)動(dòng)態(tài)渲染

• 操作數(shù)組的相關(guān)的方法
  • push ----往數(shù)組最后面添加數(shù)據(jù)
  • pop ----在數(shù)組中刪除最后面的數(shù)據(jù)
  • shift ----刪除第一個(gè)數(shù)據(jù)
  • unshift ---在數(shù)組中第一個(gè)位置添加數(shù)據(jù)

  • splice-----刪除指定數(shù)組位置的 參數(shù)一(1,2) --指明從下標(biāo)為1的位置刪除兩個(gè) 參數(shù)二(1,0,"張三") 則表明是在第一個(gè)個(gè)位置的后面添加張三該值
    1604328959531
  • reverse ----翻轉(zhuǎn)函數(shù)
  • Vue.set(this.letters,0,"bbbb") //將第一個(gè)元素修改為bbbb

12.filter過濾器的基本使用

• <td>{{item.price | showPrice}}
  
  var app=new Vue({
      
      filters:{
          showPrice(data){
              return "￥" +data.toFixed(2)乳蓄；
          }
      }
  })
  

13.v-model函數(shù)的基本應(yīng)用

• v-model函數(shù)實(shí)現(xiàn)(兩步走)的辦法 -------input(==text)== 中有一個(gè)事件綁定為==input==可以實(shí)現(xiàn)每次觸發(fā)輸入時(shí)候的函數(shù)

  <input type="text" v-model="message">
  //雙向綁定實(shí)現(xiàn)了兩個(gè)指令
  <input type="text" :value="message" @input="changetigger">
  var app=new Vue({
      data:{
          message:"這是數(shù)據(jù)"
      },
      methods{
          changetigger(event){
              this.message=event.target.value
          }    
      }
  })
  

• v-model函數(shù)中input（radio）的基本使用 ==當(dāng)v-model都指向同一個(gè)屬性的時(shí)候就可以省略name==

  • <label for="boy">
        <input type="radio" value="男" id="boy" name="sex" v-model="sex"/>
    </label>
    <label for="girl">
        <input type="radio" value="男" id="girl" name="sex" v-model="sex"/>
    </label>
    
    
    vm中的sex就會(huì)根據(jù)選擇從而判斷出是選中了哪一個(gè)
    
    

• v-model函數(shù)中input(checkbox)==單選框==的基本使用見下圖:單選框保存的是==boolean==

  • 1604382128288

• v-model中多選框 的基本使用(綁定的是時(shí)候綁定一個(gè)==數(shù)組==即可)列

  1604382373382

• v-model中關(guān)于select的使用

  select(單選時(shí)候) 注意的是無論單選還是多選都是select上面添加v-model 而非option

  1604401783978

14.修飾符

• lazy

  • 此修飾符在動(dòng)態(tài)綁定屬性值得時(shí)候，不會(huì)實(shí)時(shí)觸發(fā)該數(shù)據(jù)(該數(shù)據(jù)不會(huì)實(shí)時(shí)改變)唯有按下回車或者該輸入框失去焦點(diǎn)的時(shí)候才會(huì)觸發(fā)

  • <input type="text" v-model.lazy="message">
    

• number

  • 1.改修飾符可以控制文本中只能輸入數(shù)字不可以輸入別的東西

  • 2.改修飾符可以將v-model默認(rèn)綁定上去的字符串值(String類型)改為number類型

    <input type="number" v-model.number="age"
    {{typeof age}}
    

• trim---去掉字符兩邊的空格

  • <input type="text" v-model.trim="message">
    

二.ES6的基本語法

1.var與let的區(qū)別

在es5時(shí)候（for/if）沒有塊級(jí)作用域,

在es6之后使用(let)就有塊級(jí)作用域,該變量在這一塊級(jí)中才有效夕膀，并且規(guī)范是當(dāng)與父級(jí)作用域沖突時(shí)塊級(jí)作用域中有的變量會(huì)優(yōu)先使用本塊級(jí)中的變量

列如:

需求：分別給五個(gè)按鈕添加點(diǎn)擊事件并且點(diǎn)擊的時(shí)候告知瀏覽器分別點(diǎn)擊了哪一個(gè)按鈕

• es5 方法--最普通的方法

  • 1604319959995

• es5方法 --閉包方式解決問題

  • 1604320044689

• es6方法 --let語法

  • [圖片上傳失敗...(image-41768c-1609129997910)]

  2.const使用

• 使用規(guī)則

  • 一旦賦值不可修改

  • 聲明時(shí)候必須先賦值

  • const中只能一次地址不能改變,const聲明變量后賦值的值虚倒，其實(shí)那個(gè)值也是一個(gè)對(duì)象(==字符長(zhǎng)量也是一個(gè)對(duì)象==),const聲明的那個(gè)變量中存放的則是改變量的地址，

  • ==常量的含義是指向的對(duì)象不能改變产舞，但是可以改變指向的對(duì)象中的屬性==

  • img

    3.函數(shù)的增強(qiáng)寫法

• 規(guī)則

  • const obj={
        name,
        age,
        add
    }
    

  • 函數(shù)的增強(qiáng)寫法

    const obj={
        run(){
            
        },
        eat(){
            
        }
    }
    

三.button的相關(guān)的屬性

1.disable屬性的相關(guān)的應(yīng)用

• 結(jié)合v-bind使用disable相關(guān)的操作(當(dāng)符合某要求時(shí),為相關(guān)的disable設(shè)置對(duì)應(yīng)的false/true)
• 按鈕可以結(jié)合splice函數(shù)的使用

四.javaScript高階函數(shù)

• 編程范式:命令式編程/聲明式編程
• 面向?qū)ο笫骄幊?面向函數(shù)式編程
• ==filter/map/reduce==

1.filter

• filter回調(diào)函數(shù)當(dāng)中必須返回一個(gè)boolean值

• 當(dāng)返回boolean值得時(shí)候會(huì)將傳入的值保存在另外一個(gè)新的數(shù)組當(dāng)中魂奥，只需要做一下接受即可

  const nums=[10,20,111,222,333,444]
  let newNums=nums.filter(function(n){
    //如果符合條件的話,n就會(huì)自動(dòng)加到新的數(shù)組當(dāng)中
      return n<100
  })
  

2.map

• map函數(shù)---將數(shù)組中的分別數(shù)值全部乘于*2

• let new2Nums=newNums.map(function(n){
      return n*2
  })
  

3.reduce函數(shù)

• reduce函數(shù)作用將數(shù)組中的所有的內(nèi)容進(jìn)行匯總

• reduce函數(shù)有兩個(gè)參數(shù)(function（）,參數(shù)二)

  // 20 40 80 100
  
  new2Nums.reduce(function(preValue,n){
      return preValue+n
  },0)
  //第一次  preValue 0  n 20 
  //第二次  preValue 20 n 40
  //第三次  preValue 60 n 80
  //第四次  preValue 140 n 100
  

4.組件中的通信

1.父?jìng)髯? ---通信

• 傳數(shù)據(jù)

  • 通過:son="father" 來綁定數(shù)據(jù) ，并且在子組件中應(yīng)該定義一個(gè)props：[]屬性

  • 1604409034811

  • props接受值的類型

  • props:["cmovies","cmessage"]
    props{
        //2.props限制數(shù)值類型
        cmovies:Array,
        cmessage:String
        //3.提供一些默認(rèn)值
        cmessgae:{
            type:String,
            default:"aaaa",
            require:true   //必須的易猫，必要得耻煤，必須傳遞該數(shù)據(jù)
        }
        //4.默認(rèn)值是數(shù)組或者是對(duì)象(object)時(shí)，默認(rèn)值必須是一個(gè)對(duì)象(函數(shù))且返回
        cmovie:{
            type:Array/Object,
            default(){
                return []
            }  
        }
    }
    

2.子傳父 ----通訊

• 先通過事件綁定機(jī)制,@son="father"綁定到組件當(dāng)中

• ==可以將事件的event傳遞給父組件==

• ==默認(rèn)可以把整個(gè)點(diǎn)擊的對(duì)象傳遞給父組件==

• <cpn @son="father"></cpn>
  //父組件中的app實(shí)例
  <button @click="sonfun">
  var app=new Vue({
      methods:{
          father(event){
              console.log(event)
          }
      }  
  })
  
  //子組件中的實(shí)例var son={
      template："#cpn",
      methods:{
          sonfun(event){
              this.$emit("father",event)
          }
      }  
  }
  

3.父子組件准颓，父組件==直接==獲取子組件

• this.$children----在父組件中使用該屬性就獲取到所有的子組件

• 為需要綁定的組件當(dāng)中設(shè)置ref

  • <cpn ref="aaa"></cpn>
    
    父組件中:this.$refs.aaa.name即可使用子組件中相關(guān)的值
    

4.子組件直接獲取到父組件以及根組件

• this.$parent
• this.$root

五.vue組件的高級(jí)語法--slot插槽

• 用法一 基本用法

  • <cpn></cpn>   //什么也不填的時(shí)候會(huì)默認(rèn)slot里面的內(nèi)容
    <cpn><span>哈哈哈</span></cpn>
    <cpn><i>哈哈哈</i></cpn>
    
    <cpn></cpn>
    <cpn></cpn>
    <cpn>          //若插入多個(gè)元素則都會(huì)一并全部替換slot
        <i>呵呵呵</i>
        <span>呵呵呵</span>
        <p>我是p元素</p>
    </cpn>  
    
    <template id="cpn">
    <div>
        <h2>我是組件</h2>
        <slot><button>按鈕</button></slot>
    </div>
    </template>
    

    1604504510342

  • <div id="app">
    <cpn><span slot="center">標(biāo)題</span></cpn>
    </div>   //可以專門替換name為center的插槽
    
    <template id="cpn">
    <div>
      <slot name="left"><span>左邊</span></slot>
        <slot name="center"><span>中間</span></slot>
          <slot name="right"><span>右邊</span></slot>
    </div>
    
    </template>
    
    

• 用法二: 插槽作用域的用法

  ==父組件替換子組件的標(biāo)簽,內(nèi)容由子組件提供==

1605185611217

六.三種模塊化開發(fā)方式

1.封裝對(duì)象類型 -----es5寫法

1605187123532

2.module寫法 module.exports ----------commonjs

1605187491972

3.es6模塊化

導(dǎo)出的方式

1. export{

   flag,sum

   }

2.export var num=1000;

3.export funcion(){}

4.export class Person{}

5.export default ----- 導(dǎo)入的方式 Import aaa from ‘....’

導(dǎo)入的方式

1.imporst {flag,sum} from '...........'

2.import * as all from '..........' 全部導(dǎo)入 all.flag

This is my Git ?? https://88888888.com

關(guān)于我

• 個(gè)人博客
• 技術(shù)筆記
• GitHub
• 碼云
• 簡(jiǎn)書
• CSDN
• 知乎
• 微博
• 主要涉及技術(shù)：Java后端開發(fā)哈蝇、聚合支付、公眾號(hào)開發(fā)攘已、開源愛好者炮赦、Linux