Vue学习记录

Vue

vue是一套用于构建用户界面的渐进式JavaScript框架

构建用户界面：使用某种方式拿到数据，将数据放到合适的位置

渐进式：可以自底向上逐层应用

vue特点：

1.采用组件化开发，提高代码复用率，并且让代码更好的维护

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率

3.使用虚拟DOM+Diff算法，尽量复用DOM节点

vue安装

1.直接使用script标签引入

1.1直接用网址引入

1.2去官网下载到本地再引用

安装 — Vue.js

2.npm方式

npm install vue

刚开始引入的时候控制台会显示调试信息

 只需要添加如下命令即可关闭调试信息

单项数据绑定

v-bind

数据只能从data流向页面

hello world例子

 显示效果：

 数据里面可以存放对象，对象里的数据照样可以读取到

当一个实例对应多个容器时，只会读取第一个

【一个容器对应一个实例，一个实例对应一个容器】

显示效果：

 

 {{}}里可以是vue实例data中的数据，也可以是js表达式

真实开发中只有一个vue实例

一旦data里的数据改变，页面中的数据也会马上跟着改变

vue的模板语法：

 效果：

 v-bind表示动态绑定数据，可以简写为【：】

双向数据绑定

v-model

数据可以在页面和data之间互相流动

 注意：双向绑定只能是用于具有value值的元素（表单元素），如input，select等，因为v-model默认是用来收集value值的

el的两种写法：

第一种：

 第二种：

先创实例，再指定

 data的两种写法

第一种：

对象形式

第二种

函数形式

 

 函数形式也可以简写为

 如果使用的是箭头函数

data:()=>{}

this指向就是window

MVVM模型

M：（Model）对应data中的数据

V：（View）模板

VM：（ViewModel）Vue实例对象

 注意：

1.data中所有的属性，最后都出现在了vm身上

2.vm身上的所有属性及Vue原型上的所有属性，在Vue模板中都可以直接使用

Object.defineProperty

可以用Object.defineProperty方法添加新属性

Object.defineProperty（）接收三个参数

1.对象，2.属性名，3.配置对象

 该方法添加的属性默认不能被枚举（遍历）等，但是可以修改

get(getter)读取属性时调用

set(setter)修改属性时调用，并返回修改后的值

不能和以上Object.defineProperty里的配置一起使用

 数据代理

通过一个对象代理另一个对象中属性的操作（读/写）

例如操作obj2可以控制obj1

vue中的数据代理

 事件的处理

1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名

2.事件的回调需要配置在methods对象中，最终会在vm上

3.methods中配置的函数不能使用箭头函数，否则this就不是指向vm了

4.@click='xxx'和@click='xxx($event)'效果一致，但是后者可以传参

 事件修饰符

1.prevent：阻⽌默认事件（常⽤）；

2.stop：阻⽌事件冒泡（常⽤）；

3.once：事件只触发⼀次（常⽤）；

4.capture：使⽤事件的捕获模式；

5.self：只有 event.target是当前操作的元素时才出发事件；

6.passive：事件的默认⾏为⽴即执⾏，⽆需等待事件的回调执⾏完毕

 键盘事件

1.Vue 中常⽤的按键别名：

回车  ======= enter

删除 ======= delete

退出 ======= esc

空格 ======= space

上键 ======= up

下键 ======= down

左键 ======= left

右键 ======= right

2.Vue未提供别名的按键，可以使⽤原始的key值去绑定，但注意要转化为kebab_case（短横线命名）

条件渲染

v-show

适用于切换频率高的场景

控制元素的显示与隐藏，不展示的元素只会被隐藏

v-show='表达式'，表达式里的结果要返回的是布尔值

 v-if

适用于切换频率低的场景

v-if不展示的元素会被移除

 v-if和v-else-if、v-else一起使用时，要求连在一起，结构不能被打断

 列表渲染

v-for

用于展示列表数据

