首页  思维导图  详情



 



Vue框架学习

2023-02-03 13:54:22   0  举报





AI智能生成

前端架构vue

Vue.js

vue生命周期

vuex流程图

模板推荐

作者其他创作

大纲/内容

3、Vue生命周期

1、生命周期的定义

从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。

2、三个阶段

① 初始化

1. 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作

2. 挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

3. 开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

② 运行中

1. 接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情

2. 当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿

3. 当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

③ 销毁

1. 当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

2. 组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

4、组件component的应用

1、了解组件component

1. 什么是组件？

1.组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码

2.组件是自定义元素（对象）

2.定义组件的方式

方式1：先创建组件构造器，然后由组件构造器创建组件

方式2：直接创建组件

3.组件的分类

① 全局组件

② 局部组件

4.引用模板

将组件内容放到模板&lt;template&gt;中并引用

5.动态组件

&lt;component :is=&quot;&quot;&gt;组件多个组件使用同一个挂载点，然后动态的在它们之间切换

&lt;keep-alive&gt;组件

2、组件间数据传递

1. 父子组件

①定义：在一个组件内部定义另一个组件，称为父子组件

②子组件只能在父组件内部使用。默认情况下，子组件无法访问父组件中的数据，每个组件实例的作用域是独立的

2. 组件间数据传递（通信）

2.1 子组件访问父组件的数据

a)在调用子组件时，绑定想要获取的父组件中的数据

b)在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据

注意：父组件通过props向下传递数据给子组件注：组件中的数据共有三种形式：data、props、computed

2.2 父组件访问子组件的数据

a)在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件，事件名自定义

b)父组件在使用子组件的地方监听子组件触发的事件，并在父组件中定义方法，用来获取数据

注意：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件

3. 单向数据流

① props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来

② 而且不允许子组件直接修改父组件中的数据，报错解决方式：

a.使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又开始支持）需要显式地触发一个更新事件

b.可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，指向同一个内存空间)，推荐

4. 非父子组件间的通信

非父子组件间的通信，可以通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件

var Event=new Vue(); Event.$emit(事件名,数据); Event.$on(事件名,data =&gt; {});

3、slot内容分发

①默认插槽本意：位置、槽

② 具名插槽：

1. 就是给这个插槽起个名字

2. &lt;slot name=&quot;girl&quot;&gt;&lt;/slot&gt; &lt;div style=&quot;height:1px;background-color:red;&quot;&gt;&lt;/div&gt; &lt;slot name=&quot;boy&quot;&gt;&lt;/slot&gt;

③ 作用域插槽

1. 定义：

就是我在组件上的属性，可以在组件元素内使用！

2. 实例

&lt;child :lists=&quot;nameList&quot;&gt; &lt;template slot-scope=&quot;a&quot;&gt; {{a}} &lt;/template&gt; &lt;/child&gt;template:` &lt;div&gt; &lt;ul&gt; &lt;li v-for=&quot;list in lists&quot;&gt; &lt;slot :bbbbb=&quot;list&quot;&gt;&lt;/slot&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; `

④ 作用：

用来获取组件中的原内容

4、 vue-router路由

① 简介

使用Vue.js开发SPA（Single Page Application）单页面应用根据不同url地址，显示不同的内容，但显示在同一个页面中，称为单页面应用

② 基本用法

1. 布局

（1）&lt;router-link&gt; 组件支持用户在具有路由功能的应用中（点击）导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的 &lt;a&gt; 标签，可以通过配置 tag 属性生成别的标签.。

2. 配置路由

（2）定义路由的步骤

定义路由组件

定义路由

创建Router实例

注入路由

3. &lt;router-link&gt; 相关属性

（1） to：表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

（2） replace:设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。 &lt;router-link :to=&quot;{ path: &apos;/abc&apos;}&quot; replace&gt;&lt;/router-link&gt;

（3） append：设置 append 属性后，则在当前（相对）路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

（4） tag:有时候想要 &lt;router-link&gt; 渲染成某种标签，例如 &lt;li&gt;。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。 &lt;router-link to=&quot;/foo&quot; tag=&quot;li&quot;&gt;foo&lt;/router-link&gt;

（5） active-class ：设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

③ 路由嵌套和参数传递

传参的两种形式：

