Vue框架学习
2023-02-03 13:54:22 0 举报AI智能生成
前端架构vue
作者其他创作
大纲/内容
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.引用模板
将组件内容放到模板<template>中并引用
5.动态组件
<component :is="">组件
多个组件使用同一个挂载点，然后动态的在它们之间切换
<keep-alive>组件
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 => {});
3、slot内容分发
①默认插槽 本意：位置、槽
② 具名插槽：
1. 就是给这个插槽起个名字
2. <slot name="girl"></slot>
<div style="height:1px;background-color:red;"></div>
<slot name="boy"></slot>
③ 作用域插槽
1. 定义：
就是我在组件上的属性，可以在组件元素内使用！
2. 实例
<child :lists="nameList">
<template slot-scope="a">
{{a}}
</template>
</child>template:`
<div>
<ul>
<li v-for="list in lists">
<slot :bbbbb="list"></slot>
</li>
</ul>
</div>
`
④ 作用：
用来获取组件中的原内容
4、 vue-router路由
① 简介
使用Vue.js开发SPA（Single Page Application）单页面应用
根据不同url地址，显示不同的内容，但显示在同一个页面中，称为单页面应用
② 基本用法
1. 布局
（1）<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。
2. 配置路由
（2）定义路由的步骤
定义路由组件
定义路由
创建Router实例
注入路由
3. <router-link> 相关属性
（1） to：表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。
（2） replace:设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
<router-link :to="{ path: '/abc'}" replace></router-link>
（3） append：设置 append 属性后，则在当前（相对）路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b
（4） tag:有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
<router-link to="/foo" tag="li">foo</router-link>
（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() 添加路由，功能上与<route-link>相同
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文件由三部分组成：<template>、<style>、<script>
② vue-loader
浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader
类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等
③ webpack
是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理
实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件
④ 示例，步骤：
（1）创建项目
webpack-demo
|-index.html
|-main.js 入口文件
|-App.vue vue文件
|-package.json 工程文件
|-webpack.config.js webpack配置文件
|-.babelrc Babel配置文件
（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 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
导入 <script src="vue.js"></script>
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” 语法（双大括号）的文本插值：
<span>Message: {{ msg }}</span>
2.纯html: 双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令：
<div v-html="rawHtml"></div>
② 属性
1.Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>
2.这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除：
<button v-bind:disabled="someDynamicCondition">Button</button>
③ 使用 JavaScript 表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
④ 过滤器
被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：
{{ message | capitalize }}
⑤ 指令
指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式
<p v-if="seen">Now you see me</p>
⑥ 修饰符
用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
⑦ 缩写
1.v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
2.v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
⑧ 用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定
v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
1.5 Vue.js的高级语法
① 计算属性
1. 计算缓存 vs Methods
通过调用表达式中的method来达到同样的效果：
<p>Reversed message: "{{ reverseMessage() }}"</p>
// in component
methods: {
reverseMessage: function () {
return this.message.split('').reverse().join('')
}
}
2.vs Watched Property
提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人 —— 特别是如果你来自 AngularJS 。
② Class 与 Style 绑定
1.对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class 。
<div v-bind:class="{ active: isActive }"></div><div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
③ 条件渲染
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基本语法
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>
2.v-for 还支持一个可选的第二个参数为当前项的索引
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
3.整数迭代 v-for
<div>
<span v-for="n in 10">{{ n }}</span>
</div>
⑤ 事件处理器
1.监听事件
可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。
2.方法事件处理器
v-on 可以接收一个定义的方法来调用。
3.内联处理器方法
除了直接绑定到一个方法，也可以用内联 JavaScript 语句：
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
4.事件修饰符
通过由点(.)表示的指令后缀来调用修饰符。
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
5.按键修饰符
在监听键盘事件时，我们经常需要监测常见的键值。
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
⑥ 表单控件绑定
用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。
文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多个勾选框，绑定到同一个数组：
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
多选列表（绑定到一个数组）：
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
2、发送AJAX请求
0 条评论
下一页
