这段时间，回忆一下vue全家桶的相关知识，布局也不会放下，争取每天整理几个。

说vue离不开vue的生命周期，不过这一篇里面不写，放在下一篇吧。

首先说说vue是什么，不用想，它是js库，按官网上说的，它是构建用户界面的渐进式框架。它比较简单，容易上手。基本上一两天就可以看完官方文档，能去做点小的实例了。

安装我们就不说了，不会的同学可以去百度一下了。

下面说一下它的基本结构

<div id="app">
    {{...}}
</div>

var vm = new Vue({
			el:"#app",
			data: {}
			//一些选项，如methods、created、computed等
           })

看一下它的语法

v-html：输出html代码，但是v-html不能乱用，只能在确定这个内容十分安全的时候才能使用，随意渲染是会导致XSS攻击。

<div id="app">
	<div v-html='demo'></div>
</div>

var vm = new Vue({
	el:"#app",
	data: {
	    demo: '<p>这是demo</p>'
		}
	})

v-bind，可以缩写为":"，如v-bind:href，缩写成 ：href

<div id="app">
	<a :href="url">百度</a>
</div>

var vm = new Vue({
	el:"#app",
	data: {
		url:'https://baidu.com'
		}
	})

v-on，可以缩写为"@",如 v-on:click，缩写成 @click。

<div id="app">
	<button @click='getname'>点击</button>
</div>

var vm = new Vue({
	el:"#app",
	methods: {
		getname: function(){
			alert('佳小凡')
		}
	}
})

v-for, 在同一节点下执行优于v-if

<div id="app">
		<div v-for='name in obj'>{{ name.name }}</div>
</div>

var vm = new Vue({
	el:"#app",
	data: {
		obj: [
			{ name: 'jiafan' },
			{ name: 'buff' }
		]
		}
	})

v-if、v-else-if、v-else：if和else很好理解，else-if就是如果，那就的意思，和java中 else if{ }功能一样

div id="app">
		<div v-if="letter === 'A'">A</div>
		<div v-if-else="letter === 'B'">B</div>
		<div v-else>C</div>
</div>

var vm = new Vue({
		el:"#app",
		data: {
			letter : 'B'
		}
	})

v-model：用来创建数据的双向绑定

<div id="app">
	<input type="text" v-model='message' placeholder='填写'/>
	<p>同步数据：{{ message }}</p>
</div>

var vm = new Vue({
	el:"#app",
	data: {
		message: ''
		}
	})

v-once：一次性的插值，不会改变

<div id="app">
	<div v-once>{{demo}}</div>
</div>

var vm = new Vue({
	el:"#app",
	data: {
		demo: 'once-demo'
		}
	})

v-show

<div id="app">
	<div v-show='hai'>Hi</div>
</div>

var vm = new Vue({
	el:"#app",
	data: {
		hai: true
	    }
	})