（1） a.查询字符串：login?name=tom&pwd=123 {{$route.query}

（2） b.rest风格url：regist/alice/456 {{$route.params}}

④ 路由实例的方法

1. router.push() 添加路由，功能上与&lt;route-link&gt;相同

2. router.replace() 替换路由，不产生历史记录

⑤ 路由结合动画

1. 提供多种不同方式的应用过渡效果。

(1)在 CSS 过渡和动画中自动应用 class

(2)可以配合使用第三方 CSS 动画库，如 Animate.css

(3)在过渡钩子函数中使用 JavaScript 直接操作 DOM

(4)可以配合使用第三方 JavaScript 动画库，如 Velocity.js

2. 过渡的类名

（1）v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

（2）v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。

（3）v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

（4）v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

（5）v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

（6）v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

5、单文件组件

① .vue文件

vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js

vue文件由三部分组成：&lt;template&gt;、&lt;style&gt;、&lt;script&gt;

② vue-loader

浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader 类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等

③ webpack

是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件

④ 示例，步骤：

（1）创建项目

（2）编写App.vue

（3）安装相关模板

cnpm install vue -S cnpm install webpack -D cnpm install webpack-dev-server -D cnpm install vue-loader -D cnpm install vue-html-loader -D cnpm install css-loader -D cnpm install vue-style-loader -D cnpm install file-loader -D cnpm install babel-loader -D cnpm install babel-core -D cnpm install babel-preset-env -D //根据配置的运行环境自动启用需要的babel插件 cnpm install vue-template-compiler -D //预编译模板

（4）编写main.js

（5）编写webpack.config.js

（6）编写.babelrc

（7）编写package.json

（8）运行测试 npm run dev

6、vue-cli脚手架

① 简介

（1） vue-cli是一个vue脚手架，可以快速构造项目结构

（2） vue-cli本身集成了多种项目模板： simple 很少简单 webpack 包含ESLint代码规范检查和unit单元测试等 webpack-simple 没有代码规范检查和单元测试 browserify 使用的也比较多 browserify-simple

② 示例，步骤：

（1）安装vue-cli，配置vue命令环境

cnpm install vue-cli -g

vue --version

vue list

（2）初始化项目，生成项目模板

语法：vue init 模板名项目名

（3）进入生成的项目目录，安装模块包

cd vue-cli-demo cnpm install

（4）运行

npm run dev //启动测试服务

npm run build //将项目打包输出dist目录，项目上线的话要将dist目录拷贝到服务器上

1、了解Vue.js

1.1Vue.js 2.0 介绍

① Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

② Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

③ Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。

导入 &lt;script src=&quot;vue.js&quot;&gt;&lt;/script&gt;

1.2Vue.js特点

① 核心思想便是 “数据驱动的组件系统”

通过数据绑定链接View和Model（ MVVM ），让数据的变化自动映射为视图的更新。

② 高效实用的组件系统

③ 基于构建工具的单文件组件格式

把一个组件的模板、样式、逻辑三要素整合在同一个文件中（.vue），即方便开发，也方便复用和维护。

④ 异步批量DOM更新

当大量数据变动时，所有受到影响的watcher会被推送到一个队列中，并且每个watcher只会推进队列一次。

⑤ 动画系统

Vue.js提供了简单却强大的动画系统，当一个元素的可见性变化时，用户不仅可以很简单地定义对应的CSS Transition或Animation效果，还可以利用丰富的JavaScript钩子函数进行更底层的动画处理

⑥ 可扩展性

除了自定义指令、过滤器和组件，Vue.js还提供了灵活的mixin机制，让用户可以在多个组件中复用共同的特性。

1.3Vue.js基本结构

① 基本结构：

每个 Vue.js 应用都需要通过实例化 Vue 来实现 var vm = new Vue({ el: …, data:{…}, methods:{…} })

② 属性说明：

el：应用的dom元素id

data：属性

methods：定义的函数，可以通过 return 来返回函数值

1.4Vue.js 模板语法

① 插值

1.文本：数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值： &lt;span&gt;Message: {{ msg }}&lt;/span&gt;

2.纯html: 双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令： &lt;div v-html=&quot;rawHtml&quot;&gt;&lt;/div&gt;

② 属性

1.Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令： &lt;div v-bind:id=&quot;dynamicId&quot;&gt;&lt;/div&gt;

2.这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除： &lt;button v-bind:disabled=&quot;someDynamicCondition&quot;&gt;Button&lt;/button&gt;

③ 使用 JavaScript 表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。 {{ number + 1 }} {{ ok ? &apos;YES&apos; : &apos;NO&apos; }} {{ message.split(&apos;&apos;).reverse().join(&apos;&apos;) }} &lt;div v-bind:id=&quot;&apos;list-&apos; + id&quot;&gt;&lt;/div&gt;

④ 过滤器

被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示： {{ message | capitalize }}

⑤ 指令

指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式 &lt;p v-if=&quot;seen&quot;&gt;Now you see me&lt;/p&gt;

⑥ 修饰符

用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()： &lt;form v-on:submit.prevent=&quot;onSubmit&quot;&gt;&lt;/form&gt;

⑦ 缩写

1.v-bind 缩写

&lt;!-- 完整语法 --&gt; &lt;a v-bind:href=&quot;url&quot;&gt;&lt;/a&gt; &lt;!-- 缩写 --&gt; &lt;a :href=&quot;url&quot;&gt;&lt;/a&gt;

2.v-on 缩写

&lt;!-- 完整语法 --&gt; &lt;a v-on:click=&quot;doSomething&quot;&gt;&lt;/a&gt; &lt;!-- 缩写 --&gt; &lt;a @click=&quot;doSomething&quot;&gt;&lt;/a&gt;

⑧ 用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

1.5 Vue.js的高级语法

① 计算属性

1. 计算缓存 vs Methods

通过调用表达式中的method来达到同样的效果： &lt;p&gt;Reversed message: &quot;{{ reverseMessage() }}&quot;&lt;/p&gt; // in component methods: { reverseMessage: function () { return this.message.split(&apos;&apos;).reverse().join(&apos;&apos;) } }

2.vs Watched Property

提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人 —— 特别是如果你来自 AngularJS 。

② Class 与 Style 绑定

1.对象语法我们可以传给 v-bind:class 一个对象，以动态地切换 class 。 &lt;div v-bind:class=&quot;{ active: isActive }&quot;&gt;&lt;/div&gt;&lt;div class=&quot;static&quot; v-bind:class=&quot;{ active: isActive, &apos;text-danger&apos;: hasError }&quot;&gt; &lt;/div&gt;

③ 条件渲染

1.v-if

2.v-else

3.v-if vs. v-show区别：

v-if 是真实的条件渲染

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做

v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换

v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display

④ 列表渲染

1.v-for基本语法

&lt;div id=&quot;app&quot;&gt; &lt;ul&gt; &lt;li v-for=&quot;n in 10&quot;&gt; {{ n }} &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;

2.v-for 还支持一个可选的第二个参数为当前项的索引

&lt;ul id=&quot;example-2&quot;&gt; &lt;li v-for=&quot;(item, index) in items&quot;&gt; {{ parentMessage }} - {{ index }} - {{ item.message }} &lt;/li&gt; &lt;/ul&gt;

3.整数迭代 v-for

&lt;div&gt; &lt;span v-for=&quot;n in 10&quot;&gt;{{ n }}&lt;/span&gt; &lt;/div&gt;

⑤ 事件处理器

1.监听事件

可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。

2.方法事件处理器

v-on 可以接收一个定义的方法来调用。

3.内联处理器方法

除了直接绑定到一个方法，也可以用内联 JavaScript 语句： &lt;div id=&quot;example-3&quot;&gt; &lt;button v-on:click=&quot;say(&apos;hi&apos;)&quot;&gt;Say hi&lt;/button&gt; &lt;button v-on:click=&quot;say(&apos;what&apos;)&quot;&gt;Say what&lt;/button&gt; &lt;/div&gt;

4.事件修饰符

通过由点(.)表示的指令后缀来调用修饰符。

&lt;!-- 阻止单击事件冒泡 --&gt; &lt;a v-on:click.stop=&quot;doThis&quot;&gt;&lt;/a&gt;

&lt;!-- 提交事件不再重载页面 --&gt; &lt;form v-on:submit.prevent=&quot;onSubmit&quot;&gt;&lt;/form&gt;

&lt;!-- 修饰符可以串联 --&gt; &lt;a v-on:click.stop.prevent=&quot;doThat&quot;&gt;&lt;/a&gt;

&lt;!-- 只有修饰符 --&gt; &lt;form v-on:submit.prevent&gt;&lt;/form&gt;

&lt;!-- 添加事件侦听器时使用事件捕获模式 --&gt; &lt;div v-on:click.capture=&quot;doThis&quot;&gt;...&lt;/div&gt;

&lt;!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --&gt; &lt;div v-on:click.self=&quot;doThat&quot;&gt;...&lt;/div&gt;

5.按键修饰符

在监听键盘事件时，我们经常需要监测常见的键值。

.stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。 .native - 监听组件根元素的原生事件。 .once - 只触发一次回调。

⑥ 表单控件绑定

用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

文本 &lt;input v-model=&quot;message&quot; placeholder=&quot;edit me&quot;&gt; &lt;p&gt;Message is: {{ message }}&lt;/p&gt;

多个勾选框，绑定到同一个数组： &lt;input type=&quot;checkbox&quot; id=&quot;john&quot; value=&quot;John&quot; v-model=&quot;checkedNames&quot;&gt; &lt;label for=&quot;john&quot;&gt;John&lt;/label&gt; &lt;input type=&quot;checkbox&quot; id=&quot;mike&quot; value=&quot;Mike&quot; v-model=&quot;checkedNames&quot;&gt; &lt;label for=&quot;mike&quot;&gt;Mike&lt;/label&gt; &lt;br&gt; &lt;span&gt;Checked names: {{ checkedNames }}&lt;/span&gt;

多选列表（绑定到一个数组）： &lt;select v-model=&quot;selected&quot; multiple&gt; &lt;option&gt;A&lt;/option&gt; &lt;option&gt;B&lt;/option&gt; &lt;option&gt;C&lt;/option&gt; &lt;/select&gt; &lt;br&gt; &lt;span&gt;Selected: {{ selected }}&lt;/span&gt;

2、发送AJAX请求