資訊專(zhuān)欄INFORMATION COLUMN
摘要：下面是我這半年以來(lái)總結(jié)的學(xué)習(xí)筆記，幫助自己復(fù)習(xí)學(xué)習(xí)的基本用法。全局子組件的注冊(cè)與屬性傳遞我是個(gè)全局子組件用這種數(shù)據(jù)格式來(lái)定義接受的屬性名稱(chēng)這樣在調(diào)用時(shí)候就可以傳遞屬性進(jìn)去今天的筆記學(xué)習(xí)心得就記錄到這里吧第一次用順利
Vue的模板語(yǔ)法下面是我這半年以來(lái)總結(jié)的Vue學(xué)習(xí)筆記，幫助自己復(fù)習(xí)學(xué)習(xí)Vue的基本用法。有需要的同志可以參考下。
Vue有很簡(jiǎn)單的模板語(yǔ)法,這些Vue指令用來(lái)響應(yīng)式改變渲染DOM可以快速入門(mén)上手這個(gè)簡(jiǎn)單的框架。
1.{{}}單向插值表達(dá)式，可以把數(shù)據(jù)從控制器綁定到視圖模型
var my = new Vue({
el: "#app",
,
template: `{{myName}}
`,
data() {
return {
myName: "hello vue!",
}
},
})
data選項(xiàng)就代表著控制器中的數(shù)據(jù)信息。
2.屬性綁定 v-bind: 縮寫(xiě)為:
template:`
hover here
`
3.v-if與v-show
兩者后面都是跟boolean類(lèi)型變量，v-if會(huì)直接在dom結(jié)構(gòu)移除該dom元素，v-show只是加了一個(gè)行內(nèi)樣式dislplay:none;該元素還是存在的。
在data屬性中聲明初始化需要的變量后在模板中渲染。
data() {
return {
myName: "hello vue!",
isShow: false,
}
},
`show me
show me`
4.v-for="item in arrOrObject"循環(huán)某個(gè)DOM.被循環(huán)的數(shù)據(jù)可以是對(duì)象也可以是數(shù)組item 也可以寫(xiě)作(item ,index)這樣就會(huì)把對(duì)象中的key或者數(shù)組中的索引index取出來(lái)
注意模板必須只能包含一個(gè)根節(jié)點(diǎn)
template：//寫(xiě)法錯(cuò)誤
- loop {{item}}
5.事件綁定v-on縮寫(xiě)@ 在methods:{}定義方法
然后就可以在模板中調(diào)用
methods: {
reverse() {
//console.log(this.message)
this.message = this.message.split(" ").reverse().join(" ")
}
},
{{message}}
6.表單雙向綁定
我們可以采用事件綁定的方式間接實(shí)現(xiàn)。即定義表單中的keyup事件回調(diào)方法，然后在方法中獲取到value值，然后賦值給data上的數(shù)據(jù)
還可以采用v-model快捷實(shí)現(xiàn)方法
這本質(zhì)上就是上一種方法的語(yǔ)法糖。
7.Vue類(lèi)的data屬性必須定義一個(gè)函數(shù)然后返回一個(gè)對(duì)象，如果直接使用對(duì)象對(duì)于數(shù)組等的引用賦值就會(huì)使得改變了數(shù)據(jù)值會(huì)影響別的地方對(duì)它的引用。定義成一個(gè)函數(shù)返回這樣就是把所有的數(shù)據(jù)復(fù)制了一份，不會(huì)產(chǎn)生引用賦值的危害。
data() {
return {
message: "this is a boy",
myName: "hello vue!",
time: new Date(),
isShow: false,
input: "liyu",
arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
}
},
8.全局子組件的注冊(cè)與屬性傳遞
Vue.component("child", {
props: ["title"],
template: `
{{title}}
我是個(gè)全局子組件
`
})
用props:[" "]這種數(shù)據(jù)格式來(lái)定義接受的屬性名稱(chēng)
這樣在調(diào)用child時(shí)候就可以傳遞屬性進(jìn)去
今天的筆記學(xué)習(xí)心得就記錄到這里吧！第一次用SegmentFault順利！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/82751.html
摘要：小程序心理學(xué)辭典應(yīng)用開(kāi)發(fā)的心得前言最近學(xué)習(xí)小程序，用了五天工作之余從開(kāi)始，到一個(gè)簡(jiǎn)單的完成，有點(diǎn)心得，記錄下來(lái)。數(shù)據(jù)庫(kù)方面，小程序最近推出云開(kāi)發(fā)的服務(wù)，這東西類(lèi)似，這些后端云服務(wù)，而且這些第三方的服務(wù)對(duì)微信支持的也不錯(cuò)。 小程序-心理學(xué)辭典應(yīng)用開(kāi)發(fā)的心得 前言 最近學(xué)習(xí)小程序，用了五天工作之余從0開(kāi)始，到一個(gè)簡(jiǎn)單的App完成，有點(diǎn)心得，記錄下來(lái)。 想法 最近在學(xué)習(xí)算法動(dòng)態(tài)規(guī)劃那部分，有...
摘要：組件是中很重要，這部分也是最難理解的，先聊一聊中的組件。語(yǔ)法組件名選項(xiàng)對(duì)象來(lái)定義一個(gè)下拉框組件請(qǐng)選擇北京上海杭州組件的名字就為，在模板中使用組件請(qǐng)選擇北京上海杭州在模板中使用組件和正常標(biāo)簽一樣。 看了Vue的文檔，寫(xiě)得很簡(jiǎn)潔，但是并不簡(jiǎn)單。在自己學(xué)習(xí)的過(guò)程中踩過(guò)不少的坑，學(xué)習(xí)的時(shí)候把官網(wǎng)的例子從頭到尾做了一遍，記錄在github中https://github.com/WYseven/v...
摘要：初學(xué)應(yīng)該學(xué)習(xí)哪些知識(shí)主要學(xué)習(xí)基礎(chǔ)知識(shí)。接下來(lái)要學(xué)習(xí)如何寫(xiě)函數(shù)，計(jì)算屬性。事件處理與修飾符事件通過(guò)指令來(lái)綁定，在中事件為事件名，所以是很好記憶的。這時(shí)可通過(guò)來(lái)獲取父組件傳遞的值并寫(xiě)入模板，父組件可通過(guò)在子組件寫(xiě)入屬性的方式傳遞數(shù)據(jù)。 前言 本人剛開(kāi)始學(xué)習(xí)vue.js幾天，做了一些練習(xí)之后，鑒于每隔一段時(shí)間就把學(xué)習(xí)過(guò)的內(nèi)容總結(jié)一番，故此寫(xiě)下此文章。初學(xué)Vue.js應(yīng)該學(xué)習(xí)哪些知識(shí) 1、 v...
摘要：學(xué)習(xí)成本很低，另外官方有比較完善的中文文檔。簡(jiǎn)單本身是沒(méi)有錯(cuò)誤，一個(gè)東西能以簡(jiǎn)單的方式解決難道不好嗎關(guān)于這個(gè)中文文檔居然還有人噴那些喜歡用的是不是英文能力差，我就再報(bào)以呵呵一笑。本身?yè)碛兄形奈臋n就是一個(gè)優(yōu)勢(shì)，結(jié)果還成了被噴的地方。 前言 由于這段時(shí)間工作上也是挺忙的，就沒(méi)有時(shí)間去寫(xiě)這個(gè)項(xiàng)目，中間一直都是寫(xiě)寫(xiě)停停，進(jìn)度也是非常慢的。正好前幾天都還比較空，就趕緊抓著空閑時(shí)間去寫(xiě)這個(gè)項(xiàng)目，最...
閱讀 792·2021-09-22 16:01
閱讀 2084·2021-08-20 09:37
閱讀 1693·2019-08-30 15:54
閱讀 1689·2019-08-30 15:44
閱讀 826·2019-08-28 18:23
閱讀 3005·2019-08-26 12:17
閱讀 1005·2019-08-26 11:56
閱讀 1539·2019-08-23 16:20
