<!-- watch侦听属性，computed计算属性，绑定class，绑定style -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<!-- watch侦听属性，虽灵活，但容易出错 -->
<div id="app">
<span >Message: {{ fullName }}</span>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
// 不推荐下面的写法,使用下面app2中的计算属性更合适
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
},
// 使用watch要注意不要循环依赖，否则容易造成无限循环，如下
// fullName:function(val){
// console.log("fullName")
// var names = val.split(' ')
// this.lastName = names[0]
// this.firstName = names[names.length - 1]
// }
}
})
</script>
<!-- computed计算属性，默认只有get方法,当get方法中的属性变动后，自动渲染自身的值 -->
<div id="app-2">
<span >Message: {{ fullName }}</span>
</div>
<script type="text/javascript">
var app2 = new Vue({
el: '#app-2',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
<!-- computed监听属性的set与get方法。注意在set方法中，不要再对自己的属性赋值，否则会循环调用set方法，内存溢出 -->
<div id="app-3">
<span>{{firstName}}</span>
<span>{{lastName}}</span>
<span>{{fullName}}</span>
</div>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
firstName: 'Foo',
lastName: 'Bar',
// fullName: 'Foo Bar'
},
computed: {
fullName: {
get: function () {
console.log('get')
return this.firstName + ' ' + this.lastName
},
set: function (newValue) {
var names = newValue.split(',')
this.firstName = names[0]
this.lastName = names[names.length - 1]
console.log('set')
// this.fullName = 'set a new value'; //这句话会导致无限循环
}
}
}
})
</script>
<!-- vue绑定标签的class属性 -->
<div id="app-4">
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<div class="static" v-bind:class="classObject"></div><!-- 绑定的数据对象不必内联定义在模板里 -->
<div v-bind:class="[activeClass, errorClass]"></div><!-- 这里数组的元素可以用三元表达式或者第一种对象格式替代 -->
</div>
<script type="text/javascript">
var app4 = new Vue({
el: '#app-4',
data: {
isActive: true,
hasError: false,
classObject: {
active: true,
'text-danger': true //改变包含特殊字符-.等时，使用app3.classObject['text-danger']=false格式修改
// classObject可以通过下面的方式表达为计算属性
// return {
// active: this.isActive && !this.error,
// 'text-danger': this.error && this.error.type === 'fatal'
// }
},
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
<!-- 当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面 -->
<div id="app-5">
<my-component></my-component>
<my-component class="new"></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
var app5 = new Vue({
el: '#app-5'
})
</script>
<!-- 绑定内联样式,常常结合返回对象的计算属性使用 -->
<!-- 样式的属性名包含中要使用单引号括起来。样式中，vue的属性不能包含中划线 -->
<div id="app-6">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px',margin-left: marginLeft + 'px' }">css</div>
<div v-bind:style="styleObject">css</div>
</div>
<script type="text/javascript">
var app6 = new Vue({
el: '#app-6',
data: {
activeColor: 'red',
fontSize: 30,
marginLeft:20,
styleObject: {
color: 'red',
fontSize: '13px'
}
}
})
</script>
</body>
</html>
