Vue核心知識 Vue的元件之render函式

元件中的 template 會被編譯成 render function。

下例中，直接用 render function 代替 template，結果相同。

import vue from 'vue'

const component = , this.$slots.default)
},data () ,
value: 'component value'}}}
new vue(,
el: '#root',
data () 
},mounted () ,
template: `
ref="comp">
ref="span">}span>
comp-one>
div>
`,render (createelement) ,
[createelement('span', , this.value)
])}})

render (createelement) },[

createelement('span', , this.value)
])}

render (createelement) ,},[

createelement('span', , this.value)
])}

render (createelement) },[

createelement('span', , this.value)
])}

nativeon 也是繫結到元件上，但是不需要元件發$emit，它會自動繫結到這個元件的根節點的原生 dom 上，如果本身就是原生 dom，直接繫結。

// 元件中

render (createelement) 
}}, [
this.$slots.header, // 通過 $slot拿到 header，如果沒命名就是 default
this.props1
])}// new vue（）
[    createelement('span', , this.value)
]

[

createelement('span', 
}, this.value)
]

[

createelement('span', 
attrs: 
}, this.value)
]

Vue核心知識 Vue的元件之自定義雙向繫結

實現資料雙向繫結 在元件內，新增 props 元件修改資料時 emit 事件，並把改的新值傳出去 從而實現資料的雙向繫結。import vue from vue const component new vue el root data template value value input value...

Vue核心知識 Vue的資料繫結

中可以進行簡單的一元 二元運算，但不能寫語句 import vue from vue new vue data 呼叫全域性變數 template vue 中，在模板裡可以訪問的，乙個是繫結到 this 上的所有值，是可以訪問到的 乙個是 vue 自建的白名單，預設的 js 的全域性物件，也是可以訪問...

掌握vue核心概念之元件

推薦駝峰命名 或者 使用 還是看個人看法習慣 const globalcomponent template 這是乙個全域性元件 const localcomponent template 這是乙個區域性元件 vue.component globalcomponent globalcomponent ...