语法：v-for="(item,index) in xxx" :key="yyy"

可用来遍历数组，对象，字符串，指定次数

效果：

 

 其他指令：

v-text

作用：向其所在的节点中渲染文本内容

与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}不会

 效果：

 v-html

作用：向其所在的节点中渲染html

与v-text的区别：v-text不会解析里面的内容，v-html会解析里面的内容

 效果：

 v-once

作用：所在节点初次动态渲染后，就视为静态内容，后面数据的改变不会引起v-once所在结构的更新

效果：

 

 生命周期

别名：生命周期回调函数、生命周期函数、钩子函数

生命周期函数的名字不能更改，但是函数里的内容可以由程序员编写

生命周期函数中的this指向是vm或者组件实例对象

生命周期分为四个阶段，八个过程

四个阶段

1.Create  创建

2.Mount  挂载

3.Update  更新

4.Destroy  销毁

八个过程

1.beforeCreate

实例创建完成之前，无法通过vm访问到data中的数据、methods中的方法

2.Created

实例创建完成，可以通过vm访问data中的数据，methods中配置的方法

3.beforeMount

模板编译完成之后，但还尚未挂载到页面

4.Mounted

模板编译完成，并且挂载到了页面上

5.beforeUpdate

数据更新前，data和页面不同步

6.updated

数据更新后，data和页面同步,谁改变渲染谁，不是整个DOM树

7.beforeDestroy

销毁前，销毁操作必须手动触发，调用vm.$destroy()

8.destroyed

销毁后

计算属性

定义：要用的属性不存在，要通过已有属性计算得来

原理：底层借助了Object.defineProperty方法提供的getter和setter

get函数什么时候执行

1.初次读取时会执行一次

2.当依赖的数据发生改变的时候会被再次调用

优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

注意：

1.计算属性最终会出现在vm上，直接读取使用即可

2.如果计算属性要被修改，必须要写set函数去响应修改，并且要引起计算时依赖的数据发生改变

 计算属性的简写形式

只有当确定了计算属性不需要做修改操作时才可以使用

这里的fullName貌似是个函数，但实际上是将函数的返回值交给计算属性fullName

 监听属性

监听器的基本使用

watch

监听的两种写法：

1）new Vue时传入watch配置

2）通过vm.$watch配置

当被监听的属性变化时，回调函数自动执行，进行相关操作

监听的属性必须存在，才能进行监听

 监听器的简写形式

使用条件：当监听器里只有handler的时候

 监听器和计算属性的区别

1.当一些数据需要随着其他数据变动而变动时，一般使用计算属性比较好

2.当需要在数据变化时执行异步或开销较大的操作时，监听器比较好

组件

实现应用中局部功能代码和资源的集合

vue中使用组件的三大步骤

1.创建组件

使用vue.extend(options)创建

data必须写成函数，为了避免组件复用时数据存在引用关系

2.注册组件

局部注册：靠new Vue时传入components选项

全局注册：靠Vue.component('组件名'，组件)

3.使用组件

非单文件组件（一个文件中包含n个组件）

 全局注册：

 组件的嵌套

 

 

脚手架的使用

1.安装：

在终端中输入

npm install -g @vue/cli

2.终端切换到要创建项目的目录下

vue create demo （demo为项目名）

创建好后目录如下

 3.进入项目中启动项目

npm run serve

配置项props

用来接收使用者传递的参数

ref属性

1. 被⽤来给元素或⼦组件注册引⽤信息（ id 的替代者）

2. 应⽤在 html 标签上获取的是真实 DOM 元素，应⽤在组件标签上是组件实例对象（ VueComponent ）

3. 使⽤⽅式：

打标识：

获取： this.$refs.xxx

 组件的创建

1.先在components里创建一个vue文件

 2.在vue文件里写入内容

 3.在App.vue中引入

4.在template中使用

 

 效果如下：

混入

