vue笔记01

vue组件的重要选项 data、methods、watch
data：vue对象的数据
methods代表vue对象的方法
watch:设置了对象监听的方法

new Vue({
	data: {
		a: 1,
		b: []
	},
	methods: {
		doSomething: function () {
			this.a++
		}
	},
	watch: {
		'a': function (val,oldVal) {
			console.log(val,oldVal)
		}
	}
})

模版指令
1.数据渲染：v-text、v-html、{{}}

<p>{{a}}</p>
<p v-text="a"></p>
<p v-html="a"></p>

2.控制模块隐藏：v-if、v-show
v-show通过css中display来控制

<p v-if="isShow"></p>
<p v-show="isShow"></p>

new Vue({
	data: {
		isshow: true
	}
})

3.渲染循环列表：v-for

<ol>
	<li v-for="item in items">
		{{item.text}}
	</li>
</ol>

data: {
	items: [
		{
			text: 'a'
		},
		{
			text: 'b'
		}
	]
}

4.事件绑定：v-on
@是简写

<button v-on:click="doThis"></button>
<button @click="doThis"></button>
methods: {
	dothis: function() {
		console.log(1)
	}
}

5.属性绑定：v-bind
:是简写

<img v-bind:src="imageSrc">
<div :class="{red:isRed}"></div>
<div :class="[classA,classB]"></div>
<div :class="[classA,{ClassB:isB,classC:isC}]"></div>