vue【指令】

<div class="m-conbox">
     <div v-text="html"></div>
     <div>{{html}}</div>
</div>

<script>
    export default {
        data(){
            return{
                html:"我是html内容"
            }
        }
    }
</script>

v-text 和 {{}} 效果一样的，但最好用v-text，解决刷新问题

添加html：v-html

<div v-html="html"></div>

<script>
    export default {
        data(){
            return{
                html:"<h1>我是html内容</h1>"
            }
        }
    }
</script>

数据双向绑定：v-model【在input里面修改内容，p标签也会跟着改】

<input type="text" v-model="html">
<p>{{html}}</p>

只使用一次：v-once【在input里面修改内容，p标签也会跟着改】

绑定属性：v-bind：属性名称，带有bind的可以简写成：属性名称

<img :src="imgs"/>

data:
    imgs：“1.png”



<div :disable="aa"></div>

data:
     aa:"true"

<div :class="bb></div>

data:
     aa:"box

.box{100px;height:100px;border:1px solid;}

<a :href="c">我会跳转</a>

data:
     aa:"a.html"

 

循环遍历 v-for

<ul>
    <li v-for="todo in todos">{{todo.text}}</li>
</ul>

<script>
    export default {
        data(){
            return{
                todos:[
                    {text:"1"},
                    {text:"2"}
                ]
            }
        }
    }
</script>

条件判断 v-if   v-else

<p v-if = "arr.length ==0">暂无数据</p>
<p v-else>{{arr}}</p>

data:{
      arr:[1,2,3]  
}

绑定事件 v-on：事件名称，简写@事件名称 【v-on:click="show" 可以简写成 @click = "show"】

事件：@click

　　　@keydown：键盘按下触发

　　　@keyup：键盘弹起触发

当键盘按下左箭头时才触发事件k，弹出2

<button @click ="show()">按钮</button>
<input type="text" @keydown = "k()"/>

data{

},
methods:{
   show:function(){
        alert(1)
    },
    k:function(e){
       var e = window.event || e;
       if(e.keyCode == 37){
          alert(2)
       }
   }    
}

阻止默认行为 prevent

<a href="h.html"  @click.prevent = "show"></a>  ==>会阻止跳转到h.html