Vue学习笔记

创建2021-03-09更新2021-10-14阅读时间15m

通过现有资料和视频资源进行的汇总，学习巩固。

Vue介绍

Vue框架的特点

模板渲染：基于 html 的模板语法，学习成本低。
响应式的更新机制：数据改变之后，视图会自动刷新。【重要】
渐进式框架
组件化/模块化

常见的插件

常见的插件
Webpack：代码模块化构建打包工具。
Gulp：基于流的自动化构建工具。
Babel：使用最新的 规范来编写 js。
Vue：构建数据驱动的Web界面的渐进式框架
Express：基于 Node.js 平台，快速、开放、极简的 Web 开发框架。

以上这些包，都可以通过 NPM 这个包管理工具来安装。

引用方式

  1. 方式一：（CDN的方式进行引用）
  2. 方式二：（下载 vue.js 文件）
  3. 方式三：（NPM的方式安装vue）
  4. 利用 vue-cli 新建一个空的项目

  5. Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。

  6. 该工具为现代化的前端开发工作流提供了开箱即用的构建配置。
  7. 只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

Vue项目结构分析

buid：打包配置的文件夹
config：webpack对应的配置
src：开发项目的源码
App.vue：入口组件。.vue文件都是组件。
main.js：项目入口文件。
static：存放静态资源
.babelrc：解析ES6的配置文件
.editorcofnig：编辑器的配置
.postcssrc.js：html添加前缀的配置
index.html：单页面的入口。通过 webpack打包后，会把 src 源码进行编译，插入到这个 html 里面来。
package.json：项目的基础配置，包含版本号、脚本命令、项目依赖库、开发依赖库、引擎等。

Vue系统指令

插值表达式,两个大括号
可以填写变量，实时渲染
支持内容

1
2
3
4
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ name == 'smyhvae' ? 'true' : 'false' }}
{{ message.split('').reverse().join('') }}

v-cloak

v-cloak指令和CSS 规则一起用的时候，能够解决差值表达式闪烁的问题
（即：可以隐藏未编译的标签直到实例准备完毕）。

v-text

差值表达式和 v-text 的区别
区别1： v-text 没有闪烁的问题，因为它是放在属性里的。
区别2 :插值表达式只会替换自己的这个占位符，并不会把整个元素的内容清空。
v-text 会覆盖元素中原本的内容。初始状态还是里面的内容，
执行v-text后，覆盖原有数据

v-html

v-text是纯文本，而v-html会被解析成html元素。
使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击

v-bind

动态绑定，值可以变化
主要绑定属性
如：<img v-bind:src="imageSrc +'smyhvaeString'">
v-bind的属性值里，可以写合法的 js 表达式。

v-on

绑定事件
v-on:click：点击事件
v-on:click
v-on:keydown
v-on:keyup
v-on:mousedown
v-on:mouseover
v-on:submit
简写：@click=””

Vue事件修饰符

.stop 阻止冒泡。本质是调用 event.stopPropagation()。
.prevent 阻止默认事件（默认行为）。本质是调用 event.preventDefault()。
.capture 添加事件监听器时，使用捕获的方式（也就是说，事件采用捕获的方式，而不是采用冒泡的方式）。
.self 只有当事件在该元素本身（比如不是子元素）触发时，才会触发回调。
.once 事件只触发一次。
.native 监听组件根元素的原生事件。

Vue系统指令2

v-model

v-model：双向数据绑定
重点：双向数据绑定，只能用于表单元素，或者用于自定义组件。
v-bind 绑定的是属性，属性用来修饰元素的，数据只能单向绑定
<input type="text" id="username" v-model="myAccount.username">
<img v-bind:src="imageSrc +'smyhvaeString'">
注意v-model后面没有冒号

v-for

  • 用于遍历数组、对象等
    会复用同样元素，一般要加key，

v-if

  • 真实操作dom，删除添加元素，
    对性能有要求，少量操作可用

v-show

  • 控制显示与隐藏属性，
    控制属性，多数操作推荐使用

自定义过滤器

相当于查找替换
一种用 管道符 | 实现过滤
一种用Vue.filer

