-
?不寫(xiě)的話，腳手架工具會(huì)自動(dòng)幫你搜尋以.vue結(jié)尾的文件?
查看全部 -
npm run dev
啟動(dòng) webpack-dev-server
查看全部 -
父組件給子組件傳值，父組件通過(guò):content="item"屬性給子組件傳值
子組件通過(guò)export default{}里的props:['content']接收父組件的傳值。
查看全部 -
引用組價(jià)
import Td from './components/toitem'
注冊(cè)組件
components：{
'to-do':Td?
}
查看全部 -
vue-cli組件里data不用對(duì)象的方式，而是用函數(shù)的方式返回?cái)?shù)據(jù)。
查看全部 -
模板template的最外層只能有一個(gè)包裹原酸div
查看全部 -
每一個(gè)組件也是一個(gè)vue的實(shí)例。
每一個(gè)項(xiàng)目都是由很多個(gè)組件組成的，也就是很多個(gè)vue實(shí)例組成的，因?yàn)槊總€(gè)組件就是vue實(shí)例，所以在組件中可以正常使用vue的一些方法，比如methods,watch等等。每個(gè)組件都擁有自己的props、data、methods等等
每一個(gè)組件都有一個(gè)template模板，如果沒(méi)有寫(xiě)template，默認(rèn)為掛載點(diǎn)下面的所有DOM標(biāo)籤作為模板。查看全部 -
課程代碼演示 <!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Vue</title> ????<script?src="./vue.js"></script> </head> <body> ????<div?id="root"> ????????<div> ????????????<input?v-model="inputValue"/> ????????????<button?@click="handleClick">提交</button> ????????</div> ????????<ul> ????????????<todo-item ????????????????v-for="(item,index)?of?list"? ????????????????:key="item" ????????????????:content="item" ????????????></todo-item> ????????</ul> ????</div> ???? ????<script> ????????Vue.component('todo-item',{ ????????????props:['content'], ????????????template:'<li>{{content}}</li>' ????????}) ????????//?var?TodoItem={ ????????//?????template:'<li>item</li>' ????????//?} ????????new?Vue({ ????????????el:"#root", ????????????data:{ ????????????????inputValue:"hello", ????????????????list:[] ????????????}, ????????????methods:{ ????????????????handleClick:function(){ ????????????????????this.list.push(this.inputValue); ????????????????????this.inputValue=""; ????????????????} ????????????} ????????}) ????</script> </body> </html>我們可以把一個(gè)較大的項(xiàng)目拆分成一個(gè)個(gè)小的組件，這樣維護(hù)起來(lái)就比較方便了全局組件：vue提供了vue.component()來(lái)定義組件，第一個(gè)參數(shù)是組件的名字，也是我們將要寫(xiě)在dom裡的標(biāo)籤，第二個(gè)參數(shù)是一個(gè)對(duì)象，裡面可以定義一個(gè)模板，也是我們要顯示的內(nèi)容。????
局部組件，在外面定義一個(gè)對(duì)象，對(duì)象裡面裝著模板，但是這樣還不可直接使用，我們需要在實(shí)例裡面進(jìn)行註冊(cè)，配置標(biāo)籤名和內(nèi)容。意思就是在我這個(gè)vue實(shí)例裡面去使用這個(gè)組件。????
組件傳參，在標(biāo)籤裡面定義屬性，屬性就是我們想要顯示的內(nèi)容然後在組件裡面用props(固定)給接收過(guò)來(lái)就可以正常使用了。查看全部 -
屬性綁定 v_bind或 : 雙向綁定 v_model查看全部
-
可以這么理解，data里面的數(shù)據(jù)，如果是在標(biāo)簽屬性里，就不用雙花括號(hào)數(shù)據(jù)綁定，如果是在頁(yè)面顯示，那就需要數(shù)據(jù)綁定。
查看全部 -
這里v-bind才能讓title和下面vue實(shí)例的title綁定，而不是雙花括號(hào)，為什么嗯
查看全部 -
注意看這里this的意思是data下的
查看全部 -
模板就是掛載點(diǎn)內(nèi)部的內(nèi)容
查看全部 -
父子組件通過(guò)屬性傳值
查看全部 -
父組件通過(guò)屬性的形式給子組件傳遞參數(shù)
查看全部
舉報(bào)