5d5375a0f265da03db076f59#heading-32

vue基礎知識點

1. vue中常見的指令

1.1 數據相關的指令

v-text：
- 主要用來更新textContent
- 雙大括號的方式會將數據解釋為純文本，而非HTML

<span v-text="msg"></span>

<!-- 兩者等價 -->
<span>{{msg}}</span>

v-html：
- 命令模式可以解釋html

<div v-html="rawHtml"></div>

v-model：
- 用于在表單上創建雙向數據綁定

<div id="app">
    <input v-model="somebody">
    <p>hello {{somebody}}</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            somebody:'小明'
        }
    })
</script>

上面這個例子中直接在瀏覽器input中輸入別的名字，下面的p的內容會直接跟著變。這就是雙向數據綁定。

v-model：僅僅是一個語法糖，相當于 :value+@input

input事件：當輸入框中的數據改變時發生

1.2屬性相關的指令：

v-bind ``>
- 用于綁定html標簽中的屬性
  - v-bind:href="數據"
  - 簡寫： :href = "數據"

<a v-bind:href="hrefname">百度</a>
<a :href="hrefname">百度</a>

<script>
var app = new Vue({
    el:"#app",
    data: {
        hrefname:"http://www.baidu.com",
    }
})    
</script>

1.3 條件指令：

v-if v-if可以實現條件渲染，Vue會根據表達式的值的真假條件來渲染元素。

<a v-if="ok">yes</a>

如果屬性值ok為true，則顯示。否則，不會渲染這個元素。

v-else v-else是搭配v-if使用的，它必須緊跟在v-if或者v-else-if后面，否則不起作用。

<a v-if="ok">yes</a>
<a v-else>No</a

v-else-if v-else-if充當v-if的else-if塊，可以鏈式的使用多次。可以更加方便的實現switch語句。

<div v-if="type``='A'">
    A
</div>
<div v-if="type``='B'">
    B
</div>
<div v-if="type``='C'">
    C
</div>
<div v-else>
    Not A,B,C
</div>

v-show

<h1 v-show="ok">hello world</h1>

也是用于根據條件展示元素。和v-if不同的是，如果v-if的值是false，則這個元素被銷毀，不在dom中。但是v-show的元素會始終被渲染并保存在dom中，它只是簡單的切換css的dispaly屬性。

注意：v-if有更高的切換開銷 v-show有更高的初始渲染開銷。因此，如果要非常頻繁的切換，則使用v-show較好；如果在運行時條件不太可能改變，則v-if較好

特別提醒

v-show需要放到一個真實的dom上，不能放在template上面

1.4 循環指令：

v-for 遍歷數組

 <p v-for="(value,index) in links">{{value}}</p>

注意:在使用v-for過程中，要綁定唯一的key，key盡量不要綁定index，如果有id盡量綁定id

<p v-for="(value,index) in links" :key="index">{{value}}</p>

特別提醒

建議不要在與v-for相同的元素上使用v-if。因為v-for指令的優先級高于v-if當它們處于同一節點。v-for 的優先級比v-if 更高，這意味著 v-if 將分別重復運行于每個 v-for 循環中。

1.5 兩個特殊的屬性：class style

class
- :class="數據"
- :class="三元運算符"
- :class="{類名:boolean}"
- :class="{類名1:boolean,類名2:boolean}"
- 類名中有-，需要使用引號包起來
- :class="['類名']"

<style>
    .abc{color: red;}
    .def{background-color: blue;}
    .g-h{color: yellow;}
</style>

<div id="app">
    <p class="abc">這是一個p標簽</p>
    <p :class="className">這是一個p標簽</p>
    <!-- ? :  三元運算符 -->
    <p :class="isPass ? className : ''">這是一個p標簽</p>
    <p :class="{abc:true}">這是一個p標簽</p>
    <p :class="{abc:isPass}">這是一個p標簽</p>
    <p :class="{abc:isPass,def:true}">這是一個p標簽</p>
    <p :class="{'g-h':true}">這是一個p標簽</p>
    <p :class="['abc','def']">這是一個p標簽</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            name:"wangcai",
            className:"abc",
            isPass:true,
        }
    })    
</script>

style的用法

<div id="app">
    <p :style="myStyle">這是一個p標簽</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            myStyle:{color:'red',backgroundColor:'blue'}
        }
    })    
