Vue的基本语法和生命周期

一、计算属性

计算属性
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果

监视属性:
通过通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算

计算属性高级:
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次getter计算
getter：属性的get方法
setter：属性的set方法

二、class与style绑定

理解
在应用界面中, 某个(些)元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术

class绑定: :class='xxx'
xxx是字符串
xxx是对象
xxx是数组

style绑定
:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中activeColor/fontSize是data属性

<div id="demo">
<h2>1. class绑定: :class='xxx'</h2>
<p class="cClass" :class="a">xxx是字符串</p>
<p :class="{aClass: isA, bClass: isB}">xxx是对象</p>
<p :class="['aClass', 'cClass']">xxx是数组</p>

<h2>2. style绑定</h2>
<p :style="{color: activeColor, fontSize: fontSize + 'px'}">style绑定</p>

<button @click="update">更新</button>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
a: 'aClass',
isA: true,
isB: false,
activeColor: 'red',
fontSize: 20
},
methods: {
update(){
this.a = 'bClass';
this.isA = false;
this.isB = true;
this.activeColor = 'green';
this.fontSize = 30;
}
}
})
</script>
</body>
</html>

条件渲染指令
v-if
v-else
v-show

比较v-if与v-show
如果需要频繁切换 v-show 较好

列表显示
数组: v-for / index
对象: v-for / key

列表的更新显示
删除item
替换item

绑定监听:
v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
默认事件形参: event
隐含属性对象: $event

事件修饰符:
.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()

按键修饰符
.keycode : 操作的是某个keycode值的健
.enter : 操作的是enter键

三、生命周期

vue对象的生命周期
1). 初始化显示
beforeCreate()
created()
beforeMount()
mounted()
2). 更新显示：this.xxx = value
beforeUpdate()
updated()
3). 销毁vue实例: vm.$destory()
beforeDestory()
destoryed()
常用的生命周期方法
mounted(): 发送ajax请求, 启动定时器等异步任务
beforeDestory(): 做收尾工作, 如: 清除定时器