Vue学习框架
1 Vue
2 Vue框架
3 Vue问题
4 Vue生命周期
参考：
https://cn.vuejs.org/v2/guide/instance.html
5 Vue的五个属性
参考：
https://www.cnblogs.com/lyxzxp/p/11778579.html
http://www.ujiuye.com/wenda/2021/70919.html
笔记：
vuex的五个属性分别为：state、getters、 mutations、actions、modules。
state：单一状态树，用一个对象就包含了全部的应用层级状态。
getters：就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
mutations：每个mutation都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。
Action：Action 类似于mutation，不同在于：Action 提交的是mutation，而不是直接变更状态;Action可以包含任意异步操作。
modules：模块化vuex，每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
说明：
state：vuex的基本数据，用来存储变量。
getters：从基本数据（state）派生的数据，相当于state的计算属性。
mutation：提交更新数据的方法，必须是同步的（如果需要异步使用action）。每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。
回调函数就是我们实际进行状态更改的地方，并且它会接收state作为第一个参数，提交载荷作为第二个参数。
action：和mutation的功能大致相同，不同之处在于：1.Action提交的是mutation，而不是直接更改状态；2.Action可以包含任意异步操作。
modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理。
Vue
参考：https://cn.vuejs.org/v2/guide/installation.html
- vue.js介绍
渐进式JavaScript框架
- Vue.js优点
- 体积小
- 更高的运行效率
基于虚拟dom，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来病优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM。 - 双向数据绑定
让开发者不要再去操作dom独享，把更多的精力投入到业务逻辑上。 - 生态丰富，学习成本低
Vue.js 全段开发人员必修技能
被广泛的应用于web端，移动端，跨平台应用开发。
- 安装与部署
第一种安装方式（简单）：
直接下载并用
引入成功，会暴露一个全局的变量，Vue()
第二种引入方式：CDN方式
- 创建第一个vue应用
声明式渲染
Vue.js的核心是一个允许 采用简洁的模板语法来声明式地将数据渲染进DOM的系统。
Vue.js的应用分为两个重要的部分，一个是视图，一个是脚本。
视图部分，比如使用div标签来定义（指定一个id值），然后使用左右双大括号{{}}来声明变量。
脚本部分，使用script标签来定义，使用new Vuew() 来返回一个应用。
其中，el表示元素element，并使用id选择器（#号开头）来选中视图部分的div。
第二个为data，表示数据，用户保存数据。我们在视图中声明了哪些变量，就需要在data中进行注册并初始化赋值。
HBuilderX 预览：
- 数据与方法
Vue实例
创建一个Vue实例：
每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的：
var vm = new Vue({
//选项
})
当一个Vue实例被创建时，它将data对象中的所有属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
当这些数据改变时看，视图会进行重渲染。值得注意的是只有当实例被创建时data中存在的属性才是响应式的。
对变量使用Object.freeze()，这会阻止修改现有的属性，也意味着相应系统无法再追踪变化。
除了数据属性，Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀watch是一个实例方法，可以观察一个变量的变化，并且获取变化前/后的结果。
该方法第一个参数为需要观察的变量，第二个参数为一个回调，回调参数的参数分别为newVal和oldVal。
- 生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会晕习惯一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
比如 creatd钩子可以用来在一个实例被创建之后执行代码。
也有一些其他的钩子，在实例生命周期的不同阶段调用，如mounted、updated和destroyed，生命周期钩子的this上下文执行调用它的Vue实例。
注意：
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直到找到为止，经常导致Uncaught TypeError：Cannot read property of undefined 或 Uncaught TypeError：this.myMethod is not a function 之类的错误。
扩展：
点击官网上的学习，可以进入 选项/生命周期钩子，学习生命周期API介绍。
API：
beforeCreate 在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用。
created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 替换，挂载成功。
beforeUpdate 数据更新时调用
updated 组件DOM已经更新，组件更新完毕。
设置类似定时器或者延时函数方法：如下是在3秒之后更新msg变量的数据。
setTimeout(function(){
vm.msg = "change ...";
}, 3000);
注意：该方法执行时，会有beforeUpdate和updated两个回调。
其他API：
activated keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated keep-alive组件停用时调用。该钩子在服务器端渲染期间不被调用。
beforeDestroy 实例销毁之前调用，在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
destroyed Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
errorCaptured 2.5.0+新增。当捕获一个来自子组件的错误时调用。
- 模板语法-插值
模板语法：
Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。
在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。
如果你熟悉虚拟DOM并且偏爱JavaScript的原始力量，你也可以不用模板，直接写渲染（render）函数，使用可选的JSK语法。
插值：
文本：
数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值。
Mustache标签将会被替代为对应数据对象上msg属性的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。
通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。原始HTML
双大括号会将将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html指令。特性
Mustache语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令。
对于布尔特性（它们只要存在就意味着为true），v-bind工作起来略有不同。
如果isButtonDisabled的值是null、undefined或false，则disabled特性设置不会被包含在渲染出来的
v-bind:属性=""
- 使用JavaScript表达式
{{ number + 1}}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
{{ var a = 1}} //这是语句，不是表达式
{{if (ok) {return message} }} //流控制也不会生效，请使用三元表达式
注意：模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date，你不应该在模板表达式中试图访问用户定义的全局变量。
- 模板语法-指令
指令：
指令（Directives）是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式（v-for是例外情况）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
you see me now
这里，v-if指令将根据表达式 seen 的值的真假来插入/移除
元素。
- 参数：
一些指令能够接收一个“参数”，在指令名称之后以冒号表示，例如，v-bind指令可以用于响应式地更新HTML特性。
...
在这里 href 是参数，告知v-bind指令将该元素的 href 特性与表达式 url 的值绑定。
另一个例子是v-on指令，它用于监听DOM事件。
...
在这里参数是监听的事件名。
动态参数
修饰符
修饰符（modifier）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉v-on指令对于触发的事件调用 event.preventDefault()
- 缩写
v- 前缀作为一种视觉提示，用来识别模板中Vue特定的特性。当你在使用Vue.js为现有标签添加动态行为（dynamic behavior）时，v- 前缀很有帮助，然而，对于欧一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由Vue管理所有模板的单页面应用程序（SPA - single page application）时，v- 前缀也变得没有那么重要了。因此，Vue为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写。
简写格式：
- class与style绑定
class与style绑定：
操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind用于 class 和 style 时，Vue.js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
绑定HTML Class
- 对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换class。
上面的语法表示active这个class 存在与否将取决于数据属性isActive 的truthless。
你可以在对象中传入更多属性来动态切换多个class。此外， v-bind:class 指令也可以与普通的class 属性共存。当有如下模板：
和如下 data：
data: {
isActive: true,
hasError: false
}
结果渲染为：
当isActive或者hasError变化时，class列表将相应地更新。
特别注意：这里class对应的是CSS样式，需要在
其中：脚本区域
声明组件的名称/属性/方法/数据等