vue总结

2019-07-07  本文已影响0人  我的好昵称

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/

上一篇下一篇

猜你喜欢

热点阅读