-
?不寫的話,腳手架工具會自動幫你搜尋以.vue結尾的文件?
查看全部 -
npm run dev
啟動 webpack-dev-server
查看全部 -
父組件給子組件傳值,父組件通過:content="item"屬性給子組件傳值
子組件通過export default{}里的props:['content']接收父組件的傳值。
查看全部 -
引用組價
import Td from './components/toitem'
注冊組件
components:{
'to-do':Td?
}
查看全部 -
vue-cli組件里data不用對象的方式,而是用函數的方式返回數據。
查看全部 -
模板template的最外層只能有一個包裹原酸div
查看全部 -
每一個組件也是一個vue的實例。
每一個項目都是由很多個組件組成的,也就是很多個vue實例組成的,因為每個組件就是vue實例,所以在組件中可以正常使用vue的一些方法,比如methods,watch等等。每個組件都擁有自己的props、data、methods等等
每一個組件都有一個template模板,如果沒有寫template,默認為掛載點下面的所有DOM標籤作為模板。查看全部 -
課程代碼演示 <!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>
我們可以把一個較大的項目拆分成一個個小的組件,這樣維護起來就比較方便了
全局組件:vue提供了vue.component()來定義組件,第一個參數是組件的名字,也是我們將要寫在dom裡的標籤,第二個參數是一個對象,裡面可以定義一個模板,也是我們要顯示的內容。
????
局部組件,在外面定義一個對象,對象裡面裝著模板,但是這樣還不可直接使用,我們需要在實例裡面進行註冊,配置標籤名和內容。意思就是在我這個vue實例裡面去使用這個組件。????
組件傳參,在標籤裡面定義屬性,屬性就是我們想要顯示的內容然後在組件裡面用props(固定)給接收過來就可以正常使用了。查看全部 -
屬性綁定 v_bind或 : 雙向綁定 v_model查看全部
-
可以這么理解,data里面的數據,如果是在標簽屬性里,就不用雙花括號數據綁定,如果是在頁面顯示,那就需要數據綁定。
查看全部 -
這里v-bind才能讓title和下面vue實例的title綁定,而不是雙花括號,為什么嗯
查看全部 -
注意看這里this的意思是data下的
查看全部 -
模板就是掛載點內部的內容
查看全部 -
父子組件通過屬性傳值
查看全部 -
父組件通過屬性的形式給子組件傳遞參數
查看全部
舉報