初识Vue

一、Vue.js简介

1.Vue框架
概念:
Vue[读音/vju:/,类似view]是一种用于构建用户界面的渐进式前端框架.
特点:
1.Vue可以被自底向上应用
2.Vue的核心库只关注视图层[MVC中的V]: 解耦视图和数据
3.Vue提供大量可复用的组件: 自定义组件,路由等

官网:
https://cn.vuejs.org/
https://cn.vuejs.org/v2/guide/
2.MVVM模式
MVVM分为: Model层[前端数据],ViewModel层[调度者],View层[前端视图区域]
Model: 负责数据存储
View: 负责页面展示
ViewModel: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

特点:
低耦合
视图（View）可以独立于Model变化和修改，当View变化时Model可以不变，当Model变化时View也可以不变
可重用性
可以把一些视图逻辑放在一个ViewModel里面，让多个View重用这段视图逻辑代码
独立开发
开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计
3.插值表达式
介绍:
插值表达式是使用双大括号来包裹 js 代码构成插值表达式，用于将双大括号中的数据替换成对应属性值进行展示.
格式:
{{表达式或字面值或运算符}}

---

二、Vue.js指令
介绍:
Vue指令是一种带有v-前缀的属性,用于编写在任意HTML标签[包括自定义组件标签]的开始标签中.
格式:
<标签名 v-指令名1=“值” v-指令名2=“值”>标签内容</标签名>

v-if指令:
作用: v-if指令能够根据表达式的真假 来 插入或删除 元素[标签]
格式: <标签名 v-if=“布尔表达式”>内容</标签名>

v-else指令:
作用: v-else指令为v-if指令添加“else块”，v-else元素必须立即跟在v-if元素的后面
格式: <标签名 v-else>内容</标签名>

v-show指令:
作用: v-show指令控制切换一个元素的显示和隐藏
格式: <标签名 v-show=“布尔表达式”>内容</标签名>

v-if与v-show的区别

v-on指令:
作用: v-on指令为HTML元素绑定事件监听
格式: <标签名 v-on:事件名=“函数名或函数名()”>内容</标签名>
简写形式 @事件名称 =“函数名或函数名()”

v-bind指令:
作用: v-bind指令用于绑定HTML元素的属性,将指定数据赋给该属性.[使用Vue向属性提供属性值,实现Vue管理这些属性]
格式: <标签名 v-bind:属性名=“字面值或表达式”>内容</标签名>
简写形式 :属性名 ="'字面值’或表达式"

v-model指令:
作用: v-model指令用于实现 表单标签与模型[model]数据 的双向数据绑定
格式: <标签名 v-model=“变量”>内容</标签名>

v-for指令:
作用: v-for指令用于遍历data中的数据，并在页面进行数据展示
格式:
<标签名 v-for=“变量A in 整数”>内容</标签名>
<标签名 v-for="(元素变量,索引变量) in 数组">内容</标签名>
<标签名 v-for="(属性值变量,属性名变量) in 对象">内容</标签名>

---

三、Vue.js过滤器
过滤器是指在{{}}插值或v-bind值的尾部添加一个管道符“（|）”对数据进行过滤. 过滤器常用于格式化文本，比如字母的大写、货币的千位使用、逗号分隔等.
格式:

	{{原数据|过滤器名字(参2的值)}}
	var vm=new Vue({
		el:"#app",
		省略...,
		filters:{
			过滤器名字:function(参1,参2){//参1: 始终为被处理的原始数据,不需要直接传参,由Vue自动传入.
				return 处理后的数据;
			}
		}
	})

---

四、Axios库

---

五、生命周期
生命周期和生命周期函数:
“生命周期”指实例对象从构造函数开始执行（被创建）到被GC（Garbage Collection）回收销毁的整个存在的时期
生命周期函数是为了在实例对象的各个阶段方便开发者控制而产生，在不同的时期有不同的生命周期函数，可以利用不同时期的生命周期函数去完成不同的操作.