Vue的基本语法和生命周期

一、计算属性

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

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

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

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

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

6. 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>

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

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

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

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

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

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

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

三、生命周期

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