</script>

2. vue 中掛載的屬性及方法

2.1 el

el指定app管理的邊界

面試題

如何通過$el獲取到更新后的dom元素？答：在下一下事件環中得到更新后dom元素

2.2 data

數據模型

2.3 methods

2.4 computed

計算屬性,依賴于data中的數據

計算屬性和方法的區別：

1，它們兩個本質都是函數
2，用的時候，方法需要調用，計算屬性是當成數據來使用
3，方法沒有緩存，計算屬性有緩存

2.5 filters

過濾器

過濾器的簡單使用：

2.6 components

組件：三部曲

定義組件

注冊組件

使用組件

組件的簡單使用：

2.7 鉤子函數

生命周期方法

2.8 $watch

$watch可以監控Data中的數據,通過$watch得到值，肯定是更新后的值使用

vm.$watch( "name", function(newValue,oldValue){ } )

2.9 $nextTick()

vue中的$nextTick主要涉及到vue中DOM的異步更新 nextTick應用場景及原因

在Vue生命周期的created()鉤子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中

原因：在created()鉤子函數執行的時候DOM 其實并未進行任何渲染，而此時進行DOM操作無異于徒勞，所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted()鉤子函數，因為該鉤子函數執行時所有的DOM掛載和渲染都已完成，此時在該鉤子函數中進行任何DOM操作都不會有問題。

在數據變化后要執行的某個操作，而這個操作需要使用隨數據改變而改變的DOM結構的時候，這個操作都應該放進Vue.nextTick()的回調函數中。

Vue的官方文檔中詳細解釋

Vue 異步執行 DOM 更新。只要觀察到數據變化，Vue 將開啟一個隊列，并緩沖在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。這種在緩沖時去除重復數據對于避免不必要的計算和 DOM 操作上非常重要。然后，在下一個的事件循環“tick”中，Vue 刷新隊列并執行實際 (已去重的) 工作。Vue 在內部嘗試對異步隊列使用原生的 Promise.then 和MessageChannel，如果執行環境不支持，會采用 setTimeout(fn, 0)代替。

例如，當你設置vm.someData = 'new value'，該組件不會立即重新渲染。當刷新隊列時，組件會在事件循環隊列清空時的下一個“tick”更新。多數情況我們不需要關心這個過程，但是如果你想在 DOM 狀態更新后做點什么，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員沿著“數據驅動”的方式思考，避免直接接觸 DOM，但是有時我們確實要這么做。為了在數據變化之后等待 Vue 完成更新 DOM ，可以在數據變化之后立即使用Vue.nextTick(callback)。這樣回調函數在 DOM 更新完成后就會調用。

2.10 $set

$set可以給data中動態地添加一個數據，前提是只能給對象中添加數據

示例

3. 事件模型

事件三要素： 事件源，事件類型，監聽器

語法：v-on: 處理事件或 @處理事件

3.1 事件類型

鼠標事件：
- click：單擊事件
- dblclick：雙擊事件
- mouseover：鼠標進入事件
- mouseout：鼠標移開事件
- mouseenter：鼠標進入事件
- mouseleave：鼠標離開
- mousedown：鼠標按下
- mousemove：鼠標移動
- mouseup：鼠標抬起
鍵盤事件：
- keyup：鍵盤抬起
- keypress：按鍵并產生第一個字符時
- keydown：鍵盤按下
UI事件：
- scroll：滾動條事件
- resize：瀏覽器窗口改變
- load：文檔加載完畢
- unload：文檔未加載
焦點事件：
- focus：焦點事件
- blur：失去焦點
表單事件：
- change：數據發生改變時
- submit：提交

注意:mouseover / mouseout 與 mouseenter / mouseleave的區別

當綁定事件的元素里面沒有子元素的時候，兩組觸發效果是一致的。

當綁定事件的元素里面有子元素的時候，鼠標經過綁定mouseover的當前元素以及它里面的子元素的時候，都會觸發，而經過綁定mouseenter的元素時，只會在鼠標剛進入的時候觸發，當進入其子元素的時候，是不會再觸發的了。

總結：

不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。對應mouseout
只有在鼠標指針穿過被選元素時，才會觸發 mouseenter 事件。對應mouseleave

3.2 事件對象

當事件發生時，事件對象中保存了很多信息，如點擊的坐標。 $event 固定的名字

