1.声明和渲染

    <div id="app">
      {{message}}
    </div>

    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello zhengzha'
      }
    })

创建一个Vue实例，并挂载到id为app的标签上

el: ' ' 挂载Vue实例对象

data：Vue实例的数据全部存储在这里，是一个哈希

{{message}} data里面的message就用{{message}}来渲染的

---

2.绑定元素属性

  <div id="app2">
    <span v-bind:title="message">
      鼠标停留看到东西
    </span>
  </div>
  
  var app2 = new Vue({
      el: '#app2',
      data: {
        message: `页面加载于${new Date().toLocaleString()}`
      }
    })

v-bind:title='message' 将title属性和vue实例data里面的message相绑定

---

3.循环语句

    <div id="app3">
      <p v-if="seen">你能看到我吗</p>
    </div>

     var app3 = new Vue({
      el: '#app3',
      data: {
        seen: false/true
      }
    })

v-if true则出现，false则隐藏 seen 和data里面的seen对应

    <div id="app4">
      <ol>
        <li v-for="key in todos">
            {{key.text}}
        </li>
      </ol>
     </div>

    var app4 = new Vue({
      el: '#app4',
      data: {
        todos: [{
            text: '好好学习'
          },
          {
            text: '天天向上'
          },
          {
            text: '重新做人'
          }
        ]
      }
    })

v-for 循环遍历生成li标签，vue实例data里面有一个todos的数组，里面有三个哈希，用for in 遍历对象方式

4.处理用户输入，监听动作

  <div id="app5">
    <p>{{message}}</p>
    <button v-on:click='reverseMessage'>逆转消息</button>
  </div>

    var app5 = new Vue({
      el: '#app5',
      data: {
        message: "你好，孙陈龙"
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        } //()=>箭头函数导致this变化，指向不到message了
      }
    })

v-on 监听click事件，触发函数，在vue实例里面可以用this访问当前对象属性

tips：用了箭头函数形式，结果导致this指向改成window，慎重！

---

5.双向绑定 v-model

  <div id="app6">
    <p>{{message}}</p>
    <input v-model='message'>
  </div>

   var app6 = new Vue({
      el: '#app6',
      data: {
        message: 'hello China!'
      }
    })

经典 你变我也变

v-model : 实现表单输入和应用状态之间的双向绑定。

6.组件

  
  <div id="app7">
    <ol>
      <todo-item
        v-for='item in groceryList'
        v-bind:todo='item'
        v-bind:key="item.id"
      >
      </todo-item> 
    </ol>
  </div>

      Vue.component('todo-item', {
      props:['todo'],
      template: '<li>{{todo.text}}</li>'
    })

    var app7 = new Vue({
      el:'#app7',
      data:{
        groceryList:[
          {id:'0',text:'蔬菜'},
          {id:'1',text:'茄子'},
          {id:'2',text:'随便其他什么东西'}
        ]
      }
    })

Vue,component 创建一个组件，name为'todo-item'，组件对象里面有一个props属性，表明接受父组件的变量名称，template模板就是组件长啥样

在HTML中直接以name为标签名插入

 <todo-item
        v-for='item in groceryList'   循环
        v-bind:todo='item' 将接受的todo和item绑定
        v-bind:key="item.id" 定义一个key用来加以标识
      >
 </todo-item>