vue基礎

vue 是一個構建用戶界面的漸進式的 javascript 框架

漸進式：逐漸增強，vue不強求你一次性在網(wǎng)站中運用學習所有的語法韭畸，可以學一點用一點

庫：本質上是一些方法的集合堰酿。每次調用方法，實現(xiàn)一個特定的功能如 axios

框架：是一套完整的解決方案∥翟迹框架實現(xiàn)了大部分的功能坑赡，我們需要按照框架的規(guī)則寫代碼如 vue

Vue是一個MVVM的框架（MVVM：一種軟件架構模式）

是一種簡化用戶界面事件驅動的編程方式

M：model數(shù)據(jù)模型(ajax獲取到的數(shù)據(jù))

V：view視圖（頁面）

VM：ViewModel 視圖模型 (操作視圖+模型）是mvvm的核心烙如，將數(shù)據(jù)和實圖進行雙向綁定

MVVM通過數(shù)據(jù)雙向綁定讓數(shù)據(jù)自動地雙向同步

V（修改視圖） -> M（數(shù)據(jù)自動同步）

M（修改數(shù)據(jù)） -> V（視圖自動同步）

一方面修改，另一方面跟著修改毅否，不用手動的操作dom元素

之前的思想亚铁，原生 dom驅動。無論修改什么頁面內容螟加，先找對象徘溢，操作dom。

現(xiàn)在的思想仰迁，vue 數(shù)據(jù)驅動甸昏。想更新視圖，直接操作數(shù)據(jù)即可徐许。數(shù)據(jù)變化施蜜，視圖自動更新

vue組件化思想

組件化：也就是vue頁面一個組件會包含（HTML+CSS+JS），完整的頁面可以拆分成多個組件

組件化的優(yōu)點：

容易維護
便于復用（HTML+CSS+JS）

@vue/cli 腳手架的使用

傳統(tǒng)開發(fā)模式：基于html/css/js文件開發(fā) vue
工程化開發(fā)方式：在webpack環(huán)境中開發(fā)vue雌隅。（推薦翻默，學習+項目）

vue腳手架

@vue/cli 也叫 vue腳手架, @vue/cli 是vue官方提供的一個全局命令工具

這個命令可以幫助我們快速的創(chuàng)建一個vue項目的基礎架子

vue腳手架的好處

開箱即用
零配置（不用你配webpack）
內置babel等工具

vue腳手架的基本使用

全局安裝：(一次安裝之后直接創(chuàng)建文件)
npm i @vue/cli -g 或 yarn global add @vue/cli
查看vue版本：
vue --version
初始化一個vue項目：
vue create 項目名（不能用中文）
啟動項目, 打包項目
```
 npm run serve

 npm run build
```

我們在項目無法找到webpack.config.js文件，因為vue把它隱藏了

如果需要覆蓋webpack的配置恰起，可以修改vue.config.js文件修械，覆蓋webpack配置

腳手架里的主要文件的作用

node_modules – 下載的第三方的包

public/index.html – 運行的瀏覽器網(wǎng)頁

src/main.js – webpack打包的入口

src/App.vue – vue頁面的入口

package.json – 依賴包列表文件

public/index.html不用動，提供一個最基礎的頁面

src/main.js不用動检盼，渲染了App.vue組件

src/App.vue默認有很多的內容肯污，可以全部刪除

assets 文件夾和 components 中的可以直接刪除

.vue文件

單文件組件：一個 .vue 文件就是一個組件

安裝插件（語法高亮）vetur
一個單文件組件由三部分組成
template：結構（有且只能一個根元素）
script: js邏輯
style：樣式
讓組件支持 less
（1） style標簽， lang=“l(fā)ess”吨枉，開啟less功能
```
（2） 裝包： yarn  add  less-loader@7.2.1  less  -D
```

vue插值表達式

vue提供數(shù)據(jù)

通過 data 屬性可以提供數(shù)據(jù)蹦渣， data屬性必須是一個函數(shù)
這個函數(shù)需要返回一個對象，這個對象就代表vue提供的數(shù)據(jù)

export default {
  data(){
    return {
       name : "張三"
    }
  }
}

使用插值表達式貌亭，可以在模板中渲染數(shù)據(jù)

<template>
<div>
    {{ name }}
</div>
</template>

插值表達式：小胡子語法 {{ }}

作用: 使用 data 中的數(shù)據(jù)渲染視圖（模板）
支持基本語法, 支持三元運算符變量對象.屬性方法
注意點：
（1）使用數(shù)據(jù)在 data 中必須存在
（2）能使用表達式柬唯，但是不能使用語句 if for ...
（3）不能在標簽屬性中使用 {{ }} 插值

vue指令

vue指令: 特殊的 html 標簽屬性, 特點: v- 開頭

每個 v- 開頭的指令, 都有著自己獨立的功能, 將來vue解析時, 會根據(jù)不同的指令提供不同的功能

vue指令-v-bind

說明：插值表達式不能用在html的標簽屬性上，想要動態(tài)的設置html標簽屬性圃庭，需要使用v-bind指令

作用：動態(tài)的設置html的標簽屬性

語法： v-bind:屬性名="值"

簡寫： :屬性名="值"

<template>
<!-- template中只有一個根標簽 -->
<div>
  <!-- vue 的指令 v-bind： 開頭 -->
  <input type="text" v-bind:value = "value">
  <br>
  <input type="text" :value ="value">
  <br>
  <a v-bind:href = 'url'>點擊跳轉1</a>
  <br>
  <a :href = 'url'>點擊跳轉2</a>
</div>
</template>

<script>
export default {
  name : 'app', 
  // data必須是一個函數(shù)锄奢，并且必須要返回一個對象失晴，數(shù)據(jù)就在返回的對象里
  data(){
    return{
      value : '請輸入姓名',
      url : 'http://www.reibang.com/'
    }
  }
}
</script>

vue指令-v-on

作用：注冊事件

語法：

v-on:事件名=“要執(zhí)行的少量代碼"
v-on:事件名=“methods中的函數(shù)名"
v-on:事件名=“methods中的函數(shù)名(實參)"

注意：事件處理函數(shù)在methods中提供

簡寫：v-on 可以簡寫成 @

<template>
<!-- template中只有一個根標簽 -->
<div>
  <!-- 注冊事件 vue指令 v-on:事件名 = ‘要執(zhí)行的代碼’ -->
 <!-- 簡寫：v-on 可以 簡寫 成 @ -->
 <h3>{{ money }}</h3>
 <!-- 點擊加10 -->
 <button v-on:click = 'money+=10'>+10</button>
 <!-- 簡寫 -->
 <button @click = 'money+=10'>+10簡寫</button>
 <br>
 <!-- 點擊加100，使用方法 -->
 <button v-on:click = 'addmoney'>+100</button>
 <!-- 加100簡寫 -->
 <button @click = 'addmoney'>+100簡寫</button>
 <br>
 <!-- 多個不同的按鈕調用方法 -->
 <button @click = 'moneys(200)'>+200</button>
 <button @click = 'moneys(500)'>+500</button>
 <button @click = 'moneys(1000)'>+1000</button>
 <button @click = 'moneys(10000)'>+10000</button>
</div>
</template>

<script>
export default {
  name : 'app', 
  // data必須是一個函數(shù)拘央，并且必須要返回一個對象涂屁，數(shù)據(jù)就在返回的對象里
  data(){
    return{
      money : 10
    }
  },
  //   事件處理函數(shù)在methods中提供 
  methods: {
    // 在methods中引用data里的變量需要使用this
    addmoney(){
       this.money += 100
    },
    // 有參數(shù)的方法可以根據(jù)需求給多個標簽調用
    moneys(num){
       this.money += num
    },
  }
}
</script>

vue中阻止默認事件

正常阻止默認事件

語法：事件對象.preventDefault()

vue中獲取事件對象

(1) 沒有傳參, 通過形參接收 e

(2) 傳參了, 通過$event指代事件對象 e

<template>
<div>
<!-- 阻止事件默認行為 -->
<!-- 沒有參數(shù)時 -->
<a href="http://www.reibang.com/" @click = 'fn'>沒有參數(shù)</a>
<br>
<br>
<!-- 有參數(shù)時 -->
<a href="http://www.reibang.com/" @click="fns(10,$event)">有參數(shù)</a>
</div>
</template>
<script>
 methods: {    
    // 沒有傳參時，直接設置事件對象堪滨，然后阻止默認行為
    fn(e){
      e.preventDefault()
      console.log(e)
    },
    // 有傳參時胯陋，最后一個參數(shù)是事件對象，但是傳參必須傳 $event 固定語法 否則報錯
    fns(num,e){
      e.preventDefault()
      console.log(num)
    }
  }
}
</script>

