/*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin-bottom: 20px;
}
</style>
<script src="js/vue.js"></script>
<script src="js/jquery-1.12.3.min.js"></script>
</head>
<body>
<div id="example">
<p>Original message:"{{message}}"</p>
<p>Original reeversed message:"{{reversedMessage}}"</p>
</div>
<div id="demo">
{{fullName}}
</div>
<div id="demo2">
{{fullName}}
</div>
<div id="demo3">
<p>
问一个是否的问题
<input v-model="question">
</p>
<p>{{answer}}</p>
</div>
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var vm = new Vue({
el:'#example',
data:{
message:'Hello'
},
computed:{
//a computed getter
reversedMessage:function () {
//这指向VM实例
return this.message.split('').reverse().join('');
}
}
})
/*
* 这里我们声明了一个计算属性 reversedMessage 。我们提供的函数将用作属性 vm.reversedMessage 的 getter 。
console.log(vm.reversedMessage) // -> 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // -> 'eybdooG'
你可以打开浏览器的控制台，修改 vm 。 vm.reversedMessage 的值始终取决于 vm.message 的值。
你可以像绑定普通属性一样在模板中绑定计算属性。 Vue 知道 vm.reversedMessage 依赖于 vm.message ，
因此当 vm.message 发生改变时，依赖于 vm.reversedMessage 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系：
计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。
* */
/*var demo = 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
}
}
})*/
var demo = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
/*
下边的更好一些
* Vue.js 提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动。
* 当一些数据需要根据其它数据变化时， $watch 很诱人 —— 特别是如果你来自 AngularJS
* 。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。思考下面例子：
*
*
* */
var demo2 = new Vue({
el: '#demo2',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
debugger
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
})
var demo3=new Vue({
el:'#demo3',
data:{
question:'',
answer:'我在你问问题之前不能回答你'
},
watch:{
//如果question发生改变，这个函数就会运行
question:function (newQuestion) {
this.answer='我在等你停止打字...'
this.getAnswer()
}
},
methods:{
// _.debounce 是一个通过 lodash 限制操作频率的函数。
// 在这个例子中，我们希望限制访问yesno.wtf/api的频率
// ajax请求直到用户输入完毕才会发出
// 学习更多关于 _.debounce function (and its cousin
// _.throttle), 参考: https://lodash.com/docs#debounce
// 在这个示例中，使用 watch 选项允许我们执行异步操作（访问一个 API），
// 限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。
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>
*/