局部混入：mixin:['xxx']

全局混入：Vue.mixin(xxx)

1.先在外头写一个js文件

 2.局部混入

 3.全局混入

在main.js中写入

 在App.vue中引入

插件

功能：增强Vue

本质：包含install方法的一个对象，install的第一个参数是Vue，第二个参数是插件使用者传递的数据

定义插件：

对象 .install = function (Vue,options){

        //1.添加全局过滤器

        //2.添加全局指令

        //3.配置全局混⼊

        Vue.mixin(....)

        //4.添加实例⽅法

        Vue.prototype.hello = function(){...}

    }

使⽤插件： Vue.use()

1.写插件.js文件

2. 在main.js中使用插件

过滤器

定义：对要显示的数据进行特定格式化后再显示

语法：

1.全局注册过滤器：Vue.filter(name,callback)

2.使用过滤器：{{xxx | 过滤器名称}}或者v-bind:属性="xxx | 过滤器名"

注意：

1.过滤器可以接受额外参数，多个过滤器也可以串联

2.并没有改变原本的数据，是产生新的对应数据

自定义指令

定义语法：

1）局部指令：

new Vue({

        directives:{

        指令名：配置对象（或者写成函数形式）

        }

})

2 ）全局指令：

Vue.directive( 指令名，配置对象（或者回掉函数） )

配置对象中常⽤的三个回掉函数

1 ） bind ：在指令和元素绑定成功时调⽤

2 ） inserted ：指令所在元素被插⼊⻚⾯时调⽤

3 ） update ：指令所在模版被重新解析时调⽤

注意：

1 ）指令定义时不加 v- ，但使⽤的时候需要加 v-

2 ）指令名如果是多个单词，要使⽤ kebab-case 命名⽅式

需求1:自定义一个指令v-big,功能和v-text差不多,区别是要将渲染的数据扩大10倍

需求2：自定义一个指令v-fbind，功能和v-bind差不多，区别是当页面加载的时候，输入框自动获取焦点

 

 

 效果：

组件通信

父组件向子组件传值

⽗组件向⼦组件传值时通过prop ，所有的 prop 都使得其⽗⼦ prop 之间形成了⼀个 单向下⾏绑定 ：⽗级 prop 的更新会向下流动到⼦组件中，但是反过来则不⾏。这样会防⽌从⼦组件意外变更⽗级组件的状态，从⽽导致应⽤的数据流向难以理解。额外的，每次⽗级组件发⽣变更时，⼦组件中所有的 prop 都将会刷新为最新的值。这意味着不 应该在⼀个⼦组件内部改变 prop 。如果这样做了， Vue 会在浏览器的控制台中发出警告。

 

 

 效果：

 子组件向父组件传值

子组件通过发射事件$.emit('xxx')给父组件，通知父组件数据改变，父组件通过@xxx监听

 

插槽

作用：让父组件可以向指定位置插入html结构，也是一种通信方式，适应于父组件传值给子组件

1.默认插槽

创建一个category组件

 在App中引入

 效果：

 2.具名插槽

创建一个category组件

 在App中引用

 效果：

 3.作用域插槽

数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定

创建一个category组件

 在App中引用

 

 效果：

 

路由

route

一个路由就是一组映射关系（key-value)

key为路径，value为component(用于展示页面内容)

路由器

router

多个路由需要经过路由器的管理

基本使用

1.安装vue-router

安装命令：

npm install vue-router

如果在package.json发现有如下依赖，则表明安装成功

在components写好两个vue文件以便测试使用

1.Home.vue

2.About.vue

 

另创一个router文件夹放入index.js

 在main.js中引入

 （不要忘记创建vue实例里也要写）

在APP页面实现路由跳转

嵌套路由

可多重嵌套

1.在components创建一个message.vue

一个news.vue

  2.把它们嵌套在home路径里面

3.在home.vue里面把跳转路径写上 

