日产精品卡一卡二卡三的概述,欧美乱大交做爰xxxⅹ性av,在线交友

什么是Vue組件

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴展。

注冊

vue.component全局注冊

注冊或獲取全局組件。注冊還會自動使用給定的id設置組件的名稱

// 注冊組件，傳入一個擴展過的構造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注冊組件，傳入一個選項對象（自動調用 Vue.extend）
Vue.component('my-component', { /* ... */ })
// 獲取注冊的組件（始終返回構造器）
var MyComponent = Vue.component('my-component')

全局注冊要確保在初始化根實例之前注冊了組件

<div id="example">
  <my-component></my-component>
</div>

// 注冊
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 創建根實例
new Vue({
  el: '#example'
})

components選項局部注冊

不必在全局注冊每個組件。通過使用組件實例選項注冊，可以使組件僅在另一個實例/組件的作用域中可用：

 const MyComponent = Vue.extend({
   template: '<div>A custom component!</div>'
 })

 new Vue({
    el: '#app',
    components: {
      'my-component': MyComponent
    },
    //注冊局部組件，傳入一個選項對象（自動調用 Vue.extend）
    //components: { 'my-component': { template: '<div>A custom component!</div>' } }
    template: '<my-component></my-component>'
})

以is特性擴展

當使用 DOM 作為模版時 (例如，將 el 選項掛載到一個已存在的元素上), 你會受到 HTML 的一些限制，因為 Vue 只有在瀏覽器解析和標準化 HTML 后才能獲取模版內容。尤其像這些元素 <ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像 <option> 這樣的元素只能出現在某些其它元素內部。
在自定義組件中使用這些受限制的元素時會導致一些問題，例如：

<table>
  <my-row>...</my-row>
</table>

自定義組件 <my-row> 被認為是無效的內容，因此在渲染的時候會導致錯誤。變通的方案是使用特殊的 is 屬性：

const MyComponent = Vue.extend({
  template: '<p>Hello World!</p>'
})

new Vue({
  el: '#app',
  components: {
    'my-row': MyComponent
  },
  template: `
      <table>
        <tr is="my-row"></tr>
      </table>
    `
})

data 選項

通過 Vue 構造器傳入的各種選項大多數都可以在組件構造器里用。但data 是一個例外，它必須是函數。
實際上，如果你這么做：

Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data: {
    message: 'hello'
  }
})

那么 Vue 會停止，并在控制臺發出警告，告訴你在組件中 data 必須是一個函數。理解這種規則的存在意義很有幫助，讓我們假設用如下方式來繞開 Vue 的警告：

<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>
var data = { counter: 0 }
Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // 技術上 data 的確是一個函數了，因此 Vue 不會警告，
  // 但是我們返回給每個組件的實例的卻引用了同一個data對象
  data: function () {
    return data
  }
})
new Vue({
  el: '#example-2'
})

由于data是一個對象，三個組件都保持同一個data的引用。我們可以通過函數為每個組件返回全新的 data 對象來解決這個問題。

data: function () {
  return {
    counter: 0
  }
}

父子組件通信

在 Vue 中，父子組件的關系可以總結為 props down, events up。父組件通過 props 向下傳遞數據給子組件，子組件通過 events 給父組件發送消息。

props-events.png

prop

組件實例的作用域是孤立的。這意味著不能 (也不應該) 在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件的數據，我們需要通過子組件的 props 選項，暴露對外的接口。

Vue.component('child', {
  // 聲明 props
  props: ['message'],
  // 就像 data 一樣，prop 可以用在模板內
  // 同樣也可以在 vm 實例中像“this.message”這樣使用
  template: '<span>{{ message }}</span>'
})

camelCase vs kebab-case

HTML 特性是不區分大小寫的。所以，當使用的不是字符串模版，camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名：

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>
```

#### 動態prop
在模板中，要動態地綁定父組件的數據到子模板的 props，與綁定到任何普通的HTML特性相類似，就是用 v-bind。每當父組件的數據變化時，該變化也會傳導給子組件：
```
<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

