vue总结

Vue 的特点
1）遵循 MVVM 模式

2）编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库
开发项目
use strict的作用
必须使用var声明变量
禁止自定义的函数中的this指向Window
创建eval作用域
对象不能有重名的属性。

箭头函数的this特点？
箭头函数没有自己的this，函数箭头的this不是调用的时候决定的，而是在定义的时候所处的对象就是它的this.

promise的三个状态
pending初始状态
fullfilled成功状态，需要调用resolve方法
rejected失败状态，需要调用reject方法

论述class关键字的作用？
通过class定义类，实现类的继承
在类中通过constructor定义构造方法
new来创建类的实例
extends来实现类的继承
super调用父类的构造方法
重写从父类中继承的一般方法

mvv框架是什么，它和其他框架（jquery）的区别是什么，那些场合适合？

一个model+view+viewModel框架，数据模型model和视图view是由viewModel连接起来的，vm层专门负责dom监听和数据绑定。
区别：vue是数据驱动，通过数据显示视图层而不是节点操作

image.png

常用内置指令
1）v-text : 更新元素的 textContent

2）v-html : 更新元素的 innerHTML

3）v-if : 如果为 true, 当前标签才会输出到页面

4）v-else: 如果为 false, 当前标签才会输出到页面

5）v-show : 通过控制 display 样式来控制显示/隐藏

6）v-for : 遍历数组/对象

7）v-on : 绑定事件监听, 一般简写为@

8）v-bind : 强制绑定解析表达式, 可以省略 v-bind 简写为:

9）v-model : 双向数据绑定

10）ref : 指定唯一标识, vue 对象通过$refs 属性访问这个元素对象

11）v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

image.png

vue 动画的理解

image.png

生命周期实例
首先创建一个实例new Vue();

然后是beforeCreate(){}

在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。

created(){}

在created阶段，vue实例的数据对象data有了，$el还没有。

beforeMount(){}

在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。

mounted(){}

在mounted阶段，vue实例挂载完成，data.message成功渲染。

beforeUpdate(){},updated(){}

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

这个时候如果数据是多个的话，建议用nextTick(()=>{})来逐个根据数据变化来更新dom。如果用updated的话，多个数值变化可能导致死循环。

beforeDestroy(){},destroyed(){}

在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

axios的使用
请求后台资源，使用npm install axios --save命令安装好，
js中使用时先导入import ，然后调用.get或post发送请求，如果成功返回在.then函数中，失败在。catch函数中

vue-router是什么,有什么组件？
时vue用来写路由的一个插件
组件router-link相当于超链接，to属性相当于href属性，最终会被解释为超连接。
router-view用于加载路由对应的组件，显示模板内容

父组件如何传递子组件？
父组件使用子组件标签时，通过绑定自定义属性传值<my-component:xxx='" xxx></my-omponent>
在子组件内声明props来接收。

子组件如何传递父组件？
可以利用vue的自定义事件来传递数据，首先在父组件使用子组件标签时，绑定xxx事件，并传递数据data。
this.$emit(xxx,data)

创建 vue 项目
vue -V 显示版本2时

npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev
访问: http://localhost:8080/

vue -V 显示版本3时

npm install -g @vue/cli
vue create vue_demo
cd vue_demo
npm install
npm run dev
访问: http://localhost:8080/