vue全家桶-vue（一）

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

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

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

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

下面说一下它的基本结构

    {{...}}

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

看一下它的语法

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

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

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

	百度

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

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

	点击

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

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

		
{{ name.name }}

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">
		
A
		
B
		
C

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

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

	
	
同步数据：{{ message }}

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

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

	
{{demo}}

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

v-show

	
Hi

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