示例：

3.3 事件修飾符

stop：阻止冒泡
prevent：阻止默認事件
capture：冒泡改為捕獲
self：只處理發生在自己身上的事件，不理會冒泡或捕獲（把self放到誰的身上，誰就不會觸發）
once：只執行一次

示例：

3.4 鍵盤事件修飾符

keyCode 鍵盤修飾符

示例：

自定義按鍵名稱

// 自定義按鍵名稱
Vue.config.keyCodes.ent = 13;

// 頁面引用
<input type="text" @keyup.ent="enter_click"/>

4. 組件

4.1 全局組件

全局組件 : 定義全局組件，在每個組件中都可以進行引用

語法：

Vue.component("組件名",{template:"組件內容"})

示例：

4.2 局部組件：

組件：三部曲

定義組件

注冊組件

使用組件

示例：

5. 組件之間的數據傳遞

5.1 父傳子

父傳子 : 父中有數據，傳遞給子,

步驟：

1，確定父中有數據 2，在父組件的模板中通過屬性綁定把數據綁到子組件上 3，在子組件中定義props屬性，用來接收父傳遞過來的數據 4，在子組件的模板就可以使用接收過來的數據了

示例:

屬性校驗：

總結：

父綁定數據子接收數據

5.2 子傳父

過程：

在父組件模板中，給子組件添加一個事件監聽

在子組件中，某個時間通過this.$emit發出這個事件，發出事件的同時就可以攜帶數據

當父中的方法觸發，數據作用這個方法的第一個參數

示例：

6. vue腳手架

6.1 腳手架的安裝

安裝node

2. 安裝nrm

npm i nrm -g

切換安裝源
- 查看安裝源
  nrm ls
  
  切換安裝源 nrm use taobao
安裝vue的腳手架

npm i -g @vue/cli

創建vue項目

vue create myvue

進入項目

cd myvue

啟動項目

npm run serve

6.2 組件的使用

組件的定義

2. 組件的使用（main.js主接口）

7. router(路由)的使用

7.1 基本路由

html代碼


<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 組件來導航. -->
    <!-- 通過傳入 `to` 屬性指定鏈接. -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>

  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這里 -->
  <router-view></router-view>
</div>

script代碼


// 1\. 定義 (路由) 組件。
// 可以從其他文件 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2\. 定義路由
// 每個路由應該映射一個組件。 其中"component" 可以是
// 通過 Vue.extend() 創建的組件構造器，
// 或者，只是一個組件配置對象。

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3\. 創建 router 實例，然后傳 `routes` 配置
// 你還可以傳別的配置參數, 不過先這么簡單著吧。
const router = new VueRouter({
  routes // (縮寫) 相當于 routes: routes
})

// 4\. 創建和掛載根實例。
// 記得要通過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 現在，應用已經啟動了！

通過路由

我們可以在任何組件內通過 this.$router 訪問路由器，也可以通過 his.$route 訪問當前路由：

7.2 嵌套路由

嵌套路由的組件

router的注冊

7.3 動態路由

list列表需要動態跳轉的列表

router.js中對路由進行相關的配置

調轉頁面對數據進行獲取

7.4 編程路由

格式

router.push(location, onComplete?, onAbort?)

注意：

在 Vue 實例內部，你可以通過 $router訪問路由實例。因此你可以調用 this.$router.push。

示例：

7.5 重定向

示例：

8. axios的使用

安裝axios

npm install axios

引入axios

import axios from 'axios';

axios的簡單使用

9. vue中的生命周期方法

當vue的實例創建時，會伴隨一系列的方法運行，稱作生命周期函數

9.1 beforeCreate()

這是第一個生命周期函數，表示實例完全被創建之前會被執行
該方法執行時，data和methods中的數據還沒有初始化

9.2 created()

該方法執行時，data與mathods中的數據已經初始化好了
要操作data,methods中的數據，最早只能在該處進行操作

9.3 beforeMount()

表示模板已經在內存中編輯完成，但尚未將模板渲染到頁面中
該方法執行時，頁面中的元素沒有真正替換過來，只是一些模板字符串

9.4 mounted()

表示內存中的模板，已經掛載到頁面中，用戶可以看到渲染后的頁面
如果通過某些插件操作頁面上的DOM節點，最早在該方法中執行

