vue学习笔记（持续更新）

vue的实例化

vue的实例化有以下几种形式:

new Vue({
    el: '#app',
    data: {
        foo: 'bar',
        items:{
            title:"hander",
            isfinshed:true
        }
      }
  })

export default {
  name: 'app',
  data:function(){
    return {
      message:"this is a todolist",
      items:Storage.fetch(),
      content:""
    }
  }
}

vue文件的组成结构

vue文件由三个部分组成：组件、脚本、样式即template、script、style

<template>
<div id="app">
    <h1>{{message}}</h1>
    <input type="text" v-model="content" v-on:keyup.enter="keycont()" />
    <ul>
      <li v-for="item in items" v-bind:class="{shbed:item.isfinlishbed}" v-on:click="finlishbed(item)" >{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
import Storage from './storage'

export default {
  name: 'app',
  data:function(){
    return {
      message:"this is a todolist",
      items:Storage.fetch(),
      content:""
    }
  },
  methods:{
    keycont:function(){
      if(this.content==""){
        return;
      }
      this.items.push({
          title:this.content,
          isfinlishbed:false
      });
      this.content = '';
    },
    finlishbed:function(item){
      item.isfinlishbed = !item.isfinlishbed;
    }
  },
  watch:{
    items:{
      handler:function(items){
        Storage.save(this.items)//保存至localstorage
      },
      deep:true
    }
  }
}
</script>

<style>
.shbed{
  text-decoration:underline;
}


#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

注册组件

关键字：component

<template>
  <div id="app">
    <component-a></component-a>
  </div>
</template>
<script>
import componentA from './components/componentA'

export default {
  name: 'app',
  data:function(){
    return {
      message:"this is a todolist",
      items:Storage.fetch(),
      content:""
    }
  },
  components:{
    componentA
  }
}
<script>

注册组件后可以直接在父级组件中引用。方式是标签的方式，如组件:componentA引入至父组件就以组件名的标签的形式展现。

父子组件传值

关键字:props、$emit

父向子传值（动态）

<component-a v-bind:chilname="this.cont"></component-a>（父vue文件）//chilname作为传递数据的属性
<input type="text" v-model="content" v-on:keyup.enter="keycont()" />（父vue文件）

<script>（父vue文件）
import Storage from './storage'
import componentA from './components/componentA'
export default {
  name: 'app',
  data:function(){
    return {
      message:"this is a todolist",
      items:Storage.fetch(),
      content:"",
      cont:""
    }
  },
  methods:{
    keycont:function(){
      if(this.content==""){
        return;
      }
      this.items.push({
          title:this.content,
          isfinlishbed:false
      });
      this.cont = this.content;//将文本框中的值传入到cont字段里
      this.content = '';
    },
    finlishbed:function(item){
      item.isfinlishbed = !item.isfinlishbed;
    }
  },
  watch:{
    items:{
      handler:function(items){
        Storage.save(this.items)//保存至localstorage
      },
      deep:true
    }
  },
  components:{
    componentA
  }
}
</script>


<script>（子vue文件）
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  props:['chilname'],//子组件接收来自父组件的数据属性
  watch:{//监听传递过来的数据
      'chilname':{
          handler: function () { 
              console.log(this.chilname)//打印至控制台
           },
          deep: true//深度监听
      }
  },
  methods:{
      'modclick':function(){
          console.log(this.chilname);
      }
  }
}
</script>

props用来接收来自父组件的数据，关联到子组件的属性：chilname，通过v-bind实现动态绑定.
this.cont的值来自于this.content。this.content的值与父vue里的input通过v-model绑定关联.可以实现联动绑定。将content的值传入cont最后传到子组件输出到控制台.

子向父传值（动态）

<component-a v-bind:chilname="this.cont" v-on:context="convert"></component-a>（父vue文件）

（父vue文件）
methods:{
    keycont:function(){
      if(this.content==""){
        return;
      }
      this.items.push({
          title:this.content,
          isfinlishbed:false
      });
      this.cont = this.content;
      this.content = '';
    },
    finlishbed:function(item){
      item.isfinlishbed = !item.isfinlishbed;
    },
    convert:function(msg){
      console.log(this.msg);
      this.items.push({
          title:msg,
          isfinlishbed:false
      })
    }//通过convert来监听来自子组件的数据
  },


<input type="text" v-model="msg" v-on:keyup.enter="modclick()">（子vue文件）

（子vue文件）
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: ''
    }
  },
  props:['chilname'],
  watch:{
      'chilname':{
          handler: function () { 
              console.log(this.chilname)
           },
          deep: true
      }
  },
  methods:{
      modclick:function(){
          console.log(this.msg);
          this.$emit('context',this.msg);//通过$emit方法来将子组件的msg传到父组件
      }
  }
}
</script>

v-on:属性名=“监听方法”（父vue文件）
$emit(父组件的绑定属性,数据)（子vue文件）