今天开始学习vuejs

今天开始学习vuejs

知识点1，vue修改数据

app.$data.content = 'bye world';

知识点2，绑定事件 v-on:click

#3，双向绑定v-model=”inputValue”

#4 , 组件的写法

Vue.component("TodoItem",{
  template:"<li>Todo Item</li>"
})

#5，组件引用

<todo-item v-for="item in list"><todo-item>

#6, 组件数据引用，定义全局组件

<todo-item v-bind:content="item" v-for="item in list"><todo-item>

Vue.component("TodoItem",{
  props:['content'],
  template:"<li>{{content}}</li>"
})

#7，局部组件定义和注册

var TodoItem = {
  props:['content'],
  template:"<li>{{content}}</li>"
}

var app = new Vue({
  el:'#root',
  components:{
   //组件的注册
   TodoItem:TodoItem
  },
  data:{
    inputValue:'',
    list:[]
  },
  methods:{
  }
})

#，子组件向父组件传值

<div id="root">
  <input type="text" v-model="inputValue">
  <button @click="add"></button>
  <ul>
    <todo-item v-bind:content="item" v-bind:index="index" v-for="(item, index) in list" @delete="handleDelete"></todo-item>
  </ul>
</div>

var TodoItem = {
  props:['content', 'index'],
  template:"<li @click="handleDelete">{{content}}</li>",
  methods:{
    handleDelete:function(){
      this.$emit("delete", this.index)
    }
  }
}

var app = new Vue({
  el:'#root',
  components:{
   TodoItem:TodoItem
  },
  data:{
    inputValue:'',
    list:[]
  },
  methods:{
    add: function(){
      this.list.push(this.inputValue)
    }
    handleDelete: function(index){
      this.list.splice(index, 1)
    }
  }
})