9.5 beforeUpdate()

表示：當前頁面沒有更新，但是數據已經更新

9.6 updated()

表示：頁面和數據均已經更新

9.7 beforeDestory()

實例從運行階段進入銷毀階段，此時實例中的東西仍處于可用狀態

9.destoryed()

所有組件完全被銷毀

10. vue中組件之間的傳值方式

10.1 props 與 $emit

父組件向子組件傳遞數據是通過prop傳遞的，子組件傳遞數據給父組件是通過$emit觸發事件來做到的。

props 與 $emit的簡單使用

注意： 使用$emit 觸發父類綁定的方法時，觸發的名稱必須全部是小寫，若父類綁定使用到小駝峰，則在觸發時，全部變成小寫，駝峰之間用-隔開

10.2 attrs和listeners

可以實現父組件與孫子組件之間的數據的傳遞 this.attrs如果子接受的數據沒有用到，把數據保存在attrs中

$attrs的簡單使用

特別提醒

父組件中所綁定的傳給父組件的屬性，都存放在$attrs中，若在子組件中不接收，直接進行綁定，可以使用：

v-bind="this.$attars"

$listenners的簡單使用

觸發父傳遞的click事件： @click="listeners.click()"觸發父傳遞多個事件：v-on="listeners"

10.3 parent與children

$parent 獲取父組件的實例，可以以此來調用父組件中的方法。
- 示例：
- this.$parent.cut();
$children 獲取所有的兒子, 可以以此來獲取子組件中的數據
- 示例：
- this.$children[0].msg = "張三"

特別提醒

parent: 獲取的是父親的實例children：獲取的是所有的子組件的實例
children：獲取的是所有子組件的實例

10.4 provice 與 inject的使用

10.5 refs的使用

ref 與refs是成對使用 ref 用于定義 $refs用戶獲取

10.6 自定義$dispatch

$dispatch 是掛載到Vue實例上的一個方法，自動向上父類中查找觸發的方法，如果該方法存在就觸發

示例

10.7 事件總線`eventBus`

原理

事件總線是，在vue的原型上，掛載一個$eventBus事件(名字自己起)，通過$on進行綁定事件，先在事件中心中注冊一些事件在需要的位置就可以通過$emit去發布事件(觸發事件)

示例

10.8 數據傳遞的語法糖

在數據進行傳遞的時候，數據的傳遞與觸發的方法結合，可以有比較簡便的語法糖，更加方便程序的開發，但是與此同時也有一定的難度，不是很容易懂。下面就簡單的介紹幾種語法糖。

10.8.1 `.sync`語法糖

.sync是@update:data的語法糖，data是vue中data中的數據

在給子類傳遞數據的時候，通過.sync對屬性進行限定，在子類中可以直接觸發update:數據名稱來修改父類中對應的數據，該方法可以省去父類中修改屬性的方法。

沒有使用.sync之前

傳遞數據，綁定屬性
修改數據值，綁定修改的方法
觸發綁定的修改方法，調用修改方法

示例

使用.sync之后

傳遞數據，綁定屬性.sync
觸發update:數據名，直接修改數據

沒有簡化：簡化后：

示例

特別注意

update是規定的觸發的方法，update冒號后面跟的必須是父類中要修改的數據的數據名

10.8.2 `v-model`語法糖

v-model是:value和@input的語法糖,綁定的屬性必須是value

在給子類傳遞數據的時候，直接使用v-model進行綁定，在子類中，可以觸發input事件，來達到修改數據的目的

示例

特別注意

v-model 相當于 :value + @input 相當于上述方法的簡寫

11 vue中數據監控的原理（數據劫持）

數據監控： : 監控數據的獲取與改變，可以簡稱為數據劫持。

vue中data數據的監控原理：

代碼如下：

// 數據的監控，監控數據的獲取與改變
// vue中data數據的監控原理
obj = {
    name: "wangcai",
    age:18
};

function obServe(obj){
    if(typeof obj ``= "object"){
        for(key in obj){
            defineReactive(obj,key,obj[key]);
        }
    }
}

function defineReactive(obj,key,value){
    obServe(value);
    Object.defineProperty(obj,key,{
        get(){
            console.log("get...");
            return value;
        },
        set(val){
            console.log('set... :');
            obServe(val);
            value = val;
        }
    })
}

