大香蕉暖暖,精品久久久婷婷香蕉,上床视频网站

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

Vue 基本屬性

data 屬性

在.vue擴展名文件下，data屬性必須定義為函數(shù)形式，在普通的Vue對象中，data屬性就是一個對象。

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

el屬性

Vue 對象/組件將要掛載頁面元素，可以使用選擇器

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

提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標(biāo)。可以是 CSS 選擇器，也可以是一個 HTMLElement 實例。

 el:"#app"
})```

#### components屬性

*   **類型**：`Object`

*   **詳細**：

包含 Vue 實例可用組件的哈希表。

#### methods屬性

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

*   **類型**：`{ [key: string]: Function }` 對象

*   **詳細**：

    methods 將被混入到 Vue 實例中?？梢灾苯油ㄟ^ VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 `this` 自動綁定為 Vue 實例。

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

#### computed計算屬性

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

```{
 key:function
 key:{

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

計算屬性的結(jié)果會被緩存，除非依賴的響應(yīng)式屬性變化才會重新計算。注意，如果某個依賴 (比如非響應(yīng)式屬性) 在該實例范疇之外，則計算屬性是**不會**被更新的。

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

監(jiān)聽定義在data屬性中的數(shù)據(jù)，監(jiān)聽的數(shù)據(jù)發(fā)生變化，就會觸發(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)會在任何被偵聽的對象的 property 改變時被調(diào)用，不論其被嵌套多深
 c: {
 handler: function (val, oldVal) { /* ... */ },
 deep: true
 },
 // 該回調(diào)將會在偵聽開始之后被立即調(diào)用
 d: {
 handler: 'someMethod',
 immediate: true
 },
 // 你可以傳入回調(diào)數(shù)組，它們會被逐一調(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)聽屬性和計算屬性的區(qū)別

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

## Vue 指令

#### v-show

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

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

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

#### v-bind

動態(tài)地綁定一個或多個屬性，或一個組件 prop 到表達式。

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

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

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

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

v-else-if：如果上一兄弟元素綁定的表達式的值沒有匹配到，則判斷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ù)指定。表達式可以是一個方法的名字或一個內(nèi)聯(lián)語句，如果沒有修飾符也可以省略。

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

##### 事件修飾符

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

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

*   `.capture` - 添加事件偵聽器時使用 capture 模式。

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

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

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

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

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

*   `.right` - (2.2.0) 只當(dāng)點擊鼠標(biāo)右鍵時觸發(fā)。

*   `.middle` - (2.2.0) 只當(dāng)點擊鼠標(biāo)中鍵時觸發(fā)。

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

```<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
?
<!-- 動態(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>
?
<!-- 動態(tài)事件縮寫 (2.6.0+) -->
<button @[event]="doThis"></button>
?
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
?
<!-- 阻止默認(rèn)行為 -->
<button @click.prevent="doThis"></button>
?
<!-- 阻止默認(rèn)行為，沒有表達式 -->
<form @submit.prevent></form>
?
<!--  串聯(lián)修飾符 -->
<button @click.stop.prevent="doThis"></button>
?
<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">
?
<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">
?
<!-- 點擊回調(diào)只會觸發(fā)一次 -->
<button v-on:click.once="doThis"></button>
?
<!-- 對象語法 (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`

*   **詳細**：

    props 可以是數(shù)組或?qū)ο?，用于接收來自父組件的數(shù)據(jù)。props 可以是簡單的數(shù)組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義驗證和設(shè)置默認(rèn)值。

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

#### 父傳子

*1* 、在父組件中的子組件標(biāo)簽中定義傳遞數(shù)據(jù)屬性，需要使用動態(tài)綁定來傳遞數(shù)據(jù)

*2* 、在子組件中，增加props屬性，在props屬性中定義一個與傳遞數(shù)據(jù)時定義名稱相同屬性用來接受數(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ù)據(jù)類型，vue將拋出警告
 }```
### 子傳父

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

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

*2* 、在父組件中，增加對自定義事件的監(jiān)聽，子組件觸發(fā)自定義事件后，父組件監(jiān)聽并執(zhí)行事件對應(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)建一個名稱為EventBus的Vue對象（組件）：

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

})

export default EventBus;

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

  <div class="input_container">
    <div class="input">
      <input type="text" placeholder="請輸入將要提交的內(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ā)一個自定義事件
      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ā)后，就會監(jiān)聽到事件，然后執(zhí)行事件對應(yīng)的函數(shù)，獲取到傳遞的數(shù)據(jù)。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue初級組建通信基本屬性指令

Vue初級組建通信基本屬性指令

Vue 基本屬性

data 屬性

el屬性

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue初級 組建通信 基本屬性 指令

Vue 基本屬性

data 屬性

el屬性

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue初級組建通信基本屬性指令