Vue学习日记（二）v-bind v-model computed watch

知识点一 ：v-bind动态绑定特性，缩写为：

可以使用：来绑定标题，标题的具体内容写在data中。

知识点二：v-model表单控件的双向绑定。

表单控件中是什么内容，那么它的内容会相应的显示到下边的那个div中。

<div id="root">
	<div :title="title">hello world</div>
	<input v-model="content"/>
	<div>{{content}}</div>
</div>

	<script>
		new Vue({
			el:"#root",
			data: {
				title:"这里标题",
				content:"this is the content"

			}
		})

	</script>

知识点三 计算监听属性

实例中可以使用computed来计算属性的值，使用watch来监听属性的变化。

<div id="root">
		姓：<input v-model="firstName"/>
		名：<input v-model="lastName"/>
		<div>{{fullName}}</div>
		<div >{{count}}</div>
	</div>

new Vue({
			el:"#root",
			data:{
				firstName:'',
				lastName:'',
				count:0
			},
			computed: {
				fullName: function(){
					return this.firstName + ' ' + this.lastName
				}
			},
			watch: {
				fullName:function(){
					this.count++
				}
			}
			
		})