计算属性和监听器
computed计算属性
watch 侦听属性
methods
computed示例
<!DOCTYPE html> <html>
<head>
<metacharset="utf-8">
<title></title>
<scriptsrc="js/vue.min.js"></script></head>
<body>
<divid="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>var vm = new Vue({
el: '#example', data: { message: 'Hello' },
computed: { // 计算属性的 getter reversedMessage: function () {
// `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }})</script></body></html>
-watch示例:
<!DOCTYPE html>
<html><head><metacharset="utf-8"><title></title>
<scriptsrc="js/vue.min.js"></script></head>
<body>
<divid="demo">
<inputtype="text"v-model="firstName"></input><inputtype="text"v-model="lastName"></input>{{ fullName }}
</div>
<script>var vm = new Vue({
el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val }
}})
</script></body></html>
computed，watch，methods执行顺序
computed是在HTML DOM加载后马上执行的，如赋值；
而methods则必须要有一定的触发条件才能执行，如点击事件；
watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。
所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。
watch和computed各自处理的数据关系场景不同
1.computed擅长处理的场景：一个数据受多个数据影响（多个值的变化影响一个）
2.watch擅长处理的场景：一个数据影响多个数据(观察一个值的变化，另外的值跟着变化)
Vue目前学到的属性
el
data
methods
computed
watch
