渲染函數-深刻 data 對象
咱們平時在家是不多看電視的，最近看了幾期最強大腦，真的被震驚到了，爲何他們的大腦容量那麼大呢？而且很是機敏。海量的信息能夠在很短的時間內記住，真是最遙遠的距離莫過於我還沒弄明白題目，別人已經答案出來了。感受對他們來講，考上清華北大真是太容易了。我就想縱然我不能記住不少的信息，難道我認真些，努力些還不能記住幾行代碼嗎？javascript
言歸正傳，深刻 data 對象在官網上沒有完整的例子，可能對初學者真正透傳的理解是有些難度的，這裏展現data對象的完整例子。html
官網原文：vue
有一件事要注意：正如在模板語法中，v-bind:class 和 v-bind:style ，會被特別對待同樣，在 VNode 數據對象中，下列屬性名是級別最高的字段。該對象也容許你綁定普通的 HTML 特性，就像 DOM 屬性同樣，好比 innerHTML (這會取代 v-html 指令)java
{
// 和`v-bind:class`同樣的 API
// 接收一個字符串、對象或字符串和對象組成的數組
'class': {
foo: true,
bar: false
},
// 和`v-bind:style`同樣的 API
// 接收一個字符串、對象或對象組成的數組
style: {
color: 'red',
fontSize: '14px'
},
// 正常的 HTML 特性
attrs: {
id: 'foo'
},
// 組件 props
props: {
myProp: 'bar'
},
// DOM 屬性
domProps: {
innerHTML: 'baz'
},
// 事件監聽器基於 `on`
// 因此再也不支持如 `v-on:keyup.enter` 修飾器
// 須要手動匹配 keyCode。
on: {
click: this.clickHandler
},
// 僅對於組件，用於監聽原生事件，而不是組件內部使用
// `vm.$emit` 觸發的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定義指令。注意，你沒法對 `binding` 中的 `oldValue`
// 賦值，由於 Vue 已經自動爲你進行了同步。
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// 做用域插槽格式
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 若是組件是其餘組件的子組件，需爲插槽指定名稱
slot: 'name-of-slot',
// 其餘特殊頂層屬性
key: 'myKey',
ref: 'myRef'
}
例1express
<body class="">
<div id="app">
<anchored-heading :level="2">hello world</anchored-heading>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("anchored-heading", {
render: function(createElement) {
return createElement("nav" + this.level, {
'class': {
foo: true,
bar: false
},
style: {
color: 'red',
fontSize: '14px'
},
attrs: {
id: 'foo'
},
props: {
myProp: 'bar' //能夠傳給子組件的屬性
},
nativeOn: {
click: this.nativeClickHander
},
/* scopedSlots: {
default: props => createElement("span", props.text)
}*/
},
this.$slots.default)
},
//props:["level"] 也能夠
props: {
level: {
type: Number,
required: true,
myProp: 'bar'
}
},
methods: {
nativeClickHander: function() {
alert("you click native Event")
}
}
})
Vue.component("nav2", {
props: ["myProp"],
//template:`<h2>{{myProp}}</h2>`
render: function(createElement) {
return createElement("h2", [createElement("div", this.$slots.default), this.myProp])
}
})
var app = new Vue({
el: "#app"
})
</script>
</body>
渲染函數最終渲染出來的div元素，其實跟template寫出的字符串模板同樣的
上例子anchored-heading組件定義了渲染函數（相似模板）和props屬性（level），level是接收父級傳遞過來的的值，其中渲染函數渲染出的也是一個組件（從"nav" + this.level能夠看出是nav2元素組件），爲nav2組件定義了class與props屬性，nav2的props{myProp: 'bar'}是用來傳遞myProp的值給它的子組件，class屬性是能夠從父級傳給子組件的，因此最終HTML渲染爲數組
<h2 class="foo"><div>hello world</div>bar</h2>
須要知道當你不使用slot屬性向組件中傳遞內容時，這些子元素被存儲在組件實例中的$slots.default中，本例中沒有使用slot屬性像子組件中傳遞內容，因此父組件的內容被存儲在this.$slots.default中app
例2：含有scopedSlots的例子dom
<body class="">
<div id="app">
<anchored-heading :level="2">hello world</anchored-heading>
</div>
<script src="js/vue-2.5.13.js"></script>
<script>
Vue.component("anchored-heading", {
render: function(createElement) {
return createElement("nav" + this.level, {
scopedSlots:{
//default:props => createElement("span",props.text)
default:function(props){
return createElement("span",props.text)
}
}
},
this.$slots.default)
},
//props:["level"] 也能夠
props: {
level: {
type: Number,
required: true,
myProp: 'bar'
}
},
})
Vue.component("nav2", {
props: ["myProp"],
render:function(createElement){
return createElement("h2",[createElement('b',[this.$scopedSlots.default({text:'我是組件'})]),createElement("div",this.$slots.default),this.myProp])
}
})
var app = new Vue({
el: "#app"
})
</script>
</body>
渲染爲：ide
<body class="">
<div id="app">
<h2>
<b><span>我是組件</span></b>
<div>hello world</div>
</h2>
</div>
</body>
例3：含有on和domProps的例子函數
<body class="">
<div id="app">
<anchored-heading :level="2"><div>hello world</div></anchored-heading>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("anchored-heading", {
render: function(createElement) {
return createElement("h" + this.level, {
'class': {
foo: true,
bar: false
},
style:{
color:'red',
fontSize:'14px'
},
attrs:{
id:'foo'
},
domProps:{
innerHTML:"BAZ"
},
on:{
click:this.clickHander // on 與 nativeOn的區別是，nativeOn是加在組件上，它是父級還有字組件
},
//slot:"header"
},
this.$slots.default)
},
//props:["level"] 也能夠
props: {
level: {
type: Number,
required: true,
myProp: 'bar'
}
},
methods:{
clickHander:function(){
alert("you clicked me")
}
}
})
var app = new Vue({
el: "#app"
})
//domProps的優先級高，此時就再也不顯示this.$slots.default的內容
</script>
</body>
渲染成：
<div id="app"><h2 id="foo" class="foo" style="color: red; font-size: 14px;">BAZ</h2></div>
例4：含有slot和ref的例子：
<body class="">
<div id="app">
<anchored-heading :level="2"><div slot="header">hello world</div></anchored-heading>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("anchored-heading", {
render: function(createElement) {
return createElement("h" + this.level, {
slot:"header",
ref:"myRef"
},
this.$slots.header)
},
//props:["level"] 也能夠
props: {
level: {
type: Number,
required: true,
myProp: 'bar'
}
},
methods:{
clickHander:function(){
console.log(this.$refs.myRef.innerHTML)
}
}
})
var app = new Vue({
el: "#app"
})
</script>
</body>
相關文章
- 1. Vue渲染函數
- 2. data渲染
- 3. Vue 渲染函數
- 4. Vue源碼--深刻模板渲染
- 5. vue 數組和對象渲染問題
- 6. Vue - 渲染函數render
- 7. Vue的渲染函數
- 8. vue渲染函數&JSX
- 9. 深刻了解JavaScript對象（2）--函數、對象
- 10. iview,用render函數渲染
- 更多相關文章...
- • jQuery Mobile Data 屬性 - jQuery Mobile 教程
- • XMLHttpRequest 對象 - XML DOM 教程
- • 算法總結-深度優先算法
- • Flink 數據傳輸及反壓詳解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Vue渲染函數
- 2. data渲染
- 3. Vue 渲染函數
- 4. Vue源碼--深刻模板渲染
- 5. vue 數組和對象渲染問題
- 6. Vue - 渲染函數render
- 7. Vue的渲染函數
- 8. vue渲染函數&JSX
- 9. 深刻了解JavaScript對象（2）--函數、對象
- 10. iview,用render函數渲染