修飾符

事件修飾符

事件修飾符：vue提供事件修飾符袱箱，可以快速阻止默認行為或阻止冒泡

.prevent 阻止默認行為遏乔， .stop 阻止冒泡

.once 程序運行期間，只能觸發(fā)一次事件處理函數(shù)

<template>
<!-- template中只有一個根標簽 -->
<div>
<!-- 阻止事件默認行為 事件名.prevent -->
<a  @click.prevent = 'fn'>點擊跳轉頁面</a>
<!-- 事件修飾符 事件名.stop 阻止事件冒泡-->
<div @click = 'father'>父親
  <div @click.stop = 'son'>孩子</div>
</div>
</div>
</template>

<script>
export default {
  // data必須是一個函數(shù)发笔，并且必須要返回一個對象盟萨，數(shù)據(jù)就在返回的對象里
  data(){
    return{   
    }
  },
  //   事件處理函數(shù)在methods中提供 
  methods: {
    fn(){
      console.log('阻止跳轉')
    },
    father(){
      console.log('父親')
    },
    son (){
      console.log('兒子')
    }
  }
}
</script>

按鍵修飾符

在監(jiān)聽鍵盤事件時，我們經(jīng)常需要判斷詳細的按鍵了讨∧砑ぃ可用按鍵修飾符

@keyup.enter – 只要按下回車才能觸發(fā)這個鍵盤事件函數(shù)

@keyup.esc 監(jiān)聽返回鍵

vue中內置有 .delete .enter .esc .tab 等

<template>
<!-- template中只有一個根標簽 -->
<div>
<!-- 按鍵修飾符 -->
<input type="text" placeholder="用戶名" @keyup.esc = 'down'>
<!-- 設置按鍵彈起時，只有在設置的輸入框獲取焦點時按才有效 -->
<input type="password" placeholder="密碼" @keyup.enter = 'fn'>
<button>登錄</button>
</div>
</template>

<script>
export default {
  name : 'app', 
  // data必須是一個函數(shù)前计，并且必須要返回一個對象胞谭，數(shù)據(jù)就在返回的對象里
  data(){
    return{   
    }
  },
  //   事件處理函數(shù)在methods中提供 
  methods: {
    down (){
      console.log('esc 返回')
    },
    fn () {
      console.log('enter彈起')
    }
  }
}
</script>

案例：逆轉世界

當點擊時字符串翻轉

使用：插值表達式

<template>
<!-- template中只有一個根標簽 -->
<div>
<!-- 逆轉世界 -->
<!-- 先靜態(tài)后動態(tài) -->
<h1>{{ msg }}</h1>
<button @click="reverseWorld">逆轉世界</button>
</div>
</template>

<script>
export default {
  data(){
    return {
      msg : 'Hello,World!'
    }
  },
  methods : {
     reverseWorld (){
      // 1.先將字符串分割  split
    const arr = this.msg.split('')
    // 2.再將分割形成的數(shù)組倒轉  reverse
    arr.reverse()
    // 3.最后將倒轉的數(shù)組重新拼接成字符串然后賦值給msg
    this.msg = arr.join('')
     }
  }
}
</script>

盒子的顯示隱藏

v-show 和 v-if 可以控制盒子的顯示隱藏

v-show
語法: v-show="布爾值" (true顯示, false隱藏)

原理: 實質是在控制元素的 css 樣式, display: none;
v-if
語法: v-if="布爾值" (true顯示, false隱藏)

原理: 實質是在動態(tài)的創(chuàng)建或者刪除元素節(jié)點

應用場景:
```
 1. 如果是頻繁的切換顯示隱藏, 用 v-show   
     (v-show, 只是控制css樣式，而v-if, 頻繁切換會大量的創(chuàng)建和刪除元素, 消耗性能)
```
1. 如果是不用頻繁切換, 要么顯示, 要么隱藏的情況, 適合于用 v-if
  
  (v-if 是惰性的, 如果初始值為 false, 那么這些元素就直接不創(chuàng)建了, 節(jié)省一些初始渲染開銷)

vue指令 - v-else 和 v-else-if

<template>
<!-- template中只有一個根標簽 -->
<div>
 <!-- 顯示隱藏  v-show  v-if   值都為布爾值 true顯示  false 隱藏-->
 <!-- v-show 的值為false時男杈，就是往其標簽的樣式上加display = none -->
 <div v-show="age >= 18">成年人的世界</div>
 <div v-show="age < 18">未成年人的世界</div>
 <!-- v-if 的值為true時 創(chuàng)建一個新的標簽丈屹，為false時就刪除 -->
 <div v-if="age >= 18">我想要</div>
 <div v-if="age < 18">孤勇者</div>
 <!-- v-if  v-else-if   v-else  用法和js中的if判斷一樣 -->
 <div v-if="num < 60">不及格</div>
 <div v-else-if="num < 80">及格</div>
 <div v-else-if="num < 90">優(yōu)秀</div>
 <div v-else-if="num < 100">頂尖</div>
 <div v-else>金色傳說</div>
