学习心得,
计算属性
直接上代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="example-1-1">
<p>Original message: "{{ msg }}"</p>
<p>Computed reversed message: "{{ fanxaing1 }}"</p>
</div>
<br>
<div id="example-1-2">
<p>Original message: "{{ msg }}"</p>
<p>Computed reversed message: "{{ fanxiang2() }}"</p>
</div>
<hr>
<div id="example-2-1">{{fullName}}</div>
<br>
<div id="example-2-2">{{fullName}}</div>
<hr>
<div id="example-3">
<p>
Ask a yes/no question:
<input type="text" v-model="question">
</p>
<p>{{answer}}</p>
</div>
<hr>
<script>
//计算属性,computed:,是有缓存的,用于遍历消耗严重的数据,在message没有发生变化时是不变的.
var vm1 = new Vue({
el:"#example-1-1",
data:{
msg:"Hello~~"
},
computed:{
// 计算属性的 getter
fanxaing1:function () {
// `this` 指向 vm 实例
return this.msg.split('').reverse().join('')
}
}
});
//使用方法来计算,method:,没有缓存
var vm2 = new Vue({
el:"#example-1-2",
data:{
msg:"123"
},
// 在组件中
methods: {
fanxiang2: function () {
return this.msg.split('').reverse().join('');
}
}
});
//侦听属性,watch:
var vm3 = new Vue({
el:"#example-2-1",
data:{
firstName:'first~1',
lastName:'last~2',
fullName:'first~last~'
},
watch:{
firstName:function(val){
this.fullName = val +'' +this.lastName
},
lastName:function(val){
this.fullName = this.firstName + '' + val
}
}
});
//当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch,事实上computed更好
//上面代码是命令式且重复的。将它与计算属性的版本进行比较：
//好得多了，不是吗？
var vm4 = new Vue({
el:"#example-2-2",
data:{
firstName:"first~1-2",
lastName:"last~1-2"
},
computed:{
fullName:function(){
return this.firstName + ' , ' +this.lastName;
}
}
});
//计算属性的setter
//计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
// computed: {
// fullName: {
// // getter
// get: function () {
// return this.firstName + ' ' + this.lastName
// },
// // setter
// set: function (newValue) {
// var names = newValue.split(' ')
// this.firstName = names[0]
// this.lastName = names[names.length - 1]
// }
// }
// }
</script>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#example-3',
data: {
question: '',
answer: '我不能给予你答案,直到你提出问题之前!'
},
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion) {
this.answer = '等待停止输入...'
this.getAnswer()
}
},
methods: {
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
// 请参考：https://lodash.com/docs#debounce
getAnswer: _.debounce(
function () {
if (this.question.indexOf('?') === -1) {
this.answer = '问题通常都带有问号. ;-)'
return
}
this.answer = '思考中...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = '错误无法获取API. ' + error
})
},
// 这是我们为判定用户停止输入等待的毫秒数
500
)
}
})
</script>
</body>
</html>
网友评论