Vue2快速上手指南，重点笔记整理

学习前端框架需要你转变一个思想，转变一种思维方式，我们以后不需要再直接操作dom元素，需要改变页面的时候直接改变数据就好。数据改变之后，页面自动更新。这种思想叫：数据驱动。

Vue是一个前端渐进式框架，可作为学习的第一个前端框架。它学起来很简单，官方文档写的很详细。

官方文档：Vue.js - 渐进式 JavaScript 框架 | Vue.js

模板语法

模板语法就是模板语法，在html代码中使用两个花括号({{}})，两个花括号中间的内容是js表达式

事件绑定

绑定事件，在vue中通过v-on:的形式绑定事件，绑定事件的时候v-on:可以简写为@

绑定事件的时候只需要使用事件名字就好

最常使用的两个事件是：

• keyup

  键盘修饰符

  https://cn.vuejs.org/v2/guide/events.html#按键修饰符

• click

属性绑定

使用v-bind:实现属性绑定，v-bind:可以简写为:

vue中的指令

• v-model

  做用时实现数据和input输入框的绑定。它是一个语法糖，相当于为输入框设置了input事件和value值

• v-if

  控制标签的显示和隐藏，直接删除或者添加元素

• v-show

  控制标签的显示和隐藏，设置display属性。建议使用v-show,性能更好

• v-html

  innerHTML

• v-text

  innerText

• v-for

  循环展示数据

  v-for="(item, index) in xx"

  此处的item表示当前项，index表示索引。他们是形参，可以叫任何名字

  可以循环:字符串、数字、数组、对象

filter过滤器

数据过滤显示

watch监听

watch监听一个数据的改变，数据改变之后可以做一些其他的事情

计算属性

计算属性(computed)，当依赖的数据改变之后进行重新计算，返回一个新的计算结果

组件的生命周期

 

组件定义

组件可以简单的理解为自定义标签。我们把一些需要复用的代码进行封装

局部组件：

定义之后需要先注册才能使用

全局组件：

定义之后可以直接使用

// 定义一个局部组件
const hello = {
    template: '', // 组件html部分
    // 组件中的数据必须是一个function
    //	因为组件复用的时候，如果data是对象，那么所有的组件的data指向一个地方，那么改变之后所有的数据就都变了
    data() {
        return {}
    }, // 数据
    // 以前学的所有api在组件中都能使用
}
// 全局组件
Vue.component('haha', {
    template: '',
    data() {
        return {}
    }
})

插槽

占位符，就是这个位置我们先占着，放什么以后再说。插槽使用标签slot展示

• 默认插槽，没有名字的插槽
• 具名插槽，有名字的插槽具有name属性
• 作用域插槽，作用是在子组件内控制父组件展示的内容

组件生命周期

组件生命周期钩子函数，在组件创建和修改过程中执行的回调函数

八个常见的，分为四个阶段。分别是

创建

beforeCreate 创建之前

created 创建完成

这个比较重要。是以后我们使用最多的调接口取数据的地方

挂载

beforeMount 挂载之前

mounted 挂载完成。

比较重要，是以后获取组件dom元素的地方

更新

(当属性或者数据改变的时候重复执行)

beforeUpdate 更新之前

updated 更新完成

销毁

beforeDestroy 销毁之前

destroyed 销毁完成

哪几个生命周期钩子函数是只执行一次的：除了更新之外的 在更新的时候改变数据会引起死循环

嵌套组件的生命周期

 

当执行的父组件的挂载之前的时候，会开始解析所有的子组件，执行子组件从创建到挂载完成的生命周期钩子函数。当所有的子组件都挂载完成之后执行父组件的挂载完成

动态组件

component是vue内置标签，通过is属性设置当前展示的是哪一个

keep-alive

对组件做缓存，组件在被隐藏的时候不会销毁。

• include，包含。多个的时候使用,进行分割
• exclude，不包含

组件的生命周期中会多两个钩子函数:activated(激活的时候触发),deactivated(取消激活的时候触发)

组件传参

分为三种形式：

1. 父传子(从外往内传)，使用属性props
2. 子传父(从内往外传)，使用事件派发
3. 非相关组件，使用事件总线或者vuex

其他API

• $refs

  作用是获取页面中设置了ref属性的标签

• $nextTick

  vue中的页面元素更新是异步的，数据改变之后我们没办法获取最新的dom元素。可以使用$nextTick获取更新之后最新的页面效果，当页面更新之后会触发$nextTick的回调