// defineProperty是數組是無效的
//解決方式如下：
// vue中封裝了數據的所有的方法，此處只做列舉
let arr = ["push","slice","shift","unshift"]
arr.forEach(method=>{
    let old = Array.prototype[method];
    Array.prototype[method] = function(value){
        console.log("set...")
        old.call(this,value)
    }
})
//-----------------------------------------------------------
// 測試數組
// observer(obj)
// obj.age = [1,2,3] // set..
// obj.age.push(4)  // 設置值  defineProperty對數據是無效的
//-----------------------------------------------------------------
// 測試簡單的對象
// obServe(obj)
// console.log(obj.name)    //get...
// obj.name = "hello"       // set...

// 測試嵌套的對象
// observer(obj)
// obj.name  // get...
// obj.name = "hello" // set...
// obj.age = { k:"kkkk" }  // set...
// obj.age.k = "mmmm"  // set...

12. 路由跳轉的傳值方式

在vue的路由跳轉中有兩種方式，分別是問號模式，和冒號模式，兩者不能進行混合使用，

12.1 問號傳值方式

格式

傳值： <router-link to="/user/detail?id=1">用戶1</router-link> 獲取值： {{this.$route.query.id}}

注意：使用問號進行傳值的時候不需在router中特別設置路由

12.2 冒號傳值方式

格式

傳值： <router-link to="/user/detail/2">用戶2</router-link> 配置router路由文件 path:"detail/:id", 獲取值： {{this.$route.params.id}}

13. 路由的生命周期方法

13.1 全局路由守衛

在全局中有三個路由守衛，分別是beforeEach,beforeResolve,afterEach

