真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷(xiāo)
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷(xiāo)
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

//model層：
// 通過(guò)extend方式定義一個(gè)Vue組件
var MyComponent = Vue.extend({
template: '
A custom component!
'
})
// 向Vue注冊(cè)這個(gè)組件，名稱定為my-component
Vue.component('my-component', MyComponent)
// 創(chuàng)建根實(shí)例
new Vue({
el: '#example'
})
//Vue層：

A custom component!

//model層：
// 通過(guò)extend方式定義一個(gè)Vue組件
var MyComponent = Vue.extend({
template: '
A cu stom component!
'
})
// 不用注冊(cè)
//Vue.component('my-component', MyComponent)
// 創(chuàng)建MyComponent 實(shí)例
new MyComponent ({
el: '#example'
})
//Vue層：

//不用組件
//

經(jīng)過(guò)試驗(yàn)，這種寫(xiě)法確實(shí)沒(méi)錯(cuò)，也可以正常顯示。問(wèn)題來(lái)了，為什么第一種寫(xiě)法也是可以的，比較兩處代碼，發(fā)現(xiàn)第一種寫(xiě)法有一個(gè)注冊(cè)過(guò)程，注冊(cè)了一個(gè)my-component,最后使用的也是這個(gè)my-component，仔細(xì)想想，并不是說(shuō)Vue實(shí)例可以使用template，而是向Vue注冊(cè)了這個(gè)組件后，Vue實(shí)例就可以使用這個(gè)組件了，所以并不沖突。（嚇?biāo)缹殞毩? -）

想清楚這個(gè)后，再來(lái)考慮另外一個(gè)問(wèn)題，這兩種寫(xiě)法的區(qū)別在于哪里？
有沒(méi)有發(fā)現(xiàn)，第二種寫(xiě)法其實(shí)是很有限制的，他替換了整個(gè)div，不管div中有多少內(nèi)容。比如：

ssssdfsdaf
abc

最后統(tǒng)統(tǒng)不見(jiàn)，被替換成

ssssdfsdaf
abc

另外，注冊(cè)必須在新建實(shí)例前，反過(guò)來(lái)的話，新建的實(shí)例肯定不能使用組件的。

原文還說(shuō)replace可以決定是否替換，這個(gè)不知道咋用，先留一坑在這，后面看看能否用上。 //坑1

2.組件注冊(cè)有兩種方式：

一是前面看到的全局注冊(cè)方式，Vue.component，這種全局可用。

二是局部注冊(cè)方式

// 局部注冊(cè)也可以這么做
var Parent = Vue.extend({
components: {
'my-component': {
template: '
A custom component!
'
}
}
})

這種寫(xiě)法最簡(jiǎn)，很明顯Parent擴(kuò)展了Vue，擁有了組件my-component。此時(shí)的組件只有Parent能用，Vue不能用。

3.is屬性

組件在使用的過(guò)程中也是有限制的。原因在于：

Vue 的模板是 DOM 模板，使用瀏覽器原生的解析器而不是自己實(shí)現(xiàn)一個(gè)。所以組件被替換后必須依照html的正常標(biāo)準(zhǔn)來(lái)，它必須是有效的 HTML 片段。一些 HTML 元素對(duì)什么元素可以放在它里面有限制。常見(jiàn)的限制：

a 不能包含其它的交互元素（如按鈕，鏈接）

ul 和 ol 只能直接包含 li

select 只能包含 option 和 optgroup

table 只能直接包含 thead, tbody, tfoot, tr, caption, col, colgroup

tr 只能直接包含 th 和 td

以table為例

// 定義
var MyComponent = Vue.extend({
template: 'A custom component!'
})

這樣的寫(xiě)法看似正常，因?yàn)?table>結(jié)構(gòu)是正常的，但是實(shí)際上不能依賴自定義組件在瀏覽器驗(yàn)證之前的展開(kāi)結(jié)果，所以這里不被認(rèn)為是。為此，is屬性便有作用了，將以上寫(xiě)法改寫(xiě)：

 //這里改成is屬性



// 定義
var MyComponent = Vue.extend({
template: '
A custom component!
' //這里不能用tr
})

修改后，相當(dāng)于

保留了原來(lái)的tr，所以dom解析不會(huì)出錯(cuò)

4.Props：組件通訊的手段

4.1“prop” 是組件數(shù)據(jù)的一個(gè)字段，期望從父組件傳下來(lái)。子組件需要顯式地用 props 選項(xiàng) 聲明 props：

Vue.component('child', {
// 聲明 props，這里駝峰式命名
props: ['myMessage'],
//模板中可以這樣用
template: '{{ myMessage }}'
})

HTML 特性不區(qū)分大小寫(xiě)。名字形式為 camelCase 駝峰式的 prop 用作特性時(shí)，需要轉(zhuǎn)為 kebab-case（短橫線隔開(kāi)），所以html中是這個(gè)樣子的：

以上這種是props的靜態(tài)用法，也可以用 v-bind 綁定動(dòng)態(tài) Props 到父組件的數(shù)據(jù)。每當(dāng)父組件的數(shù)據(jù)變化時(shí)，也會(huì)傳導(dǎo)給子組件：

這時(shí)候看到v-model有點(diǎn)懵逼，這貨不是跟{{}}類(lèi)似，引用data屬性中的parentMsg嗎？此時(shí)肯定是沒(méi)有定義parentMsg的，所以v-bind：my-message=”parentMsg”綁定組件的同時(shí)，賦予了父組件parentMsg屬性。

