vue基础阶段知识总结

一、Web前端开发概述

1、什么是 Vue

官方给出的概念：Vue (读音/vjuː/，类似于 view) 是一套用户构建用户界面的前端框架

2、MVVM模式（Model-View-ViewModel）

可以把所有的图形化应用程序粗略地分为两部分：用户界面部分和内部逻辑部分。

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。

MVVM模式包括3个核心部分：

Model（模型）：由核心的业务逻辑产生的数据对象，例如从数据库取出并做特定处理后得到的数据。

View（模型）：即用户界面。

ViewModel（视图模型）：用于链接匹配模型和视图的专用模型。

Vue.js的特性包括以下两点：

(1)数据的双向绑定。

• 在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源

（2）数据驱动视图：

• 当页面数据发生变化时，页面会自动重新渲染
• 数据驱动视图是单向的数据绑定

3、命令行控制台

(1)dir：显示一个目录中的文件列表。

(2)cd：进入一个目录。

(3)md：创建一个目录。

4、CDN

内容分发网络：通过构建分布式的内容分发网络，用户可以就近获取所需内容，这样可以提高用户访问的响应速度和命中率。

二、Vue.js开发基础

1、Vue根实例

1、文本插值

2、方法属性 

使用模板字符串的另一个优点是，可以跨行，直接产生多行文本；而普通字符串不能跨行，如果要定义多行字符串，那么必须通过将多个单行字符串拼接才能获得 

3、属性绑定 

4、插入HTML片段 

2、生命周期 

vue从创建到销毁的整个过程就称为vue的生命周期
(1) vue的生命周期钩子是回调函数, 当创建组件实例的过程中会调用相应的钩子方法, 内部会对钩子进行处理, 将钩子函数维护成数组的形式
(2) 每个阶段都有两个生命周期的钩子函数

创建阶段—beforeCreate, created
挂载阶段—beforeMount, mounted
运行阶段—beforeUpdate, updated
销毁阶段—beforeDestroy, destroyed

beforeCreate()：这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它…

created(): 在实例创建之后调用，此时尚未开始DOM编译。

beforeMount()：这是遇到的第3个生命周期函数,表示 模板已经在内存中编辑完成,但是尚未把模板渲染(挂载)到页面中。在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串。就像{{text}}这样

mounted()：这是遇到的第四个生命周期函数,表示内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了。只要执行完这个生命周期,就表示整个vue实例已经初始化完毕了，此时，组件已经脱离了创建阶段，进入到了运行阶段。

beforeUpdate()：这时候表示,我们的界面还没有被更新[但数据已经被更新了页面中显示的数据，还是旧的，此时data数据是最新的。页面尚未和最新的数据保持同步

update() : 这一步执行的是 先根据data中最新的数据，在内存中重新渲染出一份最新的内存dom树,当最新的内存dom树被更新后,会把最新的内存DOM树重新渲染到真实的页面中去,这时候，就完成了数据data(model层)->view(视图层)的更新，页面和data数据已经保持同步了,都是最新的。

beforeDestory :当执行 beforeDestory 钩子函数的时候,Vue实例就已经从运行阶段,进入到销毁阶段, 当执行beforeDestroy的时候，实例身上所有的data和所有的methods以及过滤器、指令...都处于可用状态,此时,还没有真正执行销毁的过程。

destroyed :当执行这个函数的时候,组件已经被完全销毁了,此时，组件中所有的数据,方法，指令，过滤器...都已经不可用了

三、计算属性与侦听器

1、计算属性

1、定义计算属性：

 

2 、计算属性的缓存特性

2、侦听器

1、侦听器的基本结构

 

2、侦听器的基本使用 

3、对数组进行侦听 

4、深度侦听 

 

四、样式绑定

1、对象内联绑定

2、对象非内联绑定 

 五、事件处理

1、事件与事件流

2、事件修饰符 

事件修饰符

        event.preventDefault()/阻止默认行为或者event.stopPropogation()/阻止事件冒泡

        以上方法需要处理DOM事件细节，代码繁琐

        为了解决这个问题Vue.js提供了事件修饰符

        修饰符是以点开头的指令后缀来表示的.

1、stop修饰符

2、 self修饰符

3、prevent修饰符 

4、按键修饰符 

keydown:按下键时触发。

keypress：按下有值的键时触发，而当按下Ctrl、Alt、Shift、Meta这样无值的键时，keypress事件不会触发。对于有值的键，按下时先触发keydown事件，再触发keypress事件。

keyup：松开键时触发。

六、表单绑定

1、文本框

2. 修饰符

.lazy

.number

.trim

七、结构渲染 

1、条件渲染指令v-if

 

2、 条件渲染指令v-show

3、列表渲染指令v-for