vue 的常见指令

1. v-html 指令如下代码演示

html代码

<div id="app" v-html="url"></div>

js代码

 const vm=new Vue({
            el:'#app',
            data(){
                return {
                  url:'<a href="http://www.baidu.com">百度一下</a>'  
                }
             
            }
        })

2. v-text 指令如下代码演示

html代码

 <div id="app">
        <h2>{
  {texts}},在你</h2>
        <h2 v-text="texts">,在在</h2>
    </div>

js代码

 const vm=new Vue({
           el:'#app',
            data(){
              return{
                texts:'你好啊'
            }
          }
       })

3. v-on 指令如下代码演示

html代码

  <div id="app">

        <!-- <button v-on:click='add'>+</button> -->

        <!-- v-on:click可以简写成 @click-->

        <button @click='add'>+</button>

        <div>{
  {num}}</div>

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

        <button @click='ajj'>-</button>
   </div>

js代码

   const vm=new Vue({
          el:'#app',
          data(){
            return{
                num:0,
            }

          },
          methods:{//所有的vue中的方法都可以写在methods里面
              
            //   add:function(){
            //     console.log('add');
            //   },
            //   ajj:function(){
            //      console.log('ajj')
            //   }