Vue全家桶之Vue基础（持续更新中）
1.Vue基础语法
1.1 Vue概述
1.1.1Vue是什么？
用于构建用户界面的渐进式框架
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
vue 的核心库只关注视图层
1.1.2Vue有哪些优点？
易用、灵活、高效 简单易上手
1.2 vue基本使用
1.2.1如何利用Vue将hello world 渲染到页面上？
1、需要提供标签用于填充数据 注意： 在标签中我们使用插值语法的形式 即 {{}} 进行填充数据
2、引入vue.js库文件 注意：一定要先引入Vue文件 在使用Vue语法 因为存在作用域的问题
3、使用vue的语法做功能： new Vue() 创建一个Vue的实例 ，在构造函数中以对象的形式做一些配置
4、利用Vue将数据渲染到页面上，数据写在data 里面
1.2.2 Hello Vue之细节分析
1.3 Vue模板语法
1.3.1 如何理解前端渲染？
把数据填充到HTML标签中：模板 + 数据 →前端渲染→静态HTML内容
1.3.2 把字符串渲染到页面上有哪些方式？
1.利用原生js拼接字符串 （代码差异大，维护困难）
2.利用模板引擎拼接 （基于模板引擎art-template，没有专门提供事件机制）
3.利用Vue插值语法
4.文档碎片 document.createDocumentFragment
5.利用es6 `` 反引号拼接字符串
1.3.3 什么是指令？
指令的本质就是自定义属性，格式以v-开始
1.3.4 为什么会有闪烁问题？
代码加载的时候先加载HTML 把插值语法当做HTML内容加载到页面上 当加载完js后才把插值语法替换掉 所以我们会看到闪烁问题
解决插值语法闪烁问题：使用v-cloak
1.3.5 数据绑定指令
1.3.6 数据响应式
1.3.7 双向数据绑定（v-model）
① m model :数据层Vue中数据层都放在data里面
② v view 视图 :Vue中view即我们的HTML页面
③ vm （view-model） 控制器 将数据和视图层建立联系 :vm即Vue的实例
4.v-model的低层实现原理分析
v-bind绑定属性值，v-on处理值变化这个事件 <input v-bind:value="msg" v-on:input="msg=$event.target.value">
第一种方案 ：
通过 v-on监听输入框的输入事件 将输入的值通过事件处理函数存到data中 给输入框通过v-bind 绑定属性 value 把数据渲染到页面上
第二种方案 ：
通过 v-on监听输入框的输入事件 通过事件对象$event 拿到输入的值 直接存储到data中 给输入框通过v-bind 绑定属性 value 把数据渲染到页面上
1.3.8 事件绑定
2.事件函数的调用方式
① 直接绑定函数名称调用 <button v-on:click='handle1'>点击1</button>
② 调用函数的形式 <button v-on:click='handle1()'>点击1</button>
如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数。如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递， 并且事件对象的名称必须是$event
3.事件修饰符
4.按键修饰符
5.自定义按键修饰符别名
在Vue中可以通过 config.keyCodes 自定义按键修饰符别名 ，如 Vue.config.keyCodes.f1 = 112
1.3.9 属性绑定
1.Vue中动态处理属性：v-bind 指令被用来响应地更新 HTML 属性 ，v-bind:href 可以缩写为 :href
注意：v-bind 和 v-on的区别 v-bind 绑定属性 v-on 绑定事件
2.绑定对象 ：通过v-bind:class = { 键： 值 } 键 代表一个类名，如果这个值为true表示显示这个类名，如果这个值为false表示不显示这个类
注意：v-bind:class指令可以与普通的class特性共存
3.绑定数组：通过v-bind:class =[ 值1，值2 ] 值1、值2 对应 data 中的 数据
1.3.10 分支循环结构
1.分支结构⚫ v-if
1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
⚫ v-else
⚫ v-else-if
⚫ v-show
⚫ v-if控制元素是否渲染到页面：v-if是动态的向DOM树内添加或者删除DOM元素
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
⚫ v-show控制元素是否显示（已经渲染到了页面）：v-show本质就是标签display设置为none，控制隐藏
v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点
3.循环结构
1.4 Vue常用特性
⚫ 表单操作
⚫ 自定义指令
⚫ 计算属性
⚫ 侦听器
⚫ 过滤器
⚫ 生命周期
1.4.1 表单操作
2.获取复选框中的值（通过v-model）：和获取单选框中的值一样 ，复选框 checkbox 这种的组合时 data 中的 hobby 我们要定义成数组 否则无法实现多选
3.获取下拉框和文本框中的值（通过v-model）
4.表单域修饰符
1.4.2自定义指令
1.4.3 计算属性 computed
1.4.4 侦听器 watch
1.4.5过滤器
作用：格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等
Vue.filter(‘过滤器名称’, function(value){
// 过滤器业务逻辑
})
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div v-bind:id=“id | formatId"></div>
filters:{
capitalize: function(){}
}
Vue.filter(‘format’, function(value, arg1){
// value就是过滤器传递过来的参数
})
<div>{{date | format(‘yyyy-MM-dd')}}</div>
1.4.6 生命周期
4.Vue实例的产生过程
① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
② created 在实例创建完成后被立即调用。
③ beforeMount 在挂载开始之前被调用。
④ mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
⑤ beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。
⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
⑦ beforeDestroy 实例销毁之前调用。
⑧ destroyed 实例销毁后调用。
1.4.7 数组变异方法
1.4.8 替换数组
不会改变原始数组，但总是返回一个新数组
变异方法和替换数组有什么区别 ：变异的方法能够实现数据更新视图自动更新 替换数组 不会修改原始数据 导致 数据改变 视图不一定更新
1.4.9 动态处理响应式数据
⚫Vue.set(vm.items, indexOfItem, newValue)
⚫ vm.$set(vm.items, indexOfItem, newValue)
① 参数一表示要处理的数组名称
② 参数二表示要处理的数组的索引
③ 参数三表示要处理的数组的值