•簡單todolist功能的實現
用戶點擊提交按鈕時，將input框的內容顯示在下方的list中，同時清空list中內容。
<body> <div id="root"> <div> <input v-model="inputValue"/> <button @click="submit">submit</button> </div> <ul> <li v-for="(item,index) of list" :key="index">{{item}}</li> </ul> </div> <script> new Vue({ el:"#root", data:{ inputValue:'', list:[] }, methods:{ submit:function(){ this.list.push(this.inputValue); this.inputValue='' } } }) </script></body>“input”輸入框和“inputValue”數據雙向綁定
通過click事件，來講"inputValue"中的內容添加到"list"中
向列表中添加數據用 push( ) this.list.pust(this.inputValue)
每次添加"list"后，把input內容清空
•todolist組件拆分
1. Vue.component是全局組件，是vue提供的創建組件的方法。里面可以寫模板：template
2. 創建組件之后，可以直接使用。比如創建的組件名字是'todo-item'，就可以使用<todo-item></todo-item>
3.
<div id="root"> <ul> <todo-item></todo-item> </ul></div><script> Vue.component('todo-item',{ template:'<li>item<li>' }) new Vue({ el:"root" })</script>4.局部組件var TodoItem={}這里只寫了部分代碼
5.
div id="root"> <ul> <todo-item></todo-item> </ul></div><script> var TodoItem={ template:'<li>item<li>' } new Vue({ el:"root", components:{ 'todo-item':TodoItem } })</script>6.
如果想在其他vue里面使用這個局部組件，需要在vue里對該局部組件進行注冊
7.當用組件來實現最上面的那個todolist功能時，需要進行參數的傳遞和接收，用content和props
8.
<body> <div id="root"> <div> <input v-model="inputValue"/> <button @click="submit">submit</button> </div> <ul> <todo-item v-for="(item,index) of list" :key="index" :content="item" > </todo-item> </ul> </div> <script> Vue.component('todo-item',{ props:['content'], template:'<li>{{content}}<li>' }) new Vue({ el:"#root", data:{ inputValue:'', list:[] }, methods:{ submit:function(){ this.list.push(this.inputValue) this.inputValue=' ' } } }) </script></body>
新聞熱點
疑難解答
圖片精選