字面量語法 vs 動態語法

初學者常犯的一個錯誤是使用字面量語法傳遞數值：

<!-- 傳遞了一個字符串 "1" -->
<comp some-prop="1"></comp>

因為它是一個字面 prop，它的值是字符串 "1"
而不是 number。如果想傳遞一個實際的 number，需要使用 v-bind
，從而讓它的值被當作 JavaScript 表達式計算：

<!-- 傳遞實際的 number -->
<comp v-bind:some-prop="1"></comp>

單向數據流

prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。這是為了防止子組件無意修改了父組件的狀態——這會讓應用的數據流難以理解。

注意在 JavaScript 中對象和數組是引用類型，指向同一個內存空間，如果 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態。

我們應該制止這種情況發生：

定義一個局部變量，并用 prop 的值初始化它：

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

定義一個計算屬性，處理 prop 的值并返回。

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

prop驗證

為組件的 props 指定驗證規格。如果傳入的數據不符合規格，Vue 會發出警告。
要指定驗證規格，需要用對象的形式，而不能用字符串數組：

Vue.component('example', {
  props: {
    // 基礎類型檢測 (`null` 意思是任何類型都可以)
    propA: Number,
    // 多種類型
    propB: [String, Number],
    // 必傳且是字符串
    propC: {
      type: String,
      required: true
    },
    // 數字，有默認值
    propD: {
      type: Number,
      default: 100
    },
    // 數組/對象的默認值應當由一個工廠函數返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type 可以是下面原生構造器：

String
Number
Boolean
Function
Object
Array
Symbol

type 也可以是一個自定義構造器函數，使用 instanceof 檢測。

非prop

所謂非 prop 屬性，就是它可以直接傳入組件，而不需要定義相應的 prop。
明確給組件定義 prop 是傳參的推薦方式，但組件的作者并不總能預見到組件被使用的場景。所以，組件可以接收任意傳入的屬性，這些屬性都會被添加到組件的根元素上。

自定義事件

每個 Vue 實例都實現了事件接口 (Events interface)，即：

使用 $on(eventName)監聽事件
使用 $emit(eventName)觸發事件

使用 v-on 綁定事件

父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件。
不能用 $on 偵聽子組件拋出的事件，而必須在模板里直接用 v-on 綁定。

v-on 用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。

給組件綁定原生事件

有時候，你可能想在某個組件的根元素上監聽一個原生事件。可以使用 .native 修飾 v-on。例如：

<my-component v-on:click.native="doTheThing"></my-component>

v-on 監聽組件上自定義事件，并不會綁定到其根元素

.sync修飾符（在父子組件數據模型之間實現雙向數據綁定）

.sync 修飾符，只是作為一個編譯時的語法糖存在。它會被擴展為一個自動更新父組件屬性的 v-on 偵聽器。
如下代碼

<comp :foo.sync="bar"></comp>

會被擴展為：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

當子組件需要更新 foo 的值時，它需要顯式地觸發一個更新事件：

this.$emit('update:foo', newValue)

例如：

  const MyComponent = Vue.extend({
  template: `
    <div>
      <button @click="onClick">點擊計數</button><p>{{count}}</p>
    </div>
  `,
  props: ['count'],
  data: function (params) {
    return {
      counter: this.count
    }
  },
  methods: {
    onClick: function () {
      this.counter += 1;
      //emit count更新事件
      this.$emit('update:count', this.counter);
    }
  }
})

new Vue({
  el: '#app',
  components: {
    'my-component': MyComponent
  },
  template: `
      <div>
         <p>{{total}}</p>
         <!-- 雙向綁定count -->
         <my-component :count.sync="total"></my-component>
      </div>
    `,
  data: {
    total: 0
  }
})

使用 v-model 綁定自定義表單組件

默認情況下，v-model 會綁定組件的 value 屬性和監聽 input 事件。
所以要讓自定義組件的 v-model 生效，它應該 (在 2.2.0+ 這是可配置的)：

接受一個 value 屬性
在有新的值時觸發 input 事件

自定義計數器組件例子：

const MyCounter = Vue.extend({
  template: `<div>
     <button @click="decreace">-</button>{{count}}<button @click="increace">+</button>
  </div>`,
  props: ['value'],
  data: function () {
    return {
      count: this.value
    }
  },
  methods: {
    decreace: function () {
      this.count -= 1;
      this.$emit('input', this.count)
    },
    increace: function () {
      this.count += 1;
      this.$emit('input', this.count)
    }
  }
})

new Vue({
  el: '#app',
  components: {
    'my-counter': MyCounter
  },
  template: `
      <div>
         <p>{{total}}</p>
         <!-- 雙向綁定count -->
         <my-counter v-model="total"></my-counter>
      </div>
    `,
  data: {
    total: 0
  }
})

但是諸如單選框、復選框之類的輸入類型可能把 value 屬性用作了別的目的。model 選項來重新包裝v-model默認綁定接口，可以就回避這樣的沖突：

const SelectComp = Vue.extend({
  template: `
  <select @change="onSelect" v-model="selected">
    <option disabled value='0'>請選擇</option>
    <option value="1">選擇1</option>
    <option value="2">選擇2</option>
    <option value="3">選擇3</option>
  </select>
  `,
  data: function () {
    return {
      selected: ''
    }
  },
  //重新包裝v-model綁定接口
  model: {
    prop: 'selected',
    event: 'select'
  },
  methods: {
    onSelect: function () {
      this.$emit('select', this.selected)
    }
  }
})

new Vue({
  el: '#app',
  components: {
    'my-select': SelectComp
  },
  template: `
      <div>
         <p>{{selected}}</p>
         <my-select v-model="selected"></my-select>
      </div>
    `,
  data: {
    selected: ''
  }
})

非父子組件通信

在簡單的場景下，可以使用一個空的 Vue 實例作為中央事件總線：

var bus = new Vue()

// 觸發組件 A 中的事件
bus.$emit('id-selected', 1)

// 在組件 B 創建的鉤子中監聽事件
bus.$on('id-selected', function (id) {
  // ...
})

使用Slot分發內容

為了提高組件的可擴展性和組合組件，我們可以利用Vue提供Slot分發內容來實現。
所謂的Slot內容分發就是把自定義元素內嵌的模板插入到子組件模板slot插座中。

image.png

實例代碼:

const MyChild = Vue.extend({
  template: `<h1>
    <!-- 默認插座，插入內容會替換掉slot，若沒父模板中沒有內容插入，則該備用內容會顯示 -->
    <slot>h1內容</slot>
  </h1>`
})

new Vue({
  el: '#app',
  components: {
    'my-child': MyChild
  },
  template: `
  <div>
    <!-- 插入內容 -->
    <my-child>
      Hello world!
    </my-child>
    <!-- 無內容插入 -->
    <my-child></my-child>
  </div>
  `
})

效果:

image.png

注意分發內容只在父作用域內編譯（請看slot編譯內容）

多個slot

當父模板中有多個內容要插入到子模板中不同位置時，我們可以：

在父模板中內容根元素添加slot屬性，屬性值為slot別名
子模板中slot標簽添加name屬性別名

子模板：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父模板：

<app-layout>
  <h1 slot="header">這里可能是一個頁面標題</h1>
  <p>主要內容的一個段落。</p>
  <p>另一個主要段落。</p>
  <p slot="footer">這里有一些聯系信息</p>
</app-layout>

渲染結果：

<div class="container">
  <header>
    <h1>這里可能是一個頁面標題</h1>
  </header>
  <main>
    <p>主要內容的一個段落。</p>
    <p>另一個主要段落。</p>
  </main>
  <footer>
    <p>這里有一些聯系信息</p>
  </footer>
</div>

作用域插槽

作用域插槽，我的理解其實就是把子組件模板中的slot看作一個“組件”，所以子組件能夠向slot傳遞數據，就像向組件綁定數據一樣。而該slot“組件”的模板聲明在父級中，是具有特殊屬性 scope 的 <template> 元素，表示它是作用域插槽的模板。scope 的值對應一個臨時變量名，此變量接收從子組件中傳遞的 props 對象：

<div class="parent">
  <child>
    <template scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
    </template>
  </child>
</div>

在子組件中，只需將數據傳遞到插槽，就像你將 props 傳遞給組件一樣：

<div class="child">
  <slot text="hello from child"></slot>
</div>

渲染以上結果，得到的輸出會是：

<div class="parent">
  <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
  </div>
</div>

其他

動態組件

通過 Vue 內置組件 <component> ，動態地綁定到它的 is 屬性，依靠 is 值，來動態切換組件：

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView">
  <!-- 組件在 vm.currentview 變化時改變！ -->
</component>

keep-live 緩存組件避免重新渲染

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
<!-- 多個條件判斷的子組件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
<!-- 和 <transition> 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

<keep-alive> 是用在其一個直屬的子組件被開關的情形。如果你在其中有 v-if 則不會工作。如果有上述的多個條件性的子元素，<keep-alive> 要求同時只有一個子元素被渲染。

子組件引用

使用 ref 為子組件指定一個索引 ID。這樣就可以是用父實例屬性refs訪問子組。

父模板:

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

var parent = new Vue({ el: '#parent' })
// 訪問子組件
var child = parent.$refs.profile

X-Template

另一種定義模版的方式是在 JavaScript 標簽里使用 text/x-template 類型，并且指定一個 id。例如：

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>

Vue.component('hello-world', {
  template: '#hello-world-template'
})

這在有很多模版或者小的應用中有用，否則應該避免使用，因為它將模版和組件的其他定義隔離了。

對低開銷的靜態組件使用 v-once

盡管在 Vue 中渲染 HTML 很快，不過當組件中包含大量靜態內容時，可以考慮使用 v-once
將渲染結果緩存起來，就像這樣：

Vue.component('terms-of-service', {
template: '\
<div v-once>\
<h1>Terms of Service</h1>\
... a lot of static content ...\
</div>\
'
})

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

Vue 組件

Vue 組件

什么是Vue組件

注冊

vue.component全局注冊

components選項局部注冊

以is特性擴展

data 選項

父子組件通信

prop

camelCase vs kebab-case

字面量語法 vs 動態語法

單向數據流

prop驗證

非prop

自定義事件

使用 v-on 綁定事件

給組件綁定原生事件

.sync修飾符（在父子組件數據模型之間實現雙向數據綁定）

使用 v-model 綁定自定義表單組件

非父子組件通信

使用Slot分發內容

多個slot

作用域插槽

其他

動態組件

keep-live 緩存組件避免重新渲染

子組件引用

X-Template

對低開銷的靜態組件使用 v-once

推薦閱讀更多精彩內容

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

Vue 組件

什么是Vue組件

注冊

vue.component全局注冊

components選項局部注冊

以is特性擴展

data 選項

父子組件通信

prop

camelCase vs kebab-case

字面量語法 vs 動態語法

單向數據流

prop驗證

非prop

自定義事件

使用 v-on 綁定事件

給組件綁定原生事件

.sync修飾符（在父子組件數據模型之間實現雙向數據綁定）

使用 v-model 綁定自定義表單組件

非父子組件通信

使用Slot分發內容

多個slot

作用域插槽

其他

動態組件

keep-live 緩存組件避免重新渲染

子組件引用

X-Template

對低開銷的靜態組件使用 v-once

推薦閱讀更多精彩內容

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