vue one day

记录vue学习之路

 

v-cloak指令用法：

1.提供样式

[v-cloak] { display: none; }
<div v-cloak> {{ message }} </div>

2.在插值表达式所在的标签中添加v-cloak指令背后原理：

先通过样式隐藏内容，然后在内存中进行值得替换，替换好后再显示最终结果。（通俗说编译结束才会显示样式）

 

v-text指令：

填充纯本文，相比插值表达式更简洁。

v-html：

填充html片段，内容按普通 HTML 插入。存在安全问题，来自内部数据可以使用，来自第三方数据不要使用。

v-pre：

跳过编译过程，显示原始信息。

v-oce：

只编译一次。如果显示信息后续不再修改可以使用v-once提供性能。

v-model：

数据双向绑定。

<!-- 底层实现原理 -->
<div>
    <input value="msg" @input="msg=$event.target.vule">
    <!-- 通过绑定input事件 把输入域得值实时覆盖倒msg -->
<div>
<script>
    var app =Vue({
      el:"#app",
      data:{
        msg:"hi"
}
});
<script>

v-on：

事件绑定。

<!-- 方法处理器 -->
<!-- 默认传递event 也就是事件本身 -->

<button v-on:click="doThis"></button>

<!-- 内联语句 -->
<!-- $event为事件本身，固定参数写法，需放在最后一个传入。 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>


<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>