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

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

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

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

模板语法

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

事件绑定

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

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

最常使用的两个事件是:

属性绑定

使用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 销毁完成

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

46fda631fc0c46c5869bf186ade39ee5.png

嵌套组件的生命周期

 

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

动态组件

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视图重新渲染

3b38c041d1efbec54a35a402a8e58a97.png

vuex中的核心模块

  • state

    用来存储数据

  • actions

    用来做异步操作

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

  • mutations

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

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

  • modules

    模块拆分,便于数据管理

  • getters

    相当于计算属性

    231628d6a5623678ef46ef471bbd3193.png

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博客

 

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旺旺大力包

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值