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

摘要： vue學習路徑和建議----尤雨溪 vue官網 今天看了慕課網的一個教學視訊 Vue入門 感覺清晰了很多 首先引入一個簡單的todolist案例 初始化專案（引入 vue.js 部分省略）<!-- 掛載點 --> <div ...

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)
  }
  }
  })

總結：

• 子元件向父元件傳遞引數： 通過繫結屬性的形式
• 父元件向子元件： 釋出訂閱模式

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