vue基础小知识

一、Vue.js介绍（官网https://cn.vuejs.org/）
Vue是一个前端js框架，由尤雨溪开发，是个人项目 目前由饿了么团队进行维护

Vue近几年来特别的受关注，三年前的时候angularJS霸占前端JS框架市场很长时间，接着react框架横空出世，因为它有一个特性是虚拟DOM，从性能上碾轧angularJS，这个时候，vue1.0悄悄的问世了，它的优雅，轻便也吸引了一部分用户，开始收到关注，16年中旬，VUE2.0问世，这个时候vue不管从性能上，还是从成本上都隐隐超过了react，火的一塌糊涂。

mvvm 双向数据绑定原理：

https://segmentfault.com/a/1190000016434836

Object.defineProperty(_data,“msg”,{get(),set()})

二、Vue-cli 脚手架
vue create 项目名

1.vue-cli2
build 项目构建(webpack)相关代码
config 配置目录，包括端口号等。也可以使用默认的。
node_modules npm 加载的项目依赖模块
src assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
package.json 项目配置文件。
.git git配置
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
README.md 项目的说明文档，markdown 格式
2.vue-cli3
三、Vue指令
v-model
双向数据流（绑定）

v-for
这是一个指令，只要有v-的就是指令（directive 操作dom）

在vue中可以通过v-for来循环数据的通知循环dom，语法是item in/of items，接收第二个参数是索引 (item,index) of items,还可以循环键值对，第一个参数是value，第二个是key，第三个依然是索引

v-on
在vue中还有v-on来为dom绑定事件，在v-on：后面加上要绑定的事件类型，值里可以执行一些简单javascript表达式：++ – = …

可以将一些方法设置在methods里，这样就可以在v-on:click的值里直接写方法名字可以，默认会在方法中传入事件对象，当写方法的时候加了()就可以传参，这个时候如果需要事件对象，那就主动传入$event

v-on绑定的事件可以是任意事件,v-on:可以缩写为@

v-cloak
给模板内的元素添加v-cloak属性后，元素在vue没有加载完的时候就有这个属性，当vue加载完成后这个属性就消失了，所以我们可以给这个属性设置css样式为隐藏

v-text v-html
v-text会指定将模板内元素的textContent属性替换为指令值所代表的数据v-html可以解析标签，更改元素的innerHTML，性能比v-text较差

v-if v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

四、Vue生命周期

五、Vuex状态管理工具(官网https://vuex.vuejs.org/zh/）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。