路由传参

1.传递参数

跳转并携带参数

 

接收参数

另写一个Details.vue进行跳转并接收参数

 

命名路由

 

 在home.vue中使用

路由的params参数

1.第一种写法

在router/index.js对应的路由中写入参数位置

 在message.vue中写入 

 

 在details.vue中接收参数

 第二种写法

在meassage.vue写入

 接收参数同上

编程式导航

push和replace方法的区别：replace不会向history添加记录，而是直接替换

 

 

重定向和别名

const router = new VueRouter({

        routes: [

                { path: '/a', redirect: '/b' }

              ]

})

当⽤户访问 /a 时， URL 将会被替换成 /b ，然后匹配路由为 /b

路由模式

有两种路由模式

1.hash（默认），使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载

2.history，URL就像正常的url，例如http://localhost:8080/login

注意：history模式在html文件中配置时，需要使用vscode编辑器的插件open with live server打开html文件

 

 路由守卫

全局前置守卫

调用时机：初始化执行，当路由发生变化时执行

全局后置守卫

调用时机：初始化执行，每次路由切换后执行

 路由独享守卫

可以在路由配置上直接定义beforeEnter守卫，该守卫与全局前置守卫的方法参数是一样的

组件内部守卫

vuex

概念：专门在vue中实现集中式状态（数据）管理的一个插件，对vue应用中多个组件的共享状态进行集中式的管理（读写），也是一种组件间的通信方式，且适用于任意组件间通信

什么时候使用vuex：多个组件需要共享数据时

工作原理：

 搭建vuex环境

在项目下执行命令

npm install vuex

如果在package.json中发现有如下依赖则表明安装成功

 创建一个store文件夹用来存放index.js

并在index.js里面引入且使用vuex

在main.js中直接引入store即可

基本使用1：读取数据

在store里的index.js文件里写入数据

 在components创建一个Home.vue页面接收数据

 效果：

 基本使用2：修改数据

$store.dispatch('actions 中的⽅法名 ' ，数据 )

或 $store.commit('mutations 中的⽅法名' ，数据 )

若没有⽹络请求或其他业务逻辑，组件中也可以越过actions，即不写 dispatch ，直接编写 commit

getter 配置项

概念：当 state( 仓库 ) 中的数据需要经过加⼯后再使⽤，可以使⽤ getter 加⼯

Home页面

 index页面

 效果：

四个map方法

mapState:映射state中的数据为计算属性

mapGetters:映射getter中的数据为计算属性

mapActions:帮助生成与action对话的方法，即包含$store.dispatch(xxx)的函数

mapMutations:帮助生成mutations对话的方法，即包含$store.commit(xxx)的函数

模块化

在store的index.js文件中

模块化里面写入actions，mutations，state，getters

开启命名空间

namespaced:'true'

 在home页面使用

...mapState（'模块化名字',引用的数据）

{{直接写引用数据名}}

webpack

用于现代JavaScript应用程序的静态模块打包工具

当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示内容。

1.创建一个文件夹app01

在文件夹的目录下先初始化

npm init

2.安装webpack-cli（此工具用于在命令行中运行webpack）

npm install webpack webpack-cli --save-dev

下载插件

npm install qs lodash --save

npm install --save-dev html-webpack-plugin

npm install --save-dev css-loader

3.创一个src的文件夹，里面分别放入a，b，main，index四个js文件

a.js

 b.js

main.js和index.js内容相同

 

4.创建一个文件夹style，存放style.css文件

 

 5.创建一个webpack.config.js文件

css-loader会对@import和url进行处理

test: /\.css$/i, //匹配所有的以.css结尾的⽂件

use: ["style-loader", "css-loader"], //将这些⽂件让css-loader处理

 6.创一个dist文件夹存放运行结果

7.在该项目下运行 npm run build，即在dist文件下自动生成如下文件

 运行html文件，结果如下：

代表打包成功