vue中的指令

<div id="app1">
    <p>{{message}}</p>
</div>

var nv = new Vue({
    el:‘#app1‘,
    data:{
        message:‘哈喽！‘,
    }
})

<div id="app2">
    <span :title="message2">
        鼠标悬停在这里
    </span>
</div>

var app2 =  new Vue({
      el:‘#app2‘,
      data:{
          message2:‘页面加载于‘+ new Date().toLocaleString()
      }
  })

<div id="app3">
    <span v-if="seen">看见我</span>
</div>

var app3 = new Vue({
    el:"#app3",
    data:{
        seen:true   //用true和false来判断能否看见内容
    }
})

<div id="app4">
    <ul>
        <li v-for="item in itemList">{{item}}</li>
    </ul>
</div>

var app4 = new Vue({
    el:"#app4",
    data:{
        itemList:[‘第一项‘,‘第二项‘,‘第三项‘]
    }
})

<div id="app5">
    <span >{{message5}}</span>
    <button v-on:click="news">点击扭转</button>
</div>

var app5 = new Vue({
    el:‘#app5‘,
    data:{
        message5:‘hello vue!‘
    },
    methods:{
        news:function(){
            this.message5 = this.message5.split(‘‘).reverse().join(‘‘)
        }
    }
})

<div id="app6">
    <span>{{message6}}</span>
    <input type="text" v-model="message6">
</div>

var app = new Vue({
    el:"#app6",
    data:{
        message6:‘数据双向绑定‘
    }
})