Vue-----指令与修饰符

1.常用的指令

{{}}：插值表达式

v-html：显示html的内容

v-text：和插值一样也是使用vue中的变量，但是默认没有闪缩问题，但是会覆盖原本的内容，插值不会

v-cloak：解决插值的闪烁问题

v-bind：属性绑定，等同于：

v-on：事件绑定，等同于@

v-if：实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。

v-else：v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。

v-show：根据条件展示元素

v-for：通过遍历进行渲染

v-model：用于在表单上创建双向数据绑定

 2.常用指令的用法

• {{}}

<span>{{msg}}</span>

• v-html

<div id="app">
    <div v-html="msg"></div>
</div>
<script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        msg:"<h3>hello vue</h3>"
      }
    })
</script>

• v-text

<span v-text="msg"></span>

• v-cloak

<div id="app" v-cloak>
    <div>
        {{message}}
    </div>
</div>
<script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        message:'hello world'
      }
    })
</script>

• v-bind

<div id="app">
    <!--当data里面定义的isActive等于true时，is-active这个类才会被添加起作用-->
    <!--当data里面定义的hasError等于true时，text-danger这个类才会被添加起作用-->
    <div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,  
            hasError: false
        }
    })
</script>

• v-on

<div id="app">
    <button @click="consoleLog"></button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods:{
            consoleLog:function (event) {
                console.log(1)
            }
        }
    })
</script>

• v-if

<a v-if="ok">yes</a>

• v-else

<a v-if="ok">yes</a>
<a v-else>No</a>

• v-show

<h1 v-show="ok">hello world</h1>

• v-for

<div v-for="(item,index) in items"></div>   //使用in，index是一个可选参数，表示当前项的索引
<div v-for="item of items"></div>   //使用of

• v-model

<div id="app">
    <input v-model="somebody">
    <p>hello {{somebody}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            somebody:'小明'
        }
    })
</script>

 3.事件修饰符

.stop：阻止冒泡

.prevent：阻止默认事件

.passive：不阻止事件的默认行为

.capture：添加事件侦听器时使用事件捕获模式

.self：只当事件在该元素本身(比如不是子元素)触发时触发回调

.once：事件只触发一次

<div class="inner" @click="div1Handler">
    <input type="button" value="点击" @click.stop="btnHandler">
</div>

 事件修饰符的详细用法请参考：https://blog.youkuaiyun.com/qq_38526573/article/details/94874277