定义方法（ methods ）
计算属性（ computed ）
数据需要 反向 输入出渲染在页面
<body>
<div id="app">
{{ str.split('').reverse().join('') }}
<p> {{ newStr }} </p>
<p> {{ newMsg }} </p>
<input type="text" v-model = "newMsg">
<p> title: {{ title }} </p>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
/* ! 思考： 如果我们的数据需要 反向 输入出渲染在页面，我们如何处理
str -> you Love yourself !!!
*/
new Vue({
el: '#app',
data: {
str: 'You love yourself !!! ',
title: ''
},
computed: {
/* 第一种方式： 方法 */
newStr () {
return this.str.split('').reverse().join('')
},
/* 第二种方式： 存储器 */
newMsg: {
get () {
return this.str.split('').reverse().join('')
},
set ( val ) {
this.title = val
}
}
}
})
</script>
双向数据绑定 输入名字出现姓和名 输入姓和名出现名字
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="form-group">
<label for=""> 请输入FirstName </label>
<input type="text" class="form-control" v-model = "firstName" name="" id="" aria-describedby="helpId" placeholder="">
</div>
</div>
<div class="row">
<div class="form-group">
<label for=""> 请输入LastName </label>
<input type="text" class="form-control" v-model = "lastName" name="" id="" aria-describedby="helpId" placeholder="">
</div>
</div>
<div class="row">
<div class="form-group">
<label for=""> 请输入FullName </label>
<input type="text" class="form-control" v-model = "fullName" name="" id="" aria-describedby="helpId" placeholder="">
</div>
</div>
</div>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
firstName: '',
lastName: ''
},
computed: {
fullName: {
get () {
return this.firstName + this.lastName
},
set ( val ) {
/* val就是我们的绑定的input的新值 */ //萧山 吴彦祖
this.firstName = val.slice( 0, 2 )
this.lastName = val.slice( 2 )
}
}
}
})
</script>
监听属性（watch）
作用
监听数据的变化，当数据发生改变时，我们完成一些操作
<body>
<div id="app">
<button @click = "increment"> + </button>
<p>count: {{ count }} </p>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
count: 0
},
watch: {
count () {
/* watch里面key名称就是数据的名称 */
/* 当我们修改count这个数据式，这个方法自动触发了 */
/*
* 项目中 - 上拉加载
异步操作 - 数据请求
*/
document.title = this.count
}
},
methods: {
increment () {
this.count ++
}
}
})
</script>
watch-深入监听
<body>
<div id="app">
<button @click = "increment"> + </button>
<p>count: {{ num.count }} </p>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: {
count: 0
}
},
watch: {
num: {
deep: true,
handler () {
console.log('handler')
document.title = this.num.count
}
}
},
methods: {
increment () {
this.num.count ++
}
}
})
</script>
总结：
methods vs computed vs watch
项目中如何使用
事件处理程序： methods
watch 有大量数据交互和异步处理时进行
computed
- 有逻辑处理
- V中像全局变量一样使用
