Vue初級(jí) 組建通信基本屬性指令

Vue指令
Vue 基本屬性
Vue組件通信

Vue 基本屬性

data 屬性

在.vue擴(kuò)展名文件下，data屬性必須定義為函數(shù)形式唉地，在普通的Vue對(duì)象中据悔，data屬性就是一個(gè)對(duì)象。

相當(dāng)于react中state耘沼，代表了當(dāng)前組件的狀態(tài)极颓；組件呈現(xiàn)一個(gè)什么樣的狀態(tài)，data屬性就必須有什么樣的描述耕拷。

el屬性

Vue 對(duì)象/組件將要掛載頁面元素讼昆，可以使用選擇器

類型：string | Element 選擇器|HTML元素
限制：只在用 new 創(chuàng)建實(shí)例時(shí)生效。
詳細(xì)：

提供一個(gè)在頁面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo)骚烧。可以是 CSS 選擇器闰围，也可以是一個(gè) HTMLElement 實(shí)例赃绊。

 el:"#app"
})```

#### components屬性

*   **類型**：`Object`

*   **詳細(xì)**：

包含 Vue 實(shí)例可用組件的哈希表。

#### methods屬性

事件處理函數(shù)羡榴、組件業(yè)務(wù)邏輯函數(shù)等等都必須定義在methods屬性中碧查，注意定義在method屬性中的函數(shù)，不能使用箭頭函數(shù)

*   **類型**：`{ [key: string]: Function }` 對(duì)象

*   **詳細(xì)**：

    methods 將被混入到 Vue 實(shí)例中≈沂郏可以直接通過 VM 實(shí)例訪問這些方法传惠，或者在指令表達(dá)式中使用。方法中的 `this` 自動(dòng)綁定為 Vue 實(shí)例稻扬。

    > 注意卦方，**不應(yīng)該使用箭頭函數(shù)來定義 method 函數(shù)** (例如 `plus: () => this.a++`)。理由是箭頭函數(shù)綁定了父級(jí)作用域的上下文泰佳，所以 `this` 將不會(huì)按照期望指向 Vue 實(shí)例盼砍，`this.a` 將是 undefined。

#### computed計(jì)算屬性

*   **類型**：`{ [key: string]: Function | { get: Function, set: Function } }`

```{
 key:function
 key:{

 }
}```
計(jì)算屬性對(duì)應(yīng)的是定義在data屬性中數(shù)據(jù)逝她，當(dāng)參與計(jì)算的data中的數(shù)據(jù)發(fā)生變化浇坐，相應(yīng)的計(jì)算屬性對(duì)應(yīng)函數(shù)會(huì)被調(diào)用，重新計(jì)算并且返回結(jié)果黔宛。計(jì)算屬性會(huì)監(jiān)聽data中參與計(jì)算的數(shù)據(jù)近刘。

計(jì)算屬性的結(jié)果會(huì)被緩存，除非依賴的響應(yīng)式屬性變化才會(huì)重新計(jì)算臀晃。注意跌宛，如果某個(gè)依賴 (比如非響應(yīng)式屬性) 在該實(shí)例范疇之外，則計(jì)算屬性是**不會(huì)**被更新的积仗。

#### watch 監(jiān)聽屬性

監(jiān)聽定義在data屬性中的數(shù)據(jù)疆拘，監(jiān)聽的數(shù)據(jù)發(fā)生變化，就會(huì)觸發(fā)相應(yīng)的處理函數(shù)

**類型**：`{ [key: string]: string | Function | Object | Array }`

```var vm = new Vue({
 data: {
 a: 1,
 b: 2,
 c: 3,
 d: 4,
 e: {
 f: {
 g: 5
 }
 }
 },
 watch: {
 a: function (val, oldVal) {
 console.log('new: %s, old: %s', val, oldVal)
 },
 // 方法名
 b: 'someMethod',
 // 該回調(diào)會(huì)在任何被偵聽的對(duì)象的 property 改變時(shí)被調(diào)用寂曹，不論其被嵌套多深
 c: {
 handler: function (val, oldVal) { /* ... */ },
 deep: true
 },
 // 該回調(diào)將會(huì)在偵聽開始之后被立即調(diào)用
 d: {
 handler: 'someMethod',
 immediate: true
 },
 // 你可以傳入回調(diào)數(shù)組哎迄，它們會(huì)被逐一調(diào)用
 e: [
 'handle1',
 function handle2 (val, oldVal) { /* ... */ },
 {
 handler: function handle3 (val, oldVal) { /* ... */ },
 /* ... */
 }
 ],
 // watch vm.e.f's value: {g: 5}
 'e.f': function (val, oldVal) { /* ... */ }
 }
})
vm.a = 2 // => new: 2, old: 1```

#### 監(jiān)聽屬性和計(jì)算屬性的區(qū)別

