vueコンポーネント化開発(component)
20206 ワード
コンポーネントの説明 VuejsはVueを通過する.extend(options)メソッドによるコンポーネントの拡張 optionsパラメータとVue(options)のoptionsパラメータはほぼ一致する である. new Vueから出てきたViewModel(ビューモデル)もコンポーネントであり、「ルートインスタンスコンポーネント」と呼ばれ、「Root」コンポーネント と呼ばれています. Vueにおけるコンポーネントの表現形式はラベルに類似するものであり、ラベルのように使用するには、h 5のルール、すなわちコンポーネントの登録 を行わなければならないことを想像する.コンポーネントの登録には、グローバル登録とローカル登録の2つの形式があります.
グローバル登録 フォーマット:Vue.コンポーネント(コンポーネントの名前、コンポーネントの構成項目) 命名規則:1)Hello 2)my-button 使用:
ローカル登録(ルートインスタンス構成項目のcomponentsに登録)
templateテンプレート分離
componentのtemplateのhtmlコードをhtmlに分離し、templateラベル+idを使用してマウントを実現 templateラベルの下にあるラベルは1つしかありません(templateコンポーネントにルート要素が1つしかありません)
コンポーネント使用時の直接サブエレメント規則 htmlラベルには、直接サブエレメントが直接規定されています.例えば、ul li ol li table tr td dl dt dd select option コンポーネントを直接書き込むときに問題が発生する 解決:直接サブエレメントにis属性を介してコンポーネント をバインドする
グローバル登録
//1.
const Hello = Vue.extend({
// template
template: ' Hello component!!! '
})
// 2.
Vue.component( 'Hello', Hello )
//
Vue.component('Hello',{
template: ' Hello component!!! '
})
// （ ）
// 3.
new Vue({
el: '#app'
})
ローカル登録(ルートインスタンス構成項目のcomponentsに登録)
new Vue({
el: '#app',
components: {
'Hello': {
template: `
hello
1902
`
}
}
})
templateテンプレート分離
componentのtemplateのhtmlコードをhtmlに分離し、templateラベル+idを使用してマウントを実現
<template id="hello">
<div>
<h3> hello happy h3>
div>
template>
new Vue({
el: '#app',
components: {
'Hello': {
template: '#hello'
}
}
})
コンポーネント使用時の直接サブエレメント規則
<table>
<tr>
<td>1td>
<td>2td>
<td>3td>
tr>
tr>
table>
<div id="app">
<Father>Father>
div>
<template id="father">
<div>
<h3> father h3>
<hr>
<Son>Son>
div>
template>
<template id="son">
<h3> son h3>
template>
グローバル
Vue.component('Father',{
template: '#father'
})
Vue.component('Son',{
template: '#son'
})
new Vue({
el: '#app',
})
ローカル
new Vue({
el: '#app',
components: {
'Father': {
template: '#father',
components: {
'Son': {
template: '#son'
}
}
}
}
})
があるかもしれません