4.2 prop的綁定類(lèi)型：

prop 默認(rèn)是單向綁定：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是反過(guò)來(lái)不會(huì)。這是為了防止子組件無(wú)意修改了父組件的狀態(tài)——這會(huì)讓?xiě)?yīng)用的數(shù)據(jù)流難以理解。不過(guò)，也可以使用 .sync 或 .once 綁定修飾符顯式地強(qiáng)制雙向或單次綁定：

雙向綁定會(huì)把子組件的 msg 屬性同步回父組件的 parentMsg 屬性。單次綁定在建立之后不會(huì)同步之后的變化。這里原文還特定強(qiáng)調(diào)了下， prop 是一個(gè)對(duì)象或數(shù)組時(shí)，是按引用傳遞，修改內(nèi)容會(huì)隨時(shí)修改父組件內(nèi)容，這個(gè)有語(yǔ)言基礎(chǔ)的都知道。

4.3 prop驗(yàn)證：

組件可以為 props 指定驗(yàn)證要求。當(dāng)組件給其他人使用時(shí)這很有用，因?yàn)檫@些驗(yàn)證要求構(gòu)成了組件的 API，確保其他人正確地使用組件。此時(shí) props 的值是一個(gè)對(duì)象({}而不是[])，包含驗(yàn)證要求：

Vue.component('example', {
props: {
// 基礎(chǔ)類(lèi)型檢測(cè) （`null` 意思是任何類(lèi)型都可以）
propA: Number,
// 多種類(lèi)型 (1.0.21+)
propM: [String, Number],
// 必需且是字符串
propB: {
type: String,
required: true
},
// 數(shù)字，有默認(rèn)值
propC: {
type: Number,
default: 100
},
// 對(duì)象/數(shù)組的默認(rèn)值應(yīng)當(dāng)由一個(gè)函數(shù)返回
propD: {
type: Object,
default: function () {
return { msg: 'hello' }
}
},
// 指定這個(gè) prop 為雙向綁定
// 如果綁定類(lèi)型不對(duì)將拋出一條警告
propE: {
twoWay: true
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function (value) {
return value > 10
}
},
// 轉(zhuǎn)換函數(shù)（1.0.12 新增）
// 在設(shè)置值之前轉(zhuǎn)換值
propG: {
coerce: function (val) {
return val + '' // 將值轉(zhuǎn)換為字符串
}
},
propH: {
coerce: function (val) {
return JSON.parse(val) // 將 JSON 字符串轉(zhuǎn)換為對(duì)象
}
}
}
})

type 可以是下面原生構(gòu)造器：

String

Number

Boolean

Function

Object

Array

type 也可以是一個(gè)自定義構(gòu)造器，使用 instanceof 檢測(cè)。

當(dāng) prop 驗(yàn)證失敗了，Vue 將拒絕在子組件上設(shè)置此值，如果使用的是開(kāi)發(fā)版本會(huì)拋出一條警告。

這里也是看的我一臉懵逼，連個(gè)栗子都不給，拿剛才的例子改一下打個(gè)比方

Vue.component('child', {
// 聲明 props，這里駝峰式命名
props: ['myMessage'],
//模板中可以這樣用
template: '{{ myMessage+1}}' //改成表達(dá)式
})

 //這里先不改

如果我們希望別人把child組件的myMessage當(dāng)做Number類(lèi)型來(lái)處理，而我們這里又沒(méi)有做prop驗(yàn)證，結(jié)果就是{{ myMessage+1}}會(huì)變成字符串拼接，當(dāng)html傳入的是hello!,渲染出來(lái)結(jié)果：hello!

所以說(shuō)，告訴別人這里要傳入Number類(lèi)型是必要的，于是改為：

Vue.component('child', {
// 聲明 props，這里駝峰式命名
props: {myMessage:Number},
//模板中可以這樣用
template: '{{ myMessage+1}}' //改成表達(dá)式
})

這時(shí)候如果傳入hello！，此時(shí)渲染結(jié)果？沒(méi)錯(cuò)，就是NaN。這樣別人就知道要傳入一個(gè)數(shù)字了。
如果這樣傳入

 //改成123

這樣總行了吧，運(yùn)行，他喵的居然還不行，還是NaN。原文有這樣的解釋?zhuān)?/p>

//#字面量語(yǔ)法 vs. 動(dòng)態(tài)語(yǔ)法
//初學(xué)者常犯的一個(gè)錯(cuò)誤是使用字面量語(yǔ)法傳遞數(shù)值：


因?yàn)樗且粋€(gè)字面 prop，它的值以字符串 "1" 而不是以實(shí)際的數(shù)字傳下去。如果想傳遞一個(gè)實(shí)際的 JavaScript 數(shù)字，需要使用動(dòng)態(tài)語(yǔ)法，從而讓它的值被當(dāng)作 JavaScript 表達(dá)式計(jì)算：

好吧，也就是說(shuō)剛才傳遞的實(shí)際上是字符串”123”，結(jié)果必然是NaN,再改：

 //改成123

此時(shí){{myMessage+1}}會(huì)得到正確的結(jié)果：124

感謝各位的閱讀，以上就是“JS框架之vue.js怎么應(yīng)用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)JS框架之vue.js怎么應(yīng)用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！