1 Vue 指令

v- 前缀的 特殊标签属性

1 v-html="表达式"  可以解析 文本html  类似 innerHtml

2 v-show  与 v-if

v-show="表达式"  true 表示 显示   false 标识隐藏 

v-if="表达式"  true 表示 显示   false 标识隐藏 

区别 

当v-show 的值为false 时  此时在标签中 任然存在 ,同时被标记为 display:none 

适用用频繁切换显示与隐藏的场景

当v-if 的值为false时 ,在标签中 不存在

3 v-if  与 v-else  与 v-else-if

使用时需要在相邻的地方使用

<div id="app">
  {{ msg }}

    <p v-if="type==='1'">  类型1 </p>
    <p v-else>  类型2</p>

    <p v-if="state===1">  状态1 </p>
    <p v-else-if="state===2">  状态2</p>
    <p v-else-if="state===3">  状态3</p>
    <p v-else>  状态4</p>
</div>



<script type="text/javascript" src="../static/js/vue.js"></script>

<script>

  const app = new Vue({
    el:'#app',
    data:{
      type : '1',
      state : 1,
    }
  })


</script>

 4 v-on  注册事件 = 添加监听 + 提供处理逻辑

v-on:事件名 = '内联语句'

v-on:事件名 = 'methods中的函数名'

例:

v-on:click='count++'

v-on:  在频繁输入时比较繁琐  ,可以替代为 @

v-on:    =   @ 

v-on:click='count++'     等价于   @click='count++'