常用vue指令

2020-04-28 本文已影响0人卟噜卟噜叭

v-ocloak的使用

//使用v-ocloak能够解决插值表达式闪烁问题（网络慢时进入页面会先显示{{msg}}请求vue才显示正确到插入值）
<head>
  <style>
        [v-cloak]{
            display: none;
        }
  </style>
</head>
<body>
  <div id="app">
    <p v-cloak>{{msg}}</p>
  </div>
</body>

v-text的使用

默认v-text没有闪烁问题

插值表达式前后可以放任何内容，只会替换自己的这个占位符，不会把整个元素的内容清
空，v-text会覆盖元素中原本的内容

<div id="app">
    <p v-cloak>******{{msg}}*****</p>
    <h4 v-text="msg">==========</h4>
</div>

效果图片

插值表达式与v-text效果演示

v-html的使用

当渲染内容是html字符串时不能使用插值表达式和v-text，而要使用v-html

data: {
            msg2: '<h1>这是一个h1</h1>'
       }

<div id="app">
    <div>{{msg2}}</div>
    <div v-text="msg2"></div>
    <div v-html="msg2"></div>
</div>

渲染结果

v-bind的使用

v-bind是vue中提供的用来绑定属性的指令

<input type="button" v-bind:title="title" value="按钮">

var vm = new Vue({
        el: '#app',
        data: {
            title: '一个自定义的title'
        }
    })

效果演示

v-bind会把绑定的内容当作js表达式来解析，所以可以直接进行字符串拼接

<input type="button" v-bind:title="title+'拼接的部分'" value="按钮">

效果演示

简写方式v-bind:属性可以简写为:属性

<input type="button" :title="title+'拼接的部分'" value="按钮">

v-on的使用

vue中提供的v-on事件绑定机制，与v-bind区别，v-bind用来绑定属性

v-on的缩写为@

 <input type="button" v-on:click="show" value="按钮">

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Yes,Study Begin',
            msg2: '<h1>这是一个h1</h1>',
            title: '一个自定义的title'
        },
        //在methods中定义当前Vue实例中所有可用的方法
        methods:{
            show:function () {
                alert("Hello");
            }
        }
    })

</script>

v-model的使用

可以用来实现双向数据绑定，只能用在表单元素中

***************************************这是一条分割*******************************************

事件修饰符

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

stop 阻止冒泡

prevent 阻止默认事件

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

self 只当事件在该元素本身（比如不是子元素）触发时触发回掉

once 事件只触发一次

passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，.passive 修饰符尤其能够提升移动端的性能。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用stop修饰符前

<div @click="divHandler" class="inner">
        <input @click="btnHandler" type="button" value="点一哈">
</div>

使用前点击效果

使用stop修饰符后

<div @click="divHandler" class="inner">
        <input @click.stop="btnHandler" type="button" value="点一哈">
</div>

使用后点击效果

prevent修饰符的使用

    <!--阻止a标签的默认跳转-->
    <a @click.prevent="linkClick" href="http://www.bai.com">有问题先百度</a>

使用capture修饰符前

<div @click="divHandler" class="inner">
        <input @click="btnHandler" type="button" value="点一哈">
</div>