v-on的按键修饰符

可自定义按键
Vue内置的按键修饰符：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
@keyup.enter=”addData”表示：按住enter键后，执行addData()方法。全称是v-on:key.enter=”addData”。

生命周期函数

把握时机，
该什么时候干什么事

这个阶段，看方法

beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。（mounted之后，表示真实DOM渲染完了，可以操作DOM了）

这个阶段，看Dom元素

在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了

这个阶段，看数据

beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，
但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，
都已经完成了更新，界面已经被重新渲染好了。
PS：数据发生变化时，会触发这两个方法。不过，我们一般用watch来做。

看看有那些资源要清除，还有可用的

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destoried：

Vue中的Ajax请求

vue-resource的介绍

vue.js文件向Windows对象暴露了Vue这个关键词；
vue-resource.js向Vue身上挂载了this.$http这个属性。
于是，我们可以直接写this.$http.get或者this.$http.post或者this.$http.jsonp来调用。

像事件一样思考：

事件，事件源，事件方法
用什么方法请求
去哪里请求
请求成功，失败

get和post的区别：

传入内容不一样
安全性不一样
传递次数不一样

JSONP原理

由于浏览器的安全性限制，默认不允许Ajax发起跨域（协议不同、域名不同、端口号不同）的请求。浏览器认为这种访问不安全。

控制请求的时机
methods就像是方法库
生命周期就像是娃娃机

JSONP的实现原理：通过动态创建script标签的形式，
用script标签的src属性，代表api接口的url，
因为script标签不存在跨域限制，这种数据获取方式，
称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）。

Vue动画

放入style标签

动画进入：
v-enter：动画进入之前的初始状态
v-enter-to：动画进入之后的结束状态
v-enter-active：动画进入的时间段
PS：第一、第二个是时间点；第三个是时间段。

动画离开：
v-leave：动画离开之前的初始状态
v-leave-to：动画离开之后的结束状态
v-leave-active：动画离开的时间段

v-enter-to和v-leave的状态是一样的。
而且一般来说，v-enter和v-leave-to的状态也是一致的。
所以，我们可以把这四个状态写成两组。

还可使用第三方animate.css类库实现动画
已经封装好，直接添加类
一般第三方的使用，都要有两个，一个基础样式，一个实现效果
如 <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">

Vue组件

什么是组件

组件： 组件的出现，就是为了拆分Vue实例的代码量的，
能够让我们以不同的组件，来划分不同的功能模块，
将来我们需要什么样的功能，就可以去调用对应的组件即可。

和模块化的区别

  • 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单
  • 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

组件切换

【重要】component 是一个占位符, :is 属性,可以用来指定要展示的组件名称
<component :is="'login'"></component>

也可以v-if v-else来

插槽

子元素使用插槽
父元素使用时候可以传递过去
可以给插槽命名

组件传值

父传子，用属性，props

子组件中，data中的数据和props中的数据的区别：
子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，
比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上。props 中的数据，都是通过 父组件 传递给子组件的。
data中的数据是可读可写的；props中的属性只是可读的，无法重新赋值，
重新赋值会报错（也就是说，子组件不要直接去修改父组件中的数据）

也可以用ref属性获取子组件

子传父，用方法，$emit
触发父组件方法，也可传参数

不同组件传递Vuex, 或bus

Vue-router路由

什么是路由

  • 后端路由
    总结：后端路由，就是把所有url地址都对应到服务器的资源，这个对应关系就是路由。

  • 前端路由
    对于单页面应用程序来说，主要通过URL中的hash（url地址中的#号）来实现不同页面之间的切换。
    同时，hash有一个特点：HTTP请求中不会包含hash相关的内容。所以，单页面程序中的页面跳转主要用hash实现。
    总结：在单页应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）。

router和route

Vue 中 this.$router 与 this.$route 的区别 以及 push() 方法

  • $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。

    可以获取对应的 name, path, params, query 等属性。

  • $router对象是全局路由的实例，是router构造方法的实例。

    任何页面都可以调用其 push(), replace(), go() 等方法。