v-cloak
1v-cloak解决闪烁问题:
当网速很慢的时候，vue将数据渲染到界面中，会出现插值表达式闪烁问题:
如下图可以修改网页速度（调节网速形式）：
解决办法： <style> /* v-cloak配合属性选择器，默认隐藏，当 数据回来的时候，v-cloak指令会自动转换显 示模式 */
[v-cloak]{
display: none;
}
</style><p v-cloak>{{msg}} </p> v-text ------- v-html
v-text与v-html 和 jquery中的text()与html()方法是一样的作用，都可以设置标签的文本内容，v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出
v-if -------- v-show
v-show hidden element will be applied on the style = dom nodes 'display: none'
v-if an element is directly removed completely (destruction)
v-if 有更高的切换消耗 而 v-show 有更高的初始渲染消耗。
使用场景： 如果需要频繁的切换 v-show 比较好，如果在运行条件不大可能改变用 v-if 比较好。V-else
Restrictions: previous sibling element must be v-if or v-else-if.
v-bind abbreviated as:
v-bind 指令被用来响应地更新 HTML 属性，其实它是支持一个单一 JavaScript 表达式 （v-for 除外）v-for
//遍历普通数组
<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">When using the v-for, it must be necessary to add a key value
在用v-for更新已渲染的元素列表的时候，会使用就地复用的策略；这就是说列表数据修改的时候，他会根据key值去判断某个值是否修改，如果修改了就重新渲染，不然就复用之前的元素。
key属性的类型只能为 string或者number类型。v-on abbreviated as @
用来绑定事件的
同时绑定多个事件
<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");
},
}In this case, the browser will move the mouse button console will print button console mouseenter out of print mouseout
Add a form div app is in the form submitted a binding event
<form v-on:submit="onSubmit">
<input type="text"><br />
<input type="submit" value="提交">
</form>In the method of adding onSubmit
onSubmit:function() {
console.log("submitted");
},Binding finish found at run time can not print out the reasons submitted in the console is refreshed each time the page is submitted
There are two ways to avoid refreshing
the first parameter passed onSubmit $ event
<form v-on:submit="onSubmit($event)">then
onSubmit:function(e) {
e.preventDefault();
console.log("submitted");
},In this way we will be able to print out submitted without refreshing the page
However vue provides a more simple way for us and that is
<form v-on:submit.prevent="onSubmit">The onSubmit not change
onSubmit:function() {
console.log("submitted");
},vue also provides subnit.stop to stop bubbling
keyUp event also provides keyUp.enter only enter when the trigger is pressed
<form v-on:keyUp.enter="onkeyUpenter" v-on:submit.prevent="onSubmit">Add method in
onkeyUpenter : function() {
console.log("keyenterpressed");
},in the model
v-model通常用于表单组件的绑定，例如input，select等。它与v-text的区别在于它实现的表单组件的双向绑定，如果用于表单控件以外标签是没有用的{{}}
{{}} Is a short form of v-text
v-once: rendering only one element or assembly;
v-pre: not compiled directly displayed content;
v-cloak: hide uncompiled Mustache label until ready example, is hidden {{}};