Vue基础1——简介，初识

1.1Vue官网简介

英文官网：Vue.js - The Progressive JavaScript Framework | Vue.js

中文官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

1.2什么是vue？

Vue是一套用于构建用户界面的渐进式javascript框架。

构建用户界面：把数据通过某种办法变为用户看到的界面。

渐进式:Vue可以自底向上逐层的应用，简单应用只需轻量小巧的核心库，复杂应用则可以引用Vue插件。

1.3谁开发的？

前谷歌，现阿里：尤雨溪

1.3Vue的特点

（1）组件化编码。组件（Component）是 Vue.js 最强大的功能之一。提高代码复用，维护更好。（一个.vue文件就可包含html，css，js。）

（2）声明式编码。无需直接操作DOM，提高开发效率。

（3）使用虚拟DOM和优秀的Diff算法，尽量复用DOM节点。

（4）轻量级的框架。提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，使读者更加容易理解，能够更快上手。
（5）双向数据绑定。声明式渲染是数据双向绑定的主要体现，同样也是 Vue.js 的核心，它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。

（6）遵循MVVM模式。

1.4与同样优秀的框架关联。

1.借用了angular的模板和数据绑定技术。

2.借用了react的组件式和声明式编码，虚拟DOM和优秀的Diff算法。

1.5初识Vue

前置工作：引入Vue包，给浏览器安装Vue Devtools。

• 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
• demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
• demo容器里的代码被称为【Vue模板】
• Vue实例和容器是一一对应的
• 真实开发中只有一个Vue实例，并且会配合着组件一起使用
• {{xxx}}是Vue的语法：插值表达式，{{xxx}}可以读取到data中的所有属性
• 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新(Vue实现的响应式)

<!-- 准备好一个容器 -->
<div id="demo">
	<h1>Hello，{{name}}</h1>
</div>

<script type="text/javascript" >
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	//创建Vue实例
	new Vue({
		el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
		data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
			name:'hello,Vue',
		}
	});
</script>

1.6常用周边库