vue第二课：常用标签

1，v-text指令 

<div id='app'>
   <h2 v-text="message+'???'"></h2>
   <h2 v-text="info"></h2>
   <h2>{{message+'??'}}江苏</h2>
  </div>

 <script>
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
    var app = new Vue({
      el:'#app',
      data:{
        message:'v-text测试',
        info:'前端与移动部',
      }
    })
  </script>

2，v-html指令 

 <div id='app'>
    <h2 v-html="message"></h2>
    <h2 v-text="info"></h2>
  </div>
  <script>
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
    var app = new Vue({
      el:'#app',
      data:{
        message:'<a href="http://www.baidu.com">百度</a>',
        info:'<a href="http://www.baidu.com">百度</a>',
      }
    })
  </script>

3，v-on指令

为元素绑定时间

 <div id='app'>
   <input type="button" value="v-on指令" v-on:click="doit">
   <input type="button" value="v-onmonseenter指令" v-on:monseenter="doit">
   <input type="button" value="v-on双击指令" v-on:dblclick="doit">
   <input type="button" value="v-on简写指令" @dblclick="doit">
  <h2 @click="changeFood">{{food}}</h2>
  </div>
<script>
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
    var app = new Vue({
      el:'#app',
      data:{
        food:'番茄炒蛋'
      },
      methods: {
        doit:function(){
           alert('我出现了')
          } ,
        changeFood:function(){
          this.food+='好吃！！'
        }      
      },

    })
  </script>