</div>
</template>

<script>
export default {
  data(){
    return {
      age : 16,
      num : 12
    }
  },
  methods : {
    
  }
}
</script>

v-model

v-model作用：給表單元素使用, 雙向數(shù)據(jù)綁定

數(shù)據(jù)變化了, 視圖會跟著變
視圖變化了, 數(shù)據(jù)要跟著變

語法: v-model='值'

vue指令 - v-model - 處理其他表單元素

例如：
select 綁定的是選中的選項值
checkbox 綁定的是是否選中的一個布爾值
textarea 綁定的是value屬性用戶輸入的值

注意：v-model 會忽略掉表單元素原本的value, checked等初始值

v-model修飾符

語法: v-model.修飾符="Vue數(shù)據(jù)變量"

.number 轉數(shù)字，以parseFloat轉成數(shù)字類型
.trim 去除首尾空白字符
.lazy 在change時觸發(fā)而非inupt時

<template>
<!-- template中只有一個根標簽 -->
<div>
<!-- v-model 修飾符  -->
<!-- .number轉數(shù)字伶棒，以浮點型轉成數(shù)字類型然后賦值給變量 -->
<input type="text" v-model.number="age" placeholder="數(shù)字類型">
<br>
<!-- .trim 將用戶輸入的數(shù)據(jù)前后空格去除然后賦值給變量 -->
<input type="text" v-model.trim="add" placeholder="去除前后空格">
<br>
<!-- .lazy 在輸入框失去焦點時才觸發(fā)旺垒，將用戶輸入的數(shù)據(jù)賦值給變量 -->
<input type="text" v-model.lazy="sall" placeholder="失去焦點時觸發(fā)">
</div>
</template>

<script>
export default {
  data(){
    return {
      age : "",
      add : "",
      sall : "",
    }
  }
}
</script>

vue指令-v-text和v-html

作用：更新元素的innerText/innerHTML

語法:

v-text="值"
v-html="值"

區(qū)別：
v-text 不解析標簽
v-html 解析標簽

使用v-text和v-html的標簽元素中不應寫內容，會被覆蓋

<template>
<!-- template中只有一個根標簽 -->
<div>
<!-- v-text和 v-html -->
<!-- v-text 相當于 innerText  textContent -->
<!-- v-html相當于 innerHTML -->
<!-- v-text 只能解析變量中的文本肤无，會將變量的數(shù)據(jù)以字符串的方式顯示在標簽元素中 -->
<!-- 使用v-text和v-html之后  標簽元素中的插值會被覆蓋 -->
<h1 v-text="msg">{{666}}</h1>
<!-- v-html 可以解析標簽 先蒋，會將解析的html標簽顯示在標簽元素中 -->
<h1 v-html="msg"></h1>
</div>
</template>

<script>
export default {
  data(){
    return {
     msg : "<button>按鈕</button>"
    }
  }
}
</script>

綜合案例--文章標題編輯

<template>
  <div>
    <!-- 標題部分 -->
    <!-- 2.當點擊編輯時，標題和編輯隱藏宛渐，編輯內容顯示  給編輯綁定點擊事件 -->
    <!-- 3.當點擊編輯時竞漾，標題隱藏 -->
    <h1 class="title" v-show="!show">
      {{ title }}
      <span class="tag">{{ option }}</span>
      <!--5.點擊編輯的時候，要初始化表單顯示  -->
      <a class="edit-btn" @click="fn">編輯</a>
    </h1>

    <!-- 編輯內容 -->
    <!-- 1.在最開始時窥翩，下面編輯框會隱藏 -->
    <div v-show="show">
      <div class="input-group">標題：<input type="text" v-model="edtitle" /></div>
      <div class="input-group">
        頻道：<select v-model="edoption">
          <option value="前端">前端</option>
          <option value="測試">測試</option>
          <option value="Java">Java</option>
        </select>
      </div>
      <div class="operation">
        <!-- 4.點擊取消或者確認回到原來的狀態(tài) -->
        <button class="cancel" @click="show = false">取消</button>
        <button class="confirm" @click="ret">確認</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      show : false,
      title : '從入門到崩潰',
      option : "前端",
      edtitle : '',
      edoption : '',
    }
  },
  methods: {
    // 點擊編輯的事件
    fn(){
      this.show = true
      // 將title的值賦值給編輯輸入框
      this.edtitle = this.title
      this.edoption = this.option
    },
    // 點擊確認要執(zhí)行的
    ret(){
      this.show = false
      // 點擊確認之后將將修改后的edtitle賦值給title
      this.title = this.edtitle
      this.option = this.edoption
    }
  }
};
</script>

<style>
.title {
  display: flex;
  align-items: center;
}

.tag {
  margin-left: 8px;
  padding: 3px 6px;
  border-radius: 8px;
  background-color: green;
  font-size: 0.6em;
  color: #fff;
}

.edit-btn {
  margin-left: 32px;
  font-size: 0.8em;
  color: lightskyblue;
}

.input-group {
  margin-top: 16px;
  font-size: 28px;
}

.input-group input,
.input-group select {
  width: 300px;
  border-color: #ddd;
  font-size: 28px;
}

.operation {
  margin-top: 16px;
}

.cancel {
  margin-left: 85px;
  background-color: #ddd;
}

.cancel,
.confirm {
  padding: 8px 24px;
  border: 0;
  border-radius: 4px;
}

.confirm {
  margin-left: 16px;
  background-color: #006699;
  color: #fff;
}
</style>

v-for

作用：可以遍歷數(shù)組或者對象或者數(shù)字畴蹭，用于渲染結構可以遍歷循環(huán)結構

遍歷數(shù)組語法:

v-for="item in 數(shù)組名"

v-for="(item, index) in 數(shù)組名"

遍歷對象語法：

v-for = "(value, key) in 對象名"

遍歷數(shù)字

v-for = "item in 數(shù)字"

 v-for優(yōu)先級高于v-if
    如果同時出現(xiàn)v-for和v-if，無論判斷條件是否成立鳍烁，都會執(zhí)行一遍v-for循環(huán)，這樣浪費性能繁扎，所以要盡可能的避免兩者一起使用幔荒。

v-for就地更新

vue會盡量復用上一次渲染的dom

當需要重新渲染時糊闽，vue會先對比緩存在內存里的的dom結構，然后只更新變化的結構

新舊DOM產(chǎn)生后對比, 然后決定是否復用真實DOM/更新內容

Vue會盡可能的就地（同層級爹梁，同位置）右犹，對比虛擬dom，復用舊dom結構姚垃，進行差異化更新

可以復用舊的dom結構念链，更新高效

虛擬dom

html 渲染出來的真實dom樹，是個樹形結構（復雜）积糯。每個標簽掂墓，都只是樹的某個節(jié)點

虛擬dom：本質就是保存節(jié)點信息, 描述真實dom的 JS 對象

一個緩存在內存的js對象，可以用最少的屬性結構看成，描述真實的dom

可以更高效的對比變化的地方君编，只更新改變的地方，減少dom操作

v-for中的key屬性

在沒有提供key的時候或是使用索引作為key的值時就使用就地更新

在使用key時川慌，就根據(jù)key的值進行對比吃嘿，提示對比和更新性能

key的值的要求是：唯一不重復的字符串或數(shù)字

key值：有id用id 沒有用索引

可以配合虛擬DOM提高更新的性能

動態(tài)修改樣式

style

用 v-bind 動態(tài)設置標簽的 style 行內樣式

語法 :style="對象/數(shù)組"

對象

:style = '{屬性名："屬性值"}' // 屬性值帶引號

數(shù)組

：style = '[]' // 數(shù)組里可以是多個對象，多個值

樣式的屬性名帶橫線

1.使用小駝峰命名

2.給屬性名加上引號

class

用 v-bind 動態(tài)設置標簽的 class 類名

語法 :class="對象/數(shù)組"

    對象：如果鍵值對的值為true梦重，那么就有這個類兑燥，否則沒有這個類

   對象中可以使用表達式判斷

類名有橫線 : 加引號

    數(shù)組：數(shù)組中所有的類，都會添加到盒子上

    數(shù)組中的所有元素都要加上引號

v-bind 對于類名操作的增強, 注意點 :class 不會影響到原來的 class 屬性

計算屬性

計算屬性默認情況下只能獲取琴拧，不能修改降瞳。

要給計算屬性賦值，就必須寫計算屬性的完整寫法艾蓝！

作用：根據(jù)一些數(shù)據(jù)算出來的屬性（用的時候不加括號）

聲明在computed對象中 computed和data methods 同級

簡寫 : 聲明為一個函數(shù)

computed ： {
   age(){
     
   }
}

完整寫法:

computed : {
 age: {
      get() {
        // 獲取計算屬性的值
        const date = new Date();
        return date.getFullYear() - this.year;
      },
      set(newAge) {
        //  更新計算屬性的值
        // 本質上就是更新變量的值 改變之后觸發(fā)set屬性
        const date = new Date();
        this.year = date.getFullYear() - newAge;
      },
    },
}

set里的參數(shù)是age的狀態(tài)或數(shù)據(jù)力崇，當age更新時觸發(fā)set，然后執(zhí)行set里面的代碼赢织，將新的數(shù)據(jù)更新給變量亮靴，然后又觸發(fā)get

偵聽器

watch: 可以偵聽到 data/computed 屬性值的改變

簡寫

watch:{
  被偵聽的屬性名(newVal,oldVal){
   newVal 是新值
   oldVal 是舊值
}

完整寫法

可以用于監(jiān)聽數(shù)據(jù)變化，然后同步到本地

 // 偵聽數(shù)據(jù)的變化
  // 偵聽器完整寫法  相當于input時間
  // 可以偵聽復雜數(shù)據(jù)類型 也可以立即執(zhí)行
  watch: {
    list: {
      // immediate: true,   立即執(zhí)行一次
      deep: true, // 深度偵聽 常用于數(shù)組或對象
      handler(newVal) {  // 數(shù)據(jù)變化觸發(fā)的函數(shù)
        console.log(newVal.name);
      },
    },
  },
};

組件

組件概念

組件是可復用的 Vue 實例, 封裝標簽, 樣式和JS代碼

組件化：封裝的思想于置，把頁面上 可重用的部分 封裝為 組件茧吊，從而方便項目的開發(fā) 和維護

一個頁面，可以拆分成一個個組件八毯，一個組件就是一個整體

每個組件可以有自己獨立的結構樣式和行為(html, css和js)

前端組件化開發(fā)的好處：

1.提高了復用性和靈活性

2.提升了開發(fā)效率和后期可維護性

組件的注冊使用

App.vue 是根組件, 這個比較特殊, 是最大的一個根組件搓侄。其實里面還可以注冊使用其他小組件

使用組件的四步：
1.創(chuàng)建組件, 封裝要復用的標簽, 樣式, JS代碼
2.引入組件
3.注冊組件
全局注冊 – main.js中 – 語法如圖
局部注冊 – 某.vue文件內 – 語法如圖
4.使用組件：組件名當成標簽使用即可
<組件名></組件名>

注意點：組件名不能和內置的html名同名

創(chuàng)建組件

創(chuàng)建一個vue文件

封裝要復用的結構，樣式话速，和js代碼

引入組件

import 組件對象  from  vue文件路徑
import {組件對象} from  vue文件路徑

當導入部分或導入非原組件默認導出的組件時讶踪，需要加大括號

導入默認導出的組件或者將整個模塊作為單一的對象進行導入，不需要加大括號泊交，該模塊的所有導出都會作為對象的屬性存在

注冊組件

全局注冊

Vue component('組件名',組件對象)

局部注冊

export default {
  components : {
   '組件名' ： 組件對象
  }
}

使用組件

<組件名></組件名>

組件名的命名方式

在進行組件的注冊時乳讥，定義組件名的方式有兩種

注冊使用短橫線命名法柱查，例如 hm-header 和 hm-main

使用時 <hm-button> </hm-button>

Vue.component('hm-button',HmButton)

注冊使用大駝峰命名法，例如 HmHeader 和 HmMain

使用時 <HmButton> </HmButton> 和 <hm-button> </hm-button> 都可以

Vue.component('HmButton',HmButton)

推薦1: 定義組件名時, 用大駝峰命名法, 更加方便

推薦2: 使用組件時云石，遵循h(huán)tml5規(guī)范, 小寫橫杠隔開（可選）

組件在開發(fā)者工具中顯示的名字唉工，可以通過name進行修改

在注冊組件期間，除了可以直接提供組件的注冊名稱之外汹忠，還可以把組件的 name 屬性作為注冊后組件的名稱

<script>
    export default {
        name : 'HmButton'
    }
</script>

name寫在要組冊的組件中

注冊可以全局注冊或者局部注冊

Vue.component(HmButton.name,HmButton)

