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/

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容

  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,202评论 0 25
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,204评论 0 6
  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 5,598评论 0 32
  • 应用复杂度VS框架复杂度 渐进式框架 1、声明式渲染Declarative Rendering2、组件系统Comp...
    zwb_jianshu阅读 795评论 0 0
  • 应用复杂度VS框架复杂度 渐进式框架 1、声明式渲染Declarative Rendering2、组件系统Comp...
    木子川页心阅读 1,564评论 1 27