自定义事件

$on实现事件的监听

$emit实现事件的派发

事件监听和派发都必须在一个对象上，谁派发的事件需要在谁上面做监听

单文件组件和脚手架搭建项目

 

Vue CLI官网：Vue CLI

安装

npm i @vue/cli -g # 全局安装vue脚手架
vue -V # 查看版本号
vue create vue-app-pre # 创建项目

vue脚手架内置了webpack插件，做了很多的默认配置。我们不需要关心。只需要知道它使用vue-loader这个加载器用来解析.vue文件就好。

路由

Vue Router

SPA(单页面应用程序)，所有的项目功能都在一个网页中完成，使用客户端路由插件实现跳转

npm i vue-router # 安装路由插件

使用

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRoutre) // 使用路由插件，以后可以在vue组件中使用路由内置的功能 
// router-view router-link
// $route $router

const router = new VueRouter({
    // 路由配置信息
    routes: [{
        path: '/', // 路径，就是url中访问的地址
        name: 'Home', // 名字
        component: ()=>import('./views/Home.vue') // 组件
    },
       // ...]
})

new Vue({
    router // router: router
})

• router-link

  生成链接，实现页面跳转。通过to属性设置

  to可以设置为字符串，就是跳转的网址

  也可以设置成对象

• router-view

  是路由对应的组件展示的位置

• 路由传参

  • query

    url地址传参，参数会写在url地址的后面，以?进行分割。页面刷新之后参数不会消失

  • params

    页面刷新之后参数会消失，如果想让参数在页面刷新之后还在，需要在路由中配置占位符

  路由中的参数信息可以通过内置对象$route进行获取

• $router

  实现编程式跳转

  • push

    是一个function,接收一个路径或者路由对象作为参数

    跳转之后会生成历史记录

  • replace

    不会生成历史记录

  • go

    实现前进或者回退

vuex

Vuex 是什么？ | Vuex

vuex就是vue中的一个状态管理插件，作用是在vue项目中实现数据的全局共享

单向数据流

数据是单向流动的。分为三部分：view(视图)、state(数据)、action(行为)。数据流向是在view视图中，通过dispatch派发一个action改变数据，state数据改变之后view视图重新渲染

vuex中的核心模块

• state

  用来存储数据

• actions

  用来做异步操作

  action中也能改变数据，但是不建议这样做。因为在vuex中，每一次的数据改变都是需要可以被追踪到的，所以数据都在mutation中进行改变

• mutations

  用来改变数据，所有的数据改变都在这里进行

  数据改变的时候可以被vuex开发者工具记录下来，被追踪到

• modules

  模块拆分，便于数据管理

• getters

  相当于计算属性

  

vuex中的数据流向：在组件中通过dispatch派发一个action，action中调接口取数据，数据获取之后提交一个mutation改变数据，数据改变之后组件重新渲染

使用

npm i vuex # 安装

工具库

vant组件库

它是vue中做移动端开发的一个ui组件库

Vant 3 - Lightweight Mobile UI Components built on Vue

端口映射插件

可以把本地的一个端口映射为外网服务器

Localtunnel ~ Expose yourself to the world

npm install -g localtunnel
lt --port 8080 --subdomain xxxx # 设置域名，通过subdomain

 在线制作favicon小图标

制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net

element-ui组件库

管理后台项目

GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template

vue打包优化

1. vue项目打包的时候如何做优化
2. 如何解决vue项目上线之后首页白屏问题

回答：

1. 使用路由懒加载的方式引入组件
2. 使用cdn的方式从外部引入第三方插件库
3. 代码压缩合并，开启服务器的GZIP压缩(一般都服务器管理人员做的)

webpack，是一个前端模块化构建工具

官方文档：webpack

---

自己做项目

Nuxt.js

是一个vue的服务器端多页面渲染开发框架,作用是解决单页面应用程序SEO优化问题，以及性能问题

Nuxt - The Intuitive Vue Framework (官网)

Nuxt.js - Vue.js 通用应用框架 | Nuxt.js 中文网

npx create-nuxt-app next-app-pre # 创建项目

 

 

如有不同见解，欢迎讨论，更多内容，正在更新中。。。。。。

Vue3快速上手指南，重点知识内容总结_旺旺大力包的博客-CSDN博客