V-マント
1v-cloak解决闪烁问题:
当网速很慢的时候,vue将数据渲染到界面中,会出现插值表达式闪烁问题:
如下图可以修改网页速度(调节网速形式):
![](https://img2018.cnblogs.com/blog/1830100/201910/1830100-20191027050208204-1770548302.png)
解决办法:
<style> /* v-cloak配合属性选择器,默认隐藏,当 数据回来的时候,v-cloak指令会自动转换显 示模式 */
[v-cloak]{
display: none;
}
</style>
<p v-cloak>{{msg}} </p>
V-テキスト------- V-HTML
v-text与v-html 和 jquery中的text()与html()方法是一样的作用,都可以设置标签的文本内容,v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出
-------- V-IF V-ショー
隠し要素がスタイル= DOMノード上で適用されるV-ショー「表示:なし」
V-場合、要素が直接完全に除去される(破壊)
v-if 有更高的切换消耗 而 v-show 有更高的初始渲染消耗。
使用场景: 如果需要频繁的切换 v-show 比较好,如果在运行条件不大可能改变用 v-if 比较好。
V-ELSE
制限事項:前の兄弟要素は、V-IFまたはV-ELSE-場合でなければなりません。
V-バインドと略記:
v-bind 指令被用来响应地更新 HTML 属性,其实它是支持一个单一 JavaScript 表达式 (v-for 除外)
V-用
//遍历普通数组
<p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p>
//遍历对象数组
<p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p>
//遍历对象
<p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>
//遍历数字
<p v-for="count in 10">
V-用を使用する場合は、キー値を追加する必要がある必要があります
在用v-for更新已渲染的元素列表的时候,会使用就地复用的策略;这就是说列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改了就重新渲染,不然就复用之前的元素。
key属性的类型只能为 string或者number类型。
V-上と略します@
用来绑定事件的
同时绑定多个事件
<button v-on='{mouseenter:onEnter,mouseleave:onOut}' v-on:click="onClick">点我</button>
通过对象的方式绑定多个事件,对象中的键是事件的名称 值是methods中的成员属性方法
methods : {
onClick : function(){
console.log("clicked");
},
onEnter : function(){
console.log("mouseenter");
},
onOut : function(){
console.log("mouseout");
},
}
この場合、マウスボタンコンソールを移動するブラウザは、ボタンコンソールを印刷します印刷マウスアウトのうちのMouseEnter
divのアプリがフォームであるフォームを追加結合事象を提出
<form v-on:submit="onSubmit">
<input type="text"><br />
<input type="submit" value="提交">
</form>
onSubmitを添加する方法で
onSubmit:function() {
console.log("submitted");
},
コンソールで提出の理由をプリントアウトすることはできません実行時に見つかったバインディング仕上げは、ページが送信されるたびに更新されます
さわやか避けるための2つの方法があります
最初のパラメータは$をonSubmitイベントは、渡されました
<form v-on:submit="onSubmit($event)">
それから
onSubmit:function(e) {
e.preventDefault();
console.log("submitted");
},
このように、私たちは、ページを更新せずに提出し、プリントアウトすることができます
しかしVUEは、私たちのために、より簡単な方法を提供し、それがあります
<form v-on:submit.prevent="onSubmit">
onSubmitは変更しません
onSubmit:function() {
console.log("submitted");
},
VUEはまた、バブリングを停止するsubnit.stopを提供します
keyUpイベントもトリガーが押されたときにkeyUp.enterのみ入力して提供します
<form v-on:keyUp.enter="onkeyUpenter" v-on:submit.prevent="onSubmit">
中にメソッドを追加します
onkeyUpenter : function() {
console.log("keyenterpressed");
},
モデルで
v-model通常用于表单组件的绑定,例如input,select等。它与v-text的区别在于它实现的表单组件的双向绑定,如果用于表单控件以外标签是没有用的
{{}}
{{}} Vテキストの短い形態であります
V-度:一つだけの要素またはアセンブリをレンダリングします。
V-前:直接コンテンツ表示されコンパイルされません。
V-マント:コンパイルされていない口ひげラベルを隠す準備例まで、隠されています{{}}。