Vue基础

1.Vue简介

定义：一套用构建于用户界面的渐进式JavaScript 框架 vue可以自底向上逐层的应用

声明式渲染：需要声明在哪里需要做什么，不关心具体实现       相当于无人驾驶，输入指令就好了

命令式渲染：需要具体代码，实现具体的过程          相当于手动挡，需要具体操作

渐进式：Vue核心 是一个视图模板引擎，通过添加组件系统，客户端路由器，大规模状态管理来构建一个完整的框架，这些功能相互独立，不一定要全部用在一起，用什么拿什么，所说“渐进式”其实就是vue的使用方式

自底向上：一切由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能

优点：

1.遵循MVVM模式   

M:模型(数据)    V: viem视图(界面)    VM:桥梁(vue的实例)

2.编码整洁，体积小，运行效率高，适合移动/pc端开发

3.它本身只关注 UI 也可以引入其他第三方库开发项目

2.Vue语法

2.1 插值语法

概念：双大括号形式，用于解析标签体内容：{{msg}} msg为表达式

举例：

		<div id="root">
			{{hello}}
		</div>  
		<script src="vue.js"></script>
		<script type="text/javascript">
			// Vue.config.productionTip = false;
			new Vue({
				el:"#root",
				data:{
					hello:"hello,vue!",
				}
			});
		</script>

2.2指令语法

概念：vue 中有很多指令，他们用于解析标签属性，解析标签体内容，绑定事件以 v- 开头

举例：v-bind:href = "url"   url:表达式，具有返回值

可简写为  :href = "url"

<div id="root">
			{{hello}}
			<a :href="url" :title='title'>{{title}}</a>
		</div>  
		<script src="vue.js"></script>
		<script type="text/javascript">
			// Vue.config.productionTip = false;
			new Vue({
				el:"#root",
				data:{
					hello:"hello,vue!",
					title:'百度',
					url:'http://www.baidu.com',
				}
			});
		</script>