<template>

    <div>

        <div>{{ newmsg }}</div>

        <div>{{ fathermsg }}</div>

        <button v-on:click="onClickMe">click Me!</button>

    </div>

</template>

<script type="text/javascript">

    export default {

        data () {

            return {

                newmsg: '我是componetA组件里的第一句话',

                childmsg: '我是从componetA传给App的话'

            }

        },

        props: ['fathermsg'],//父组件向子组件传递数据，子组件通过props选项配置来接收数据

        methods: {

            onClickMe () {

                this.$emit('childClick' , this.childmsg);//子组件向父组件传递数据或者非父子组件之间传递数据，在被引用组件中用this.$emit()触发事件，并传递数据到引用组件中

            }

        }

    }

</script>

<style type="text/css">

    div{ color: red; font-size: 16px; font-weight: bold;}

</style>

<template>

  <div id="app">

    <h1 v-html="title"></h1>

    <!--v-model实现input、select、textarea与数据进行双向绑定，v-on:keyup.enter为鼠标按下的事件-->

    <input v-model="newItem" v-on:keyup.enter="addNew">

    <ul>

      <!--v-for实现数据循环展示，v-bind:class为动态绑定一个或多个特性-->

      <li v-for="item in items" v-bind:class="[defaultLi,{isFinished: item.isFinished}]" v-on:click="toggleFinished(item)" >

        {{item.label}}

      </li>

    </ul>

    <!--引用组件中通过v-on:被引用组件emit方法名来监听被引用组件的事件触发-->

    <component-a fathermsg="我是APP.vue传给子组件ComponentA的话" v-on:childClick="childTellMe"></component-a>

    <div>child tell me:{{childMsg}}</div>

  </div>

</template>

<script>

import Store from './store.js';

import ComponentA from './components/componentA'

//export default暴露出来的数据，相当于new Vue()里面的参数，这里的数据可以直接应用到页面上

export default {

  data: function () {//数据

    return {

      title: '<span>???</span>this is todo list',

      items: Store.fetch(),

      defaultLi: 'defaultLi',

      newItem: '',

      childMsg: ''

    }

  },

  components: { ComponentA },//要使得引入的模块作为标签插入，则需要通过componets这个参数进行配置

  methods: {//方法，要获取data里面的数据使用this去取值

    toggleFinished: function(item){

      item.isFinished = !item.isFinished;

    },

    addNew: function(){

      this.items.push({

        label: this.newItem,

        isFinished: false

      })

      this.newItem = '';

    },

    childTellMe (msg) {

        this.childMsg = msg;

    }

  },

  watch: {

    items: {

      handler: function (items){

        Store.save(items);

      },

      deep: true//如果是深度watch，object的值不管是其中一个值发生变化还是新增键值，都会监测到，并触发handler函数

    }

    // items: function(items){

    //   Store.save(items);//普通watch，如果只是object的一个值发生变化，则不会触发该函数

    // }

  }

}

</script>

<style>

.defaultLi{color: red;}

.isFinished{ 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>