vue由浅入深

1.初始vue

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

渐进式:vue可以自底向上逐层的应用。简单应用：只需要一个轻量小巧的核心库。复杂应用:

可以引入各式各样的vue插件。

1.1 vue 特点

采用组件化模式，提高代码复用率，且让代码更好维护。

声明式编码，让编码人员无需直接操作dom，提高开发效率。

使用虚拟DOM+优秀的DIff算法，尽量复用DOM节点。

虚拟dom 内存中的dom。

网站:http://cn.vuejs.org

网站awesome-vue，提供了一些功能三方库

安装:直接用<script>引入，有两个版本：开发版本和生产版本。开发版本包含完整的警告和调试模式，生产版本删除了警告

安装vue devtools

vue.config全局配置， productionTip

<div id="#root">

{{name}}

</div>

new Vue（{

el:"#root"，// 用于指定当前vue实例为那个容器服务,值通常为css选择器字符串

data:{

name:'ccc',

age:18

} //data用于存储数据，数据供el所指定的容器去使用，值暂时写一个对象

}）；

{{js表达式}}，为插值语法

js表达式会生成一个值，可以放在任何需要值的地方

2.语法

2.1 模板语法

插值语法，使用{{js表达式}}；用于解析标签体内容

指令语法:用于解析标签(包括标签属性，标签体内容，绑定事件...)

<div id="root">
			<h1>hello,{{name}},{{age}}</h1>
			<a v-bind:href="url">百度</a>
		</div>
		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
           const x=  new Vue({
				el:'#root',
				data:{
					name:'tom毛',
					age:18,
					url:"http://www.baidu.com"
				}
			});
		</script>
注意:v-bind 可以简写为 :

v-bind单向绑定，数据只能从data流向页面

v-model双向绑定，数据不仅能从data流向页面，还可以从页面流向data，只能应用在表单类元素（输入元素）上。v-model:value可以简写为v-model

输出vue实例，

所有带$符号的都是给开发人员使用的。

el的两种写法：

<div id="root">
			<h1>hello,{{name}},{{age}}</h1>
			<a v-bind:href="url">百度</a>
		</div>
		<div id="root2">
			<h1>挂载hello,{{name}},{{age}}</h1>
			
		</div>
		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
           const x=  new Vue({
				el:'#root',
				data:{
					name:'tom',
					age:18,
					url:"http://www.baidu.com"
				}
			});

			const x1=  new Vue({
				data:{
					name:'挂载',
					age:18,
					url:"http://www.baidu.com"
				}
			});
			x1.$mount("#root2");
		</script>

 data的2中写法:

对象式，函数式

如何选择，目前哪种写法都行，以后学习到组件，data必须用函数式，否则会报错

一个重要的原则：由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数this就不再是vue了。        

2.2MVVM模型

M:模型 ：对应data中的数据

V:视图：模板

VM：视图模型，VUE实例对象

data中的所有数据，最后都出现在了vm身上。

vm身上所有的属性及vue原型上所有属性，在vue模板中都可以直接使用。

2.3数据代理

ES5中作用域有:全局作用域、函数作用域。

ES6中新增了块作用域，块作用域由{}包括，if语句和for语句里面的{}也属于块作用域。

var定义的变量，没有块作用域的概念，可以跨块访问；

let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。

const用来定义常量，使用时必须初始化，只能在块作用域里访问，且不仅能修改。