Vue.js学习第一周

1 什么是Vue.js

官方文档中的定义： 渐进式技术栈，足以应付任何规模的应用。
2014年开始，由尤雨溪（参考：https://www.cnblogs.com/imnzq/p/6959802.html ）开始开发的开源框架。

值得一提的是2016年Vue2.0发布，改动非常大。

1.1 MVVM模式

参考：https://blog.csdn.net/qq_36228442/article/details/79470408

由MVC模式衍生而来架构。

• Model：与业务逻辑相关的数据对象
• View：展示给用户看的视图界面
• ViewModel：与界面对应的数据对象，将model对象封装成可以显示和接受输入的界面数据

MVC 模式

• Controller:响应View的事件，调用Model接口对数据进行操作

区别：MVVM实现了view和model的自动同步，当model中的属性改变时，对应的View会自动改变

MVVM架构拆分视图与数据，开发人员只需关心数据，视图变化会由框架处理。数据通过双向绑定自动改变页面状态，尤雨溪用es5的defineProperty来实现的双向数据binding，拦截了对象的set和get方法（参考：https://www.cnblogs.com/dh-dh/p/5606596.html）

1.2 其他类似的框架

1.2.1 AngularJS

参考：https://www.cnblogs.com/summer7310/p/6394379.html
AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。托管在github上的开源框架。实现的功能与Vue类似，但是双向数据绑定的实现方法与Vue不同。值得注意的是当数据变化十分频繁时，脏检测对浏览器性能的消耗将会很大，官方注明的最大检测脏值为2000个数据。

angular.js ：脏值检查
angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，当然Google不会这么low，angular只有在指定的事件触发时进入脏值检测，大致如下：

• DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
• XHR响应事件 ( $http )
• 浏览器Location变更事件 ( $location )
• Timer事件( $timeout , $interval )
• 执行 $digest() 或 $apply()

vue ：数据劫持
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

2 如何使用Vue.js

2.1 直接引入到html页面中

直接在静态页面中引入Vue的js文件
<script src="https://unpkg.com/vue/dist/vue.min.js" >
<script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js" >

2.2 使用vue-cli脚手架创建webpack结构的项目

参考：https://blog.csdn.net/gqzydh/article/details/80912889

• 1 创建项目
  vue init webpack 项目名
• 2 在src目录下编写业务代码
• 3 在build目录下修改webpack的初始化配置
  config目录下修改配置，配置项目初始化、端口号等
• 4 启动项目
  npm run dev

3 基础语法

3.1 实例

<div id='app'></div>

var app = new Vue({
	el: '#app' //或者document.getElementById('app')
})

3.2 生命周期

下图是官方文档里面生命周期的流程图，每个生命周期都有对应的钩子函数，可以按需要在对应的钩子函数中添加自己的业务代码

3.3 插值

3.3.1 页面插入数据

双大括号（Mustache语法），在页面中显示数据

<div id="app">
	{{ value}}
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			value:'插入文本'
		}
	});
</script>

使用v-html指令插入html格式的文本，里面如果有html标签会被识别为对应的dom元素并替换该指令内部的子元素。如果定义了v-html，那么这个标签里就不要写文本或者子标签了。

<div id="app" v-html="value">
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			value:'插入文本'
		}
	});
</script>

3.4 过滤器

在双括号插值的尾部，可以添加一个“ | ”调用对应的过滤器方法，从而对数据进行过滤。一般用来进行数据格式化操作。

<div id="app">
	{{ value | formatNum}}
	{{ value | formatNum(2)}} 
		<!--  底下过滤器方法的参数第一个是插入的数据，
	 这里的参数2实际上对应底下过滤器里面第二个参数  -->
	{{value | formatNum| formatNum（2）}}
	<!-- 多个filter联用 -->
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			value:'插入文本'
		},
		filters:{
			formatNum : function(value,fixedUnit=2){
				return value.fixed(fixedUnit);
			}
		}
	});
</script>

3.5 指令

v-if 判断元素是否生成
v-show 判断元素是否显示（display:null或者display:block）
v-bind 更新html元素的属性，id、class、style等。可以使用语法糖“ : ”来替换v-bind指令。如下：

	<div v-bind:id="value"></div>
	<!-- 下同 -->
	<div :id="value"></div>

v-on 绑定事件监听器，用于调用定义在methods中的方法进行交互操作。可以使用语法糖“@ ”来替换v-on指令。

	<div v-on:click="test()"></div>
	<!-- 下同 -->
	<div @click="test()"></div>