1声明周期:
created:实例创建完成后调用,这个阶段完成了数据监测等,但是还没有完成挂载,$el还不可以用,一般用来做数据初始化
mounted:$el挂载之后,一般我们第一个业务逻辑会从这里开始
beforeDestroy:实例销毁之前,主要是解绑一些监听事件
2 v-pre跳过这个元素和子元素不编译,例如:
<span v-pre>{{这里的内容是不会被编译的}}</span>
3 computed与methods的区别:
计算属性是基于它的依赖缓存的.一个计算属性所依赖的数据发生变化时,它才会重新取值,而methods在数据重新渲染的时候就会被调用
举个例子:
<div id="app"> <!-- 每次点击时，显示的时间都不同 --> <button @click="showMethod">methodsNow</button> <!-- 每次点击时，显示的时间都相同 --> <button @click="showComputed">computedNow</button> </div> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods:{ methodsNow: function(){ return new Date().toLocaleString(); }, showMethod: function() { alert(this.methodsNow()); }, showComputed: function() { alert(this.computedNow); } }, computed:{ computedNow: function(){ return new Date().toLocaleString(); } } })因为数据没有变化,所以计算属性没有重新执行,而点击按钮调用methods.使用计算属性还是方法取决于是否需要缓存,当遍历大数组时,一般用计算属性.
4 基本指令:
4.1v-cloak:
v-cloak是不需要表达式,它会在Vue实例结束编译的时候从绑定的HTML中移除,一般是和display:none一起使用,举个例子:
<div id='app' v-cloak>
{{message}}
</div>
虽然已经加了v-cloak,但是当网速比较慢的时候,vue.js还没有加载完的时候,会在页面上显示{{message}},直到vue被编译结束时才会被替换,这个时候我们要和display:none一起使用:
[v-cloak]{
display:none
}
4.2 v-if条件语句:
<div id='app'>
<p v-if="status===1">当 status===1时这一行显示出来</p>
</div>
当有多行元素时,用<template>举个例子:
<div id='app'>
<template v-if="status===1">
<p>要显示的信息</p>
<p>要显示的信息</p>
<p>要显示的信息</p>
</template>
</div>
v-show 当条件为真的时候显示:
<div id='app'>
<p v-show="status===1">当 status===1时这一行显示出来</p>
</div>
v-show和v-if的区别
首先v-show不允许用template
其次,v-if当条件为真的时候才会编译,但是v-show无论条件是不是真,都会编译,只是不渲染,当频繁的切换条件的时候应该选择v-show,因为v-if切换的开销会更大