組件之間的樣式?jīng)_突 scoped

默認情況下淋硝，寫在組件中的樣式會 全局生效，因此很容易造成多個組件之間的樣式?jīng)_突問題宽菜。

全局樣式: 默認組件中的樣式會作用到全局
局部樣式: 可以給組件加上 scoped 屬性, 可以讓樣式只作用于當前組件

scoped原理

（1）當前組件內標簽都被添加 data-v-hash值的屬性

（2）css選擇器都被添加 [data-v-hash值] 的屬性選擇器

最終效果: 必須是當前組件的元素, 才會有這個自定義屬性, 才會被這個樣式作用到

scoped會在元素上添加唯一的屬性（data-v-x形式）谣膳，css編譯后也會加上屬性選擇器，從而達到限制作用域的目的

組件通信--父傳子

父組件給子組件傳值

被引入的組件是子組件

父組件 : App.vue

子組件：被引入的組件

父傳子語法:

父組件通過給子組件加屬性傳值
<Son price="100" title="不錯" :info="msg"></Son>
子組件中, 通過props屬性接收
```
 props: ['price', 'title', 'info']
```

父組件

<template>
  <div>
    <h1>父組件</h1>
    <a-package :strs="str"></a-package>
  </div>
</template>

<script>
import A from "./components/a-package.vue";
export default {
  components: {
    "a-package": A,
  },
  data() {
    return {
      str: "這是父組件傳給子組件的值",
    };
  },
};
</script>

<style>
</style>

子組件

<template>
  <div>
    <h1>{{ strs }}</h1>
  </div>
</template>

<script>
export default {
  props: ["strs"],
};
</script>

<style>
</style>

注意點：

1.父傳子之前需要先將子組件引入父組件中使用

2.給子組件傳值的屬性等于值需要寫在子組件在父組件的標簽中

3.子組件需要使用props接收父組件傳過來的值赋焕，傳過來的值要用引號

4.props中接收的是寫在父組件中子組件標簽中的屬性参歹，所對應的值可以直接在子組件中使用，但不能改變

v-for遍歷組件

父組件

<template>
  <div>
    <h1>v-for遍歷組件</h1>
    <a-package
      v-for="item in list"
      :key="item.id"
      :username="item.name"
      :ages="item.age"
    ></a-package>
  </div>
</template>

<script>
import A from "./components/a-package.vue";
export default {
  components: {
    "a-package": A,
  },
  data() {
    return {
      list: [
        { id: 1, name: "唐僧", age: 20 },
        { id: 1, name: "悟空", age: 600 },
        { id: 1, name: "八戒", age: 1800 },
        { id: 1, name: "沙僧", age: 1500 },
      ],
    };
  },
};
</script>

<style>
</style>

子組件

<template>
  <div>
    <h1>{{ username }}</h1>
    <h2>{{ ages }}</h2>
  </div>
</template>

<script>
export default {
  props: ["username", "ages"],
};
</script>

<style>
</style>

單向數(shù)據(jù)流

在vue中需要遵循單向數(shù)據(jù)流原則：（從父到子的單向數(shù)據(jù)流動, 叫單向數(shù)據(jù)流）

父組件的數(shù)據(jù)變化了隆判，會自動向下流動影響到子組件
子組件不能直接修改父組件傳遞過來的 props犬庇， props是只讀的

組件通訊--子傳父

子傳父的基本語法：

子組件可以通過 this.$emit('自定義事件名', 參數(shù)1, 參數(shù)2, ...) 觸發(fā)事件的同時傳參的
父組件可以給子組件注冊對應的自定義事件
父組件并提供對應的函數(shù)接收參數(shù)

子組件觸發(fā)事件之后的方法給父組件傳值

this.$emit('ok'，參數(shù))

父組件在子組件標簽上監(jiān)聽該事件侨嘀，當子組件觸發(fā)該事件時臭挽，調用方法

<子組件 @ok = 'fn'></子組件>

<script>
export default {
   methods: {
      fn(e){
        console.log(e)
      }
   }
}
</script>

當子組件傳參只有一個時，父組件監(jiān)聽的事件觸發(fā)的方法默認第一個就是子組件的傳參

當父組件也有傳參時咬腕，$event則是子組件的默認傳參

<子組件 @ok = 'fn(item,$event)'></子組件>

<script>
export default {
   methods: {
      fn(item,e){
        console.log(item)
        console.log(e)
      }
   }
}
</script>

props校驗

props 是父傳子, 傳遞給子組件的數(shù)據(jù), 為了提高子組件被使用時的穩(wěn)定性, 可以進行props校驗欢峰，驗證傳遞的數(shù)據(jù)是否符合要求

默認的數(shù)組形式, 不會進行校驗, 如果希望校驗, 需要提供對象形式的 props