[https://www.cnblogs.com/jiajialove/p/11327945.html](https://www.cnblogs.com/jiajialove/p/11327945.html)

## Vue 指令

#### v-show

根據(jù)表達(dá)式之真假值，切換元素的 `display` CSS 屬性隆圆。

當(dāng)條件變化時(shí)該指令觸發(fā)過渡效果漱挚。

v-show綁定的boolean值，如果綁定值是true渺氧，則當(dāng)前元素顯示旨涝，如果綁定的值是false，則當(dāng)前元素隱藏

#### v-bind

動(dòng)態(tài)地綁定一個(gè)或多個(gè)屬性侣背，或一個(gè)組件 prop 到表達(dá)式白华。

#### v-if v-else v-else-if

有條件的渲染元素或者組件，只有v-if可以單獨(dú)使用贩耐，v-else或者v-elsep-if必須與v-if聯(lián)用

v-if：如果指令綁定的表達(dá)式的取值為true弧腥，則指令所在的元素被渲染，否則則不渲染

v-else：如果上一兄弟元素的v-if取值為false潮太，則v-else所在元素被渲染管搪，反之虾攻，上一兄弟元素的v-if綁定的值為true，則不渲染

v-else-if：如果上一兄弟元素綁定的表達(dá)式的值沒有匹配到更鲁，則判斷v-else-if的取值霎箍，如果是true，則指令所在元素被渲染澡为，否則不渲染

#### v-text

更新元素的 `textContent`漂坏。如果要更新部分的 `textContent`，需要使用 `{{ Mustache }}`插值缀壤。

```<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>```

#### v-html

等同于innerHTML樊拓，更新元素的 innerHTML

#### v-for

基于源數(shù)據(jù)多次渲染元素或模板塊。此指令之值塘慕，必須使用特定語法 `alias in expression`筋夏，為當(dāng)前遍歷的元素提供別名：

```<div class="list_item" v-for="(number,index) in items" :key="index">{{number}}</div>```

#### v-on

綁定事件監(jiān)聽器。事件類型由參數(shù)指定图呢。表達(dá)式可以是一個(gè)方法的名字或一個(gè)內(nèi)聯(lián)語句条篷，如果沒有修飾符也可以省略。

用在普通元素上時(shí)蛤织，只能監(jiān)聽原生 DOM 事件用在自定義元素組件上時(shí)赴叹，也可以監(jiān)聽子組件觸發(fā)的自定義事件。

##### 事件修飾符

*   `.stop` - 調(diào)用 `event.stopPropagation()` 阻止事件冒泡指蚜。

*   `.prevent` - 調(diào)用 `event.preventDefault()`乞巧。阻止元素的默認(rèn)行為。

*   `.capture` - 添加事件偵聽器時(shí)使用 capture 模式摊鸡。

*   `.self` - 只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)绽媒。

*   `.{keyCode | keyAlias}` - 只當(dāng)事件是從特定鍵觸發(fā)時(shí)才觸發(fā)回調(diào)。

*   `.native` - 監(jiān)聽組件根元素的原生事件免猾。

*   `.once` - 只觸發(fā)一次回調(diào)是辕。

*   `.left` - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時(shí)觸發(fā)。

*   `.right` - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時(shí)觸發(fā)猎提。

*   `.middle` - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時(shí)觸發(fā)获三。

*   `.passive` - (2.3.0) 以 `{ passive: true }` 模式添加偵聽器

```<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
?
<!-- 動(dòng)態(tài)事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
?
<!-- 內(nèi)聯(lián)語句 -->
<button v-on:click="doThat('hello', $event)"></button>
?
<!-- 縮寫 -->
<button @click="doThis"></button>
?
<!-- 動(dòng)態(tài)事件縮寫 (2.6.0+) -->
<button @[event]="doThis"></button>
?
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
?
<!-- 阻止默認(rèn)行為 -->
<button @click.prevent="doThis"></button>
?
<!-- 阻止默認(rèn)行為，沒有表達(dá)式 -->
<form @submit.prevent></form>
?
<!--  串聯(lián)修飾符 -->
<button @click.stop.prevent="doThis"></button>
?
<!-- 鍵修飾符锨苏，鍵別名 -->
<input @keyup.enter="onEnter">
?
<!-- 鍵修飾符疙教，鍵代碼 -->
<input @keyup.13="onEnter">
?
<!-- 點(diǎn)擊回調(diào)只會(huì)觸發(fā)一次 -->
<button v-on:click.once="doThis"></button>
?
<!-- 對(duì)象語法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>```
#### v-model 雙向綁定

只能輸入元素上使用

##### 修飾符：