beforeEach
- 路由正在開始發生改變的時候開始調用。
- 格式：
- router.beforeEach((to, from, next) => {}
beforeResolve
- 所有組件中的路由守衛解析完畢之后，被調用
- 格式：
- router.beforeResolve((to, from, next) => {}
afterEach
- 當前的路由進入完畢之后，被調用
- 全局后置鉤子，不接受next函數
- 格式：
- router.afterEach((to, from) => {}

13.2 路由獨享的守衛

beforeEnter
- 當進入到路由的配置中，被調用

格式：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

13.3 組件內的守衛

在組件的內部存在整合三個路由組件，分別是beforeRouteEnter、beforeRouteUpdate 、beforeRouteLeave

beforeRouteEnter
- 在進入組件之前，被調用，
- 此時的組件實例沒有被創建，不能獲取組件實例this
- 示例：

beforeRouteUpdate
- 當前路由發生改變的時候，
- 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
- 可以訪問組件實例 this
- 格式：
- beforeRouteUpdate ((to, from, next) => {}
beforeRouteLeave
- 當離開該組件的時候被調用，
- 可以訪問組件實例 this
- 格式：
- beforeRouteLeave((to, from, next) => {}

13.4 總結

導航被觸發。 beforeEach
在失活的組件里調用離開守衛 beforeRouterLeave。
調用全局的 beforeEach 守衛。
在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。
在路由配置里調用 beforeEnter。
解析異步路由組件。
在被激活的組件里調用 beforeRouteEnter。
調用全局的 beforeResolve 守衛 (2.5+)。
導航被確認。
調用全局的 afterEach 鉤子。
觸發 DOM 更新。
用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

14 vue.config的簡單配置

14.1 vue的簡單配置+前端代理解決跨域

源碼

// 基于node的 node不支持import語法
// 默認環境變量 NODE_ENV 生產環境   production development
let path = require('path');
module.exports = {

    // 配置開發環境(npm run serve)或生產環境(npm run build)url
    publicPath:process.env.NODE_ENV ``= 'production'? 'http://www.abcd.cn':'/',

    //打包后的資源放入的文件夾,默認未放入文件夾
    assetsDir:'asserts',

    //打包后生成的文件夾，默認是dist
    outputDir:'./dist',

    // 是否使用自己的內部模板 一般不使用
    runtimeCompiler:false,

    // 打包后刪除生成的.map文件 不再使用sourcemap
    productionSourceMap:false,

    chainWebpack:config=>{
        // 可以獲取到webpack的配置 在增加一些自己的邏輯
        // 配置目錄別名 別名叫+
        config.resolve.alias.set('_c',path.resolve(__dirname,'src/components'));
        config.resolve.alias.set('_v',path.resolve(__dirname,'src/views'));
    },

    //webpack配置，到時候會合并到默認的webpack中。
    configureWebpack:{ // webpack-merge
        plugins:[],
        module:{}
    },

    // 開發 服務時使用  上線時不需要 解決跨域的問題
    devServer:{
        proxy:{
            '/api/getUser':{
                target:'http://localhost:3000',
                pathRewrite:{
                    '/api':''
                }
            }
        }
    },

    //第三方插件的配置
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                path.resolve(__dirname,'src/assets/common.less')
            ]
        }
    }
}

14.2 后端代理解決跨域問題

源碼

let express = require('express');
let app = express();

// 在后端配置，讓所有的人都可以訪問我的api接口
app.use('*', function (req, res, next) {
    // 允許哪些客戶端來訪問我
    res.setHeader("Access-Control-Allow-Origin","*");
    // 允許可以添加哪些頭，然后來訪問我
    res.setHeader("Access-Control-Allow-Headers","*");
    // res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization');

    // 允許哪些方法來訪問我
    res.setHeader("Access-Control-Allow-Methods","OPTIONS,PUT,DELETE");
    // res.header('Access-Control-Allow-Methods', '*');

    // 可以每隔半小時，來發送一個options請求--試探請求
    res.setHeader("Access-Control-Max-Age","1800");

    // 請求的類型編碼
    res.header('Content-Type', 'application/json;charset=utf-8');

    // 允許客戶端攜帶憑證,處理cookie信息，如果有，并且不對每次請求都新開一個session
    res.setHeader("Access-Control-Allow-Credentials",true);
    next();
});

15. 路由元信息

路由的元信息一般可用于權限的校驗

定義路由的時候可以配置 meta 字段

配置meta字段，該字段配置為對象信息

一個路由匹配到的所有路由記錄會暴露為 $route 對象 (還有在導航守衛中的路由對象) 的 $route.matched 數組。因此，我們需要遍歷 $route.matched 來檢查路由記錄中的 meta 字段。

示例：

</article>

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

vue講解基礎知識點總結

https://juejin.im/post/5d5375a0f265da03db076f59#heading-32

vue基礎知識點

1. vue中常見的指令

1.1 數據相關的指令

1.2屬性相關的指令：

1.3 條件指令：

1.4 循環指令：

1.5 兩個特殊的屬性：class style

2. vue 中掛載的屬性及方法

2.1 el

2.2 data

2.3 methods

2.4 computed

2.5 filters

2.6 components

2.7 鉤子函數

2.8 $watch

2.9 $nextTick()

2.10 $set

3. 事件模型

3.1 事件類型

3.2 事件對象

3.3 事件修飾符

3.4 鍵盤事件修飾符

4. 組件

4.1 全局組件

4.2 局部組件：

5. 組件之間的數據傳遞

5.1 父傳子

5.2 子傳父

6. vue腳手架

6.1 腳手架的安裝

6.2 組件的使用

7. router(路由)的使用

7.1 基本路由

7.2 嵌套路由

7.3 動態路由

7.4 編程路由

7.5 重定向

8. axios的使用

9. vue中的生命周期方法

9.1 beforeCreate()

9.2 created()

9.3 beforeMount()

9.4 mounted()

9.5 beforeUpdate()

9.6 updated()

9.7 beforeDestory()

9.destoryed()

10. vue中組件之間的傳值方式

10.1 props 與 $emit

10.2 attrs和listeners

10.3 parent與children

10.4 provice 與 inject的使用

10.5 refs的使用

10.6 自定義$dispatch

10.7 事件總線eventBus

10.8 數據傳遞的語法糖

10.8.1 .sync語法糖

10.8.2 v-model語法糖

11 vue中數據監控的原理（數據劫持）

12. 路由跳轉的傳值方式

12.1 問號傳值方式

12.2 冒號傳值方式

13. 路由的生命周期方法

13.1 全局路由守衛

13.2 路由獨享的守衛

13.3 組件內的守衛

13.4 總結

14 vue.config的簡單配置

14.1 vue的簡單配置+前端代理解決跨域

14.2 后端代理解決跨域問題

15. 路由元信息

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

10.7 事件總線`eventBus`

10.8.1 `.sync`語法糖

10.8.2 `v-model`語法糖