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