*   [`.lazy`](https://cn.vuejs.org/v2/guide/forms.html#lazy) - 取代 `input` 監(jiān)聽 `change` 事件

*   [`.number`](https://cn.vuejs.org/v2/guide/forms.html#number) - 輸入字符串轉(zhuǎn)為有效的數(shù)字

*   [`.trim`](https://cn.vuejs.org/v2/guide/forms.html#trim) - 輸入首尾空格過濾

## Vue 組件通信

#### props屬性

*   **類型**：`Array | Object`

*   **詳細(xì)**：

    props 可以是數(shù)組或?qū)ο螅糜诮邮諄碜愿附M件的數(shù)據(jù)蚓炬。props 可以是簡(jiǎn)單的數(shù)組松逊，或者使用對(duì)象作為替代，對(duì)象允許配置高級(jí)選項(xiàng)肯夏，如類型檢測(cè)、自定義驗(yàn)證和設(shè)置默認(rèn)值。

#### 發(fā)布訂閱模式

#### 父?jìng)髯?
*1* 驯击、在父組件中的子組件標(biāo)簽中定義傳遞數(shù)據(jù)屬性烁兰，需要使用動(dòng)態(tài)綁定來傳遞數(shù)據(jù)

*2* 、在子組件中徊都，增加props屬性沪斟，在props屬性中定義一個(gè)與傳遞數(shù)據(jù)時(shí)定義名稱相同屬性用來接受數(shù)據(jù)，然后表明數(shù)據(jù)數(shù)據(jù)類型

*3* 暇矫、使用數(shù)據(jù)

``` //父組件
<NavigationBar title="我的"/>
?
?
//子組件
<template>
 <div class="navigation_bar_container">
 <div class="navigation_bar_wrapper">
 <div class="navigation_bar_back_icon">
 <img src="../assets/fanhui.png"
 v-on:click="onClicBack"/>
 </div>
 <div>{{title}}</div>
 <div></div>
 </div>
 </div>
</template>
?
<script>
export default {
 //props屬性
 props:{
 title:String//如果傳遞的數(shù)據(jù)不符合定義時(shí)的數(shù)據(jù)類型主之，vue將拋出警告
 }```
### 子傳父

利用Vue提供的觸發(fā)自定義事件$emit函數(shù)實(shí)現(xiàn)

*1* 、子組件需要向父組件傳遞數(shù)據(jù)時(shí)李根，使用$emit函數(shù)出發(fā)自定義事件槽奕，并傳遞數(shù)據(jù)

*2* 、在父組件中房轿，增加對(duì)自定義事件的監(jiān)聽粤攒，子組件觸發(fā)自定義事件后，父組件監(jiān)聽并執(zhí)行事件對(duì)應(yīng)的處理函數(shù)囱持，然后獲取子組件傳遞給父組件的數(shù)據(jù)

```//子組件
methods:{
 onClicBack(){
 // 函數(shù)
 //參數(shù)1：自定義事件名稱
 //參數(shù)2:事件觸發(fā)需要傳遞的數(shù)據(jù)
 this.$emit("goback",111111)
 }
 }
?
//父組件
//監(jiān)聽自定義事件goback夯接，觸發(fā)后執(zhí)行函數(shù)back
 <NavigationBar title="我的"
 v-on:goback="back"/>```
#### 跨組件傳值（兄弟組件傳值）

在Vue中，兄弟組件傳值我們使用的是eventBus方式

首先纷妆，創(chuàng)建一個(gè)名稱為EventBus的Vue對(duì)象（組件）：

```import Vue from "vue";
//中轉(zhuǎn)站
//創(chuàng)建了一個(gè)Vue對(duì)象盔几，使用這個(gè)vue對(duì)象作為中轉(zhuǎn)站
const EventBus = new Vue({

})

export default EventBus;

然后，在將要傳遞數(shù)據(jù)的組件中引入掩幢，當(dāng)我們想要傳遞數(shù)據(jù)的時(shí)候逊拍，使用EventBus對(duì)象觸發(fā)一個(gè)自定義事件，將需要傳遞的數(shù)據(jù)以事件觸發(fā)方式傳遞：

  <div class="input_container">
    <div class="input">
      <input type="text" placeholder="請(qǐng)輸入將要提交的內(nèi)容"
      v-model="inputValue"/>
    </div>
    <div class="button">
      <button v-on:click="onClcikSumit">提交</button>
    </div>
  </div>
</template>

<script>
import EventBus from "../EventBus/EventBus";

export default {
  data(){
    return{
      inputValue:""
    }
  },
  methods:{
    onClcikSumit(){
      // var inputValue = this.$refs.input.value;
      // window.console.log(this.inputValue);
      //$emit觸發(fā)一個(gè)自定義事件
      EventBus.$emit("submitMessage",this.inputValue);
    }
  }
}
</script>

最后粒蜈，在接受數(shù)據(jù)的組件中顺献，同樣引入EventBus組件，在接受數(shù)據(jù)組件掛載結(jié)束的生命周期函數(shù)中枯怖，監(jiān)聽觸發(fā)的自定義事件：

  <div class="content_container">
    {{content}}
  </div>
</template>

<script>
import EventBus from "../EventBus/EventBus";

export default {
  data(){
    return{
      content:""
    }
  },
  mounted(){
    EventBus.$on("submitMessage",(message)=>{
      this.content = message
      window.console.log(message)
    });
  }
}
</script>

當(dāng)事件觸發(fā)后注整，就會(huì)監(jiān)聽到事件，然后執(zhí)行事件對(duì)應(yīng)的函數(shù)度硝，獲取到傳遞的數(shù)據(jù)肿轨。

Vue初級(jí) 組建通信 基本屬性 指令

Vue 基本屬性

data 屬性

el屬性

Vue初級(jí) 組建通信基本屬性指令