vue2 基礎學習03 （Vue組件的進一步理解）

---

vue學習路徑和建議----尤雨溪

vue官網

今天看了慕課網的一個教學視頻 Vue入門 感受清晰了不少

首先引入一個簡單的todolist案例

• 初始化項目（引入vue.js部分省略）

  <!-- 掛載點 -->
      <div id="app"> 
          
      </div>
  
      <script>
          var app = new Vue({
              el: '#app', //經過id選擇器掛載上去 
          })
      </script>

• 初始化數據，遍歷輸出

  <!-- 掛載點 -->
      <div id="app"> 
          <!--  -->
          <div>
              <input type="text" >
              <button>添加任務</button>
  
              <ul >
                  <li v-for="(item, index) in list" :key="index">{{item}}</li>
              </ul>
          </div>
         
      </div>
  
      <script>
          var app = new Vue({
              el: '#app', //經過id選擇器掛載上去 
              data(){     //介意這樣寫data，由於在後面的vue-cli裏面就是這樣寫的 自我理解
                  return{
                      list:[1,2,3]   // 先把寫死後面再更改
                  }
              }
          })
      </script>

  如下是效果：

• 接下來就是動態添加數據了

  <!-- 掛載點 -->
      <div id="app"> 
          <!--  -->
          <div>
              <input type="text" v-model="listValue">
              <button v-on:click="addList">添加任務</button>
  
              <ul >
                  <li v-for="(item, index) in list" :key="index">{{item}}</li>
              </ul>
          </div>
         
      </div>
  
      <script>
          var app = new Vue({
              el: '#app', //經過id選擇器掛載上去 
              data(){     //介意這樣寫data，由於在後面的vue-cli裏面就是這樣寫的 自我理解
                  return{
                      list:[],   // 先把寫死後面再更改，
                      listValue:'' // 把這個值雙向綁定在 input中
                  }
              },
              methods: {
                  addList:function(){
                      this.list.push(this.listValue)   //往數組中push數據，數據來源是input中的值
                      this.listValue = ''             //添加完以後記得將input中間數據清空
                  }
              }
          })
      </script>

  以上涉及數據的雙向綁定

如下是將todolist應用進行了組件化

• 對todolist組件進行拆分。

  <div id="app">
          <div>
              <input v-model="inputValue">
              <button @click="handleSubmit">提交</button>
          </div>
          <ul>
       
              <todo-item 
              v-for="(item, index) in list" 
              :key="index" 
              :content="item" 
              :index="index"
              @delete='handleDelete'
              >
              </todo-item>
          </ul>
      </div>
  
      <script>
          //全局組件 
          Vue.component('todo-item', {
              props:['content','index'],//至關於接收父節點的屬性
              template: ` <li v-on:click="handleClick">{{content}}{{index}}</li>`
              ,
              methods:{
                  handleClick:function(){
                      this.$emit('delete',this.index)//至關於傳遞給父類
                  }
              }
          })
  
  
          // //局部組件
          // var toDoItem = {
          //     template: `<li >item</li>`
          // }
  
          var app = new Vue({
              el: '#app',
             
              //局部組件的聲明
              // components: {
              //     'todo-item': toDoItem
              // },
              data: {
                  inputValue: '',
                  list: []
              },
              methods: {
                  handleSubmit: function () {
                      this.list.push(this.inputValue)
                      this.inputValue = ""
                  },
                  handleDelete: function(index){
                     this.list.splice(index,1)
                  }
              }
          })

總結：

• 子組件向父組件傳遞參數： 經過綁定屬性的形式
• 父組件向子組件： 發佈訂閱模式

這一塊準備在後面的文章中將組件間通訊單獨拎出來分析。加深本身的理解。