props: {
    // 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
    propA: Number,
    // 多個可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認值的數(shù)字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認值的對象
    propE: {
      type: Object,
      // 對象或數(shù)組默認值必須從一個工廠函數(shù)獲取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數(shù)
    propF: {
      validator: function (value) {
        // 這個值必須匹配下列字符串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

v-model語法糖

語法糖：v-model本質上是 value屬性和input事件的一層包裝

v-model的作用：提供數(shù)據(jù)的雙向綁定

1.數(shù)據(jù)發(fā)生了改變，頁面會自動變 v-bind:value

2.頁面輸入改變涨共，數(shù)據(jù)會自動變化 v-on:input

v-model流程

1.先是在父組件中聲明數(shù)據(jù)

2.然后在父組件中的子組件的標簽使用v-model 等于數(shù)據(jù)

3.子組件在props中接收父組件傳過來的參數(shù)必須為value

4.在子組件中使用value 然后在觸發(fā)事件時將要改變的數(shù)據(jù)作為參數(shù)傳給父組件傳參定義的事件默認為input

5.父組件因為使用v-model 纽帖，默認監(jiān)聽input事件，所有傳過來的數(shù)據(jù)默認修改举反，然后傳給子組件

以上是v-model實現(xiàn)組件數(shù)據(jù)的雙向綁定的步驟

父組件

<template>
  <div>
    <a-package v-model="num"></a-package>
  </div>
</template>

<script>
import A from "./components/a-package.vue";
export default {
  data() {
    return {
      num: 10,
    };
  },
  components: {
    "a-package": A,
  },
};
</script>

<style>
</style>

子組件

<template>
  <div>
    <button @click="$emit('input', value - 1)">--</button>
    {{ value }}
    <button @click="$emit('input', value + 1)">++</button>
  </div>
</template>

<script>
export default {
  props: ["value"],
};
</script>

<style>
</style>

注意：

當子組件傳數(shù)據(jù)給父組件時

在script中使用 this.$emit('自定義事件名'懊直，參數(shù))

在template中不需要使用this

ref和$refs

作用：利用 ref 和 $refs 可以用于獲取 dom 元素, 或者組件實例

1.獲取dom標簽

給要獲取的標簽添加ref屬性

然后通過this.$refs.屬性值，獲取目標標簽

<h1 ref='my'><h1>
console.log(this.$refs.my)

2.獲取組件實例

給Demo組件目標組件, 添加ref屬性-名字隨意

恰當時機, 通過 this.$refs.xxx 獲取組件對象, 可調用組件對象里方法等

<組件名 ref= 'my'></組件名>
this.$refs.my.方法或屬性

$nextTick

$nextTick：等DOM更新后, 才會觸發(fā)執(zhí)行此方法里的函數(shù)體

methods:{
   this.show = true
   this.$nextTick(() =>{
     console.log(this.$refs.my)
   })
}

小案例

點擊按鈕火鼻，顯示輸入框獲取焦點

<template>
  <div>
    <input type="text" v-show="show" ref="inp" />
    <button v-show="!show" @click="fn">點擊顯示</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    fn() {
      this.show = !this.show;
      console.log(this.$refs.inp);
      this.$nextTick(() => {
        this.$refs.inp.focus();
      });
    },
  },
};
</script>

<style>
</style>

動態(tài)組件

動態(tài)組件是可以改變的組件室囊，可以解決多組件同一位置，切換顯示的問題

基本語法

component 組件(位置) + is 屬性 (哪個組件)

修改 is 屬性綁定的值 => 切換組件

準備被切換的 3個組件, 并引入注冊
準備變量來承載要顯示的"組件名"
設置掛載點<component>, is屬性設置要顯示的組件 ( component + is )
點擊按鈕 – 修改name變量里的"組件名" ( 修改 is 的值)

父組件

<template>
  <div>
    <button @click="name = 'a-package'">老虎</button>
    <button @click="name = 'b-package'">??</button>
    <button @click="name = 'c-package'">貓</button>
    <!-- <a-package></a-package>
    <b-package></b-package>
    <c-package></c-package> -->
    <component :is="name"></component>
  </div>
</template>

<script>
import A from "./components/a-package.vue";
import B from "./components/b-package.vue";
import C from "./components/c-package.vue";
export default {
  components: {
    "a-package": A,
    "b-package": B,
    "c-package": C,
  },
  data() {
    return {
      name: "a-package",
    };
  },
};
</script>

<style>
</style>

子組件中分別是三種對應按鈕的圖片

當點擊對應的按鈕時顯示對應的圖片

注意：當使用動態(tài)組件時魁索，不要再使用子組件標簽

只需要切換：is的值就可以切換組件

使用v-if 的顯示隱藏也可以達到類似的效果

自定義指令

自定義指令：自己定義指令, 封裝dom操作融撞，擴展額外功能

局部注冊

color是指令名

// 局部注冊自定義指令
  directives: {
    color: {
      //  當指令所在的標簽插入到dom樹中，下面方法會被執(zhí)行
      inserted(dom) {
        dom.style.color = "red";
      },
    },
  },

全局注冊

bold是指令名

// 全局注冊自定義指令
Vue.directive("bold", {
  inserted(dom) {
    dom.style.fontSize = "50px";
  },
});

自定義指令傳參

語法：在綁定指令時粗蔚，可以通過“等號”的形式為指令綁定具體的參數(shù)值

通過 binding.value 可以拿到指令值尝偎，指令值修改會觸發(fā) update 函數(shù)

自定義指令主要是對dom的操作來做一些額外操作

App.vue

<template>
  <div>
    <p v-color="red" v-bold="'100px'">自定義指令</p>
    <p v-color v-bold>自定義指令</p>
    <p v-color v-bold>自定義指令</p>
    <button @click="fn">點擊</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      red: "red",
      blue: "blue",
      pink: "pink",
    };
  },
  // 局部注冊自定義指令
  directives: {
    color: {
      //  當指令所在的標簽插入到dom樹中，下面方法會被執(zhí)行
      inserted(dom) {
        dom.style.color = "red"; // value = red
      },
      // update 在指令的值改變時觸發(fā)鹏控，將修改后的值傳參然后重新賦值修改
      // binding.value是傳給自定義指令的值
      update(dom, binding) {
        dom.style.color = binding.value;
      },
    },
  },
  methods: {
    fn() {
      this.red = "green";
    },
  },
};
</script>

<style>
</style>

main.js

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

// 全局注冊自定義指令
Vue.directive("bold", {
  inserted(dom) {
    dom.style.fontSize = "50px";
  },
  update(dom, binding) {
    dom.style.fontSize = binding.value;
  },
});

new Vue({
  render: (h) => h(App),
}).$mount("#app");

keep-alive--緩存組件

keep-alive是緩存組件冬念，不會重復創(chuàng)建銷毀

    <button @click="names = 'a-name'">a-a</button>
    <button @click="names = 'b-name'">b-b</button>
    <keep-alive>
      <component :is="names"></component>
    </keep-alive>

兩個生命周期

export default {
  //在緩存激活的時候觸發(fā)
  activated() {
    console.log("b激活了");
  },
  //在緩存失活的時候觸發(fā)
  deactivated() {
    console.log("b失活了");
  },
};

插槽

默認插槽

插槽基本語法：

組件內用<slot></slot>占位
使用組件時<組件名></組件名>夾著的地方, 傳入標簽替換slot

父組件

<template>
  <div>
    <slot-a>
      <img
        src="https://ts3.cn.mm.bing.net/th?id=OIP-C.S3QOsgnlzrpbpAdOXF4YMAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
        alt=""
      />
    </slot-a>
  </div>
</template>

<script>
import slotA from "./components/slot-a.vue";
export default {
  components: {
    "slot-a": slotA,
  },
};
</script>

<style>
</style>

子組件

<template>
  <div>
    <h1>插槽</h1>
    <slot></slot>
    <p>這是通過插槽傳遞結構</p>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

插槽 - 后備內容（默認值）

插槽后備內容：封裝組件時趁窃，可以為預留的 <slot> 插槽提供后備內容（默認內容）

語法: 在<slot>標簽內放置內容, 作為默認顯示內容

效果:

外部使用組件時，不傳東西急前，則slot會顯示后備內容（slot標簽內的結構）

外部使用組件時，傳東西了瀑构，則slot整體會被換掉

<slot>
    <p>這是默認內容</p>
</slot>

插槽 - 具名插槽

一個組件內有多處裆针，需要外部傳入標簽，進行定制

語法:

多個slot使用name屬性區(qū)分名字 <slot name="content"></slot>

template配合v-slot:名字來分發(fā)對應標簽寺晌，根據(jù)對應的名字傳給不同的插槽對應的結構或內容

v-slot:可以簡化成#

父組件

<template>
  <div>
    <slot-a>
      <template #header>
        <p>這是插槽的標題</p>
      </template>
      <template #body>
        <p>這是插槽的內容</p>
      </template>
      <template #footer>
        <p>這是插槽的底部</p>
      </template>
    </slot-a>
  </div>
</template>

<script>
import slotA from "./components/slot-a.vue";
export default {
  components: {
    "slot-a": slotA,
  },
};
</script>

<style>
</style>

子組件

<template>
  <div>
    <p>
      <slot name="header"><button>標題</button></slot>
    </p>
    <p>
      <slot name="body"><button>內容</button></slot>
    </p>
    <p>
      <slot name="footer"><button>底部</button></slot>
    </p>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

插槽 - 作用域插槽

作用域插槽: 定義 slot 插槽的同時, 是可以傳值的世吨。給插槽上可以綁定數(shù)據(jù)，將來使用組件時可以用

基本步驟：

1.給slot標簽以添加屬性的方式傳值

2.所有添加的屬性都會被添加到一個對象中呻征，然后傳給父組件的對應的地方

3.在template中耘婚，接收子組件傳過來的對象

匿名的就是 v-slot =‘自定義的對象名’

具名的就是 v-slot= 插槽名 = ‘自定義的對象名’

匿名插槽傳參

父組件

<template>
  <div>
    <!-- 接收子組件傳過來的對象 -->
    <slot-a v-slot="obj">
      <!--  子組件插槽傳過來的值  obj:{user:{name:'張三',age:18}} -->
      <h1>{{ obj.user.name }}</h1>
      <h1>{{ obj.user.age }}</h1>
    </slot-a>
  </div>
</template>

<script>
import slotA from "./components/slot-a.vue";
export default {
  components: {
    "slot-a": slotA,
  },
};
</script>

<style>
</style>

子組件

<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "張三",
        age: 18,
      },
    };
  },
};
</script>

<style>
</style>

具名插槽傳參

父組件

<template>
  <div>
    <slot-a>
      <template #head="obj">
        <p>{{ obj.title }}</p>
      </template>
      <template #body="obj">
        <p>{{ obj.content }}</p>
      </template>
    </slot-a>
  </div>
</template>

<script>
import slotA from "./components/slot-a.vue";
export default {
  components: {
    "slot-a": slotA,
  },
};
</script>

<style>
</style>

子組件

<template>
  <div>
    <slot name="head" :title="user.title">標題</slot>
    <slot name="body" :content="user.content">內容</slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        title: "這是一個標題",
        content: "這是內容",
      },
    };
  },
};
</script>

<style>
</style>

生命周期

vue組件生命周期：從創(chuàng)建到銷毀的整個過程就是 – Vue實例的 - 生命周期

生命周期-鉤子函數(shù)概述

生命周期函數(shù)：是由 vue 框架提供的內置函數(shù)，會伴隨著組件的生命周期陆赋，自動按次序執(zhí)行

作用: 特定的時間點沐祷，執(zhí)行特定的操作

比如: 組件創(chuàng)建完畢后，可以在created 生命周期函數(shù)中發(fā)起Ajax 請求攒岛，從而初始化 data 數(shù)據(jù)

分類: 三大階段赖临，8個方法

組件初始化階段的生命周期函數(shù)
組件運行階段的生命周期函數(shù)
組件銷毀階段的生命周期函數(shù)

八大生命周期鉤子函數(shù)：

1.beforeCreate：data數(shù)據(jù)初始化之前，組件還沒有數(shù)據(jù)

2.created: data數(shù)據(jù)初始化之后灾锯，可以獲取到組件的數(shù)據(jù)

3.beforeMount：DOM渲染之前兢榨，DOM還沒渲染

4.mounted：DOM渲染之后，可以操作DOM了

5.beforeUpdate: 數(shù)據(jù)更新顺饮，DOM更新前

6.updated: 數(shù)據(jù)更新吵聪，DOM更新后

7.beforeDestroy: 組件銷毀前

8.destroyed: 組件銷毀后

路由

單頁面應用程序

SPA - Single Page Application

單頁面應用(SPA): 所有功能在一個html頁面上實現(xiàn) 例如網(wǎng)易云音樂

(多頁面應用程序MPA)

優(yōu)點：

不整個刷新頁面，每次請求僅獲取需要的部分兼雄，用戶體驗更好

數(shù)據(jù)傳遞容易, 開發(fā)效率高

缺點：

開發(fā)成本高(需要學習專門知識 - 路由)

首次加載會比較慢一點吟逝。不利于seo

路由

路由就是路徑地址和組件的映射關系

vue的路由是 vue-router ，是vue官方提供的一個插件君旦，專門負責出來路由

其中v3 對應的是vue2.0

   v4 對應的是vue3.0

vue的組件分類說明

組件分類： .vue文件分2類, 一個是頁面組件, 一個是復用組件

src/views文件夾

頁面組件 - 頁面展示 - 配合路由用

src/components文件夾

復用組件 - 展示數(shù)據(jù) - 常用于復用

配置路由的步驟

1.下包

npm i vue-router@3   // @后面是對應的版本

2.引入路由

import VueRouter from "vue-router";

3.創(chuàng)建組件

4.引入組件

5.導入注冊路由

Vue.use(VueRouter); //使用Vue注冊之前要先引入Vue

6.定義路由

const routes = [
  {
    path: "/head-name",  // 地址
    component: headName, // 組件
  },
]

7.實例化路由

routes這個是固定的屬性名改變后路由地址改變無法跳轉頁面

const router = new VueRouter({
  routes, //縮寫
});

8.導出路由

export default router;

9.在main.js中引入路由澎办，然后掛載到vue實例上面去

// 引入路由
import router from "./router/index";

new Vue({
  // 將路由掛載到vue實例上
  router, //簡寫
  render: (h) => h(App),
}).$mount("#app");

10.在App.vue上使用 <router-view></router-view> 來渲染路由

聲明式導航

組件router-link 替代 a標簽，能跳轉金砍，能高亮

vue-router提供了一個全局組件 router-link
router-link實質上最終會渲染成a鏈接 to屬性等價于提供 href屬性(to無需#)
router-link提供了聲明式導航高亮的功能(自帶類名)

<template>
  <div>
    <router-link to="/head-name">1</router-link><span>|</span>
    <router-link to="/body-name">2</router-link><span>|</span>
    <router-link to="/foot-name">3</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.router-link-active {
  color: red;
}
</style>

聲明式導航 - 兩個類名

router-link 會自動給當前導航添加兩個類名

router-link-active: 激活的導航鏈接模糊匹配

可以匹配開始一致的路徑

router-link-exact-active: 激活的導航鏈接精確匹配

只能匹配完全一致的路徑

可以修改默認高亮的類名

const router = new VueRouter({
  routes局蚀，
  linkActiveClass = 'aa'
  linkExactActiveClass = 'bb'
});

聲明式導航 - 跳轉傳參

跳轉路由時, 可以給路由對應的組件內傳值

在router-link上的to屬性傳值, 語法格式如下

/path?參數(shù)名=值當參數(shù)對頁面不是必須的，通常放在問號后面

/path/值 – 需要路由對象提前配置 path: “/path/:參數(shù)名” 參數(shù)對應頁面來說是必須的恕稠，就將參數(shù)嵌套在url里面

對應頁面組件接收傳遞過來的值

在對應的組件中創(chuàng)建后可以接收到

this.$route 代表當前的頁面信息

查詢參數(shù)

this.$route.query.參數(shù)名問號后面

this.$route.params.參數(shù)名嵌套url

1.問號后面非必要傳參

<!-- 對象屬性琅绅，path是要跳轉的路徑，query是問號后面的參數(shù) -->
<router-link :to="{ path: '/bar', query: { name: 'jack', age: 18 } }">bar</router-link>

在對應頁面可以查到對應的參數(shù)信息

created() {
    console.log(this.$route.query.name);
  },

2.內嵌url 對頁面必要性傳參

當需要傳遞內嵌到路徑里的參數(shù)的時候

/路徑/：參數(shù)名來聲明內嵌式參數(shù) 在定義路徑和組件的映射關系中

路由文件

 {
    path: "/foot-name/:id",
    component: footName,
  },

App.vue

<router-link :to="`/foot-name/${user.id}`">3</router-link>

對應的組件可以查到傳入的參數(shù)

export default {
  created() {
    console.log(this.$route.params.id);
  },
};

想要用對象的方式傳參鹅巍， path不能和params一起傳參千扶，如果非要用對象的方式傳參料祠，需要給對應的路由取一個名字，用name和params一起傳參

{
    name: "aa",
    path: "/body-name/:id",
    component: bodyName,
  },

<router-link :to="{ name: 'aa', params: { id: 66 } }">2</router-link>

對應組件一樣可以查看傳的參數(shù)

export default {
  created() {
    console.log(this.$route.params.id);
  },
};

重定向

重定向：匹配path后, 強制跳轉path路徑

網(wǎng)頁打開url默認hash值是/路徑

redirect是設置要重定向到哪個路由路徑

// 重定向
  {
    path: "/", // 默認根組件
    // 當為根地址是重定向為新的地址
    redirect: "/head-name",
  },

vue路由--404

404：當找不到路徑匹配時澎羞，給個提示頁面

路由最后, path匹配*(任意路徑) – 前面不匹配就命中最后這個

// 模糊匹配要放在任意一個
  {
    // *代表任意路徑
    path: "*",
    //組件使用路由先要引用
    component: noneName,
  },

路由模式設置 - 修改路由髓绽，在地址欄的模式

hash路由例如: http://localhost:8080/#/home

history路由例如: http://localhost:8080/home (以后上線需要服務器端支持)

const router = new VueRouter({
  routes, //縮寫
  // 路由模式
  mode: "history",  // 這就是設置路由模式
});

編程式導航

編程式導航：用JS代碼來進行跳轉

this.$router 有push方法，可以推入頁面妆绞，壓下上一個頁面顺呕，也可以傳參

1.可以直接傳路徑

2.可以傳對象，里面有路徑和參數(shù) path和query括饶，或者name和params （path和params不能在一起）

<button @click="$router.push('/head-name')">編程式導航</button>

編程式導航 - 路由傳參

query傳：$route.query.xxx 接收

params傳：$route.params.xxx 接收

區(qū)別：

params傳參：是在內存中傳參株茶，刷新會丟失

query傳參：是在地址欄傳參，刷新還在

<button @click="$router.push({ path: '/head-name', query: { age: 55 } })">

<button @click="$router.push({ name: 'aa', params: { id: 2983193 } })">

過濾器--vue3.0已經(jīng)廢棄

和methods方法一樣图焰，filters

只能用在插值表達式和動態(tài)綁定屬性中启盛，用 | 表明

<template>
  <div>
    <h1>{{ str | split | res | join }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "123456",
    };
  },
  filters: {
    split(str) {
      return str.split("");
    },
    res(str) {
      return str.reverse();
    },
    join(str) {
      return str.join("");
    },
  },
};
</script>

<style>
</style>

Vue是一個MVVM的框架 （MVVM：一種軟件架構模式）

vue組件化思想

@vue/cli 腳手架的使用

vue腳手架

vue腳手架的基本使用

腳手架里的主要文件的作用

.vue文件

vue插值表達式

vue指令

vue指令-v-bind

vue指令-v-on

vue中阻止默認事件

修飾符

事件修飾符

按鍵修飾符

案例 ：逆轉世界

盒子的顯示隱藏

vue指令 - v-else 和 v-else-if

v-model

v-model修飾符

vue指令-v-text和v-html

綜合案例--文章標題編輯

v-for

遍歷數(shù)組語法:

遍歷對象語法：

遍歷數(shù)字

v-for就地更新

虛擬dom

v-for中的key屬性

動態(tài)修改樣式

style

class

計算屬性

偵聽器

組件

組件概念

組件的注冊使用

創(chuàng)建組件

引入組件

注冊組件

使用組件

組件名的命名方式

組件之間的樣式?jīng)_突 scoped

組件通信--父傳子

v-for遍歷組件

單向數(shù)據(jù)流

組件通訊--子傳父

props校驗

v-model語法糖

ref和$refs

$nextTick

動態(tài)組件

自定義指令

keep-alive--緩存組件

插槽

默認插槽

插槽 - 后備內容（默認值）

插槽 - 具名插槽

插槽 - 作用域插槽

匿名插槽傳參

具名插槽傳參

生命周期

生命周期-鉤子函數(shù)概述

路由

單頁面應用程序

路由

vue的組件分類說明

配置路由的步驟

聲明式導航

聲明式導航 - 兩個類名

聲明式導航 - 跳轉傳參

重定向

vue路由--404

路由模式設置 - 修改路由髓绽，在地址欄的模式

編程式導航

編程式導航 - 路由傳參

過濾器--vue3.0已經(jīng)廢棄

Vue是一個MVVM的框架（MVVM：一種軟件架構模式）

案例：逆轉世界