![](https://img-blog.csdnimg.cn/20210807181243526.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue教程
文章平均质量分 58
循循渐进逐步深入Vue开发各个环节,掌握Vue常用功能,达到独立使用Vue框架前端开发,提升工程化编码能力和思维能力。
_否极泰来_
人是有命运的,文化属性和作用在不同人身上的自然规律决定了命和运,改变客观条件,才能改变命运。你是你自己的救世主!——遥远的救世主
展开
-
Vue 教程(四十九)Vuex 核心概念和项目结构
Vue 教程(四十九)Vuex 核心概念和项目结构Vuex 核心概念StateGettersMutationsActionsModulesState 单一状态树Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 ”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。new Vue({ // state data() {原创 2021-09-12 12:55:13 · 318 阅读 · 0 评论 -
Vue教程(四十八)Vuex 概念和基本使用
Vue教程(四十八)Vuex 概念和基本使用什么是VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。什么是状态管理模式把组件的共享状态抽取出来,以一个全局单例模式管理。在这种模式下,我们原创 2021-09-12 12:50:49 · 289 阅读 · 0 评论 -
Vue教程(四十七)Promise基本介绍与使用
Vue教程(四十七)Promise基本介绍与使用什么是PromisePromise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。原创 2021-09-12 12:46:07 · 6261 阅读 · 0 评论 -
Vue教程(四十六)keep-alive快速实现页面缓存
Vue教程(四十六)keep-alive快速实现页面缓存什么是keep-alive默认情况组件被重新渲染影响使用体验,或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到 keep-alive 组件。keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。keep-alive 的生命周期初次进入时:created > mounted > activated;退出后触发 deactivated 钩子函原创 2021-09-12 12:43:16 · 540 阅读 · 0 评论 -
Vue 教程(四十五)Vue 导航守卫
Vue 教程(四十五)Vue 导航守卫什么是导航守卫“导航”表示路由正在发生变化导航守卫表示当导航开始变化到导航变化结束的那段时间里,根据导航的变化做出一些响应。比如要跳转到一个页面时,看他是不是登录了,没登录的话,得让他先登录。主要是通过跳转到某处或者取消跳转来守卫导航。Vue Router 提供的导航Vue Router 提供的导航守卫主要用来监听监听路由的进入和离开的。Vue Router 提供了 beforeEach 和 afterEach 的钩子函数,它们会在路由即将改变前和改变后触发原创 2021-09-12 12:39:35 · 869 阅读 · 1 评论 -
Vue 教程(四十四)Vue-router 参数传递
Vue 教程(四十四)Vue-router 参数传递router 传递参数传递参数主要有两种类型:params、query。params 类型配置路由格式:/ router/id传递的方式:在 path 后面跟上对应的值传递后形成的路径:/ router/123,/ router/categoryId在【vuecli2\src\App.vue】中配置<template> <div id="app"> <!-- <router原创 2021-09-12 12:33:37 · 450 阅读 · 0 评论 -
Vue教程(四十三)路由嵌套
Vue教程(四十三)路由嵌套添加组件创建【components\News.vue】文件<template> <div id="news"> <h2>鸿雁新闻</h2> <p>如何查找商品?</p> <p>您可以通过在网站页头“搜索商品”处输入关键字的方法来搜索您想要购买的商品,在商品搜索处,内容栏输入关键字,点击“搜索”按钮,即可搜索出所有符合条件的商品。还可以通过网站的分类导航栏来找到原创 2021-08-24 23:44:16 · 237 阅读 · 1 评论 -
Vue教程(四十二)路由懒加载
Vue教程(四十二)路由懒加载路由懒加载当打包构建应用时, Javascript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了懒加载语法:component: () => import(’…/components/Home’)文件【vuecli2\src\router\index.js】内容:import VueRouter from 'vue-router'import Vue from 'vue原创 2021-08-24 23:39:11 · 559 阅读 · 0 评论 -
Vue教程(四十一)Vue-router路由初体验
Vue教程(四十一)Vue-router路由初体验什么是路由路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。前端路由前端路由是依靠hash值(锚链接)的变化进行实现,根据不同的事件来显示不同的页面内容,即事件与事件处理函数之间的对应关系前端路由主要做的事情就是监听事件并分发执行事件处理函数。后端路由后端路由是由服务器端进行实现,并完成资源的分发原创 2021-08-24 23:35:21 · 267 阅读 · 0 评论 -
Vue教程(四十)Runtime + Compiler和Runtime-only的区别
Vue教程(四十)Runtime + Compiler和Runtime-only的区别在使用vue-cli脚手架构建项目时,会遇到一个选项Vue build(vue构建),有两个选项,Runtime + Compiler和Runtime-onlyRuntime + CompilerRuntime + Compiler: recommended for most users运行时+编译器:推荐给大多数用户Runtime-onlyRuntime-only: about 6KB lighter m原创 2021-08-14 13:09:32 · 1374 阅读 · 0 评论 -
Vue教程(三十九)vue-cli2脚手架安装
Vue教程(三十九)vue-cli2脚手架安装Vue CLI介绍CI是 Command- Line interface,翻译为命令行界面,但是俗称脚手架。VueCL是一个官方发布 vue.js项目脚手架,使用vue-cli可以快速搭建vue开发环境以及对应的 webpacki配置。安装NodeJS可以直接在官方网站中下载安装:[http://nodejs.cn/donwload](http://nodejs.cn/donwload)检查p安装的版本,版本要求8.9以上或者更高的版本node原创 2021-08-14 12:56:13 · 601 阅读 · 0 评论 -
Vue 教程(三十八)配置文件环境分离
Vue 教程(三十八)配置文件环境分离修改配置文件在项目根目录下新建文件夹【build】,在该目录下新建三个文件分别为:【base.config.js】、【prod.config.js】【dev.config.js】base.config.js 内容如下:// 导入Node中path常量const path = require("path");const webpack = require("webpack");const HtmlWebpackPlugin = require("ht原创 2021-08-10 12:30:24 · 620 阅读 · 0 评论 -
Vue 教程(三十七)搭建本地服务器
Vue 教程(三十七)搭建本地服务器搭建本地服务器webpack 提供了一个可选的本地开发服务器,这个本地服务器基于 node.js 搭建,内部使用 express 框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。不过它是一个单独的模块,在 webpack 中使用之前需要先安装它。安装模块npm install --save-dev webpack-dev-server@2.9.3修改 webpack.config.js 文件// 导入Node中path常量原创 2021-08-10 12:30:09 · 1375 阅读 · 0 评论 -
Vue 教程(三十六)webpack 之代码混淆插件 Uglifyjs
Vue 教程(三十六)webpack 之代码混淆插件 UglifyjsUglifyjs 插件,可以对 js 等文件进行压缩安装插件npm install uglifyjs-webpack-plugin@1.1.1 --save-dev修改 webpack.config.js 文件// 导入Node中path常量const path = require("path");const webpack = require("webpack");const HtmlWebpackPlugi原创 2021-08-10 12:30:02 · 1910 阅读 · 0 评论 -
Vue 教程(三十五)webpack 之 HTML 插件
Vue 教程(三十五)webpack 之 HTML 插件HtmIWebpack 插件作用:将 index. htm 反文件打包到 dst 文件夹中,这个时候就可以使用 HtmIWebpack Plugin 插件自动生成—个 index. htm 文件可以指定模板来生成,将打包的 s 文件,自动通过 script 标签插入到 body 中安装 HtmIWebpack 插件npm install html-webpack-plugin@3.2.0 --save-dev修改【webpac原创 2021-08-10 12:29:55 · 302 阅读 · 0 评论 -
Vue 教程(三十四)webpack 之 BannerPlugin 插件
Vue 教程(三十四)webpack 之 BannerPlugin 插件plugin 是什么?plugin 是插件的意思,通常是用于对某个现有的架构进行扩展。webpack 中的插件,就是对 webpack 现有功能的各种扩展,比如打包优化,文件压缩等等。loader 和 plugin 区别loader 主要用于转换某些类型的模块,它是一个转换器。plugin 是插件,它是对 webpack 本身的扩展,是一个扩展器。plugin 的使用过程通过 npm 安装需要使用的原创 2021-08-10 12:29:48 · 807 阅读 · 0 评论 -
Vue 教程(三十三)引入.vue 文件
Vue 教程(三十三)引入.vue 文件在 src 目录下创建 vue 目录,在 vue 目录下创建 App.vue<template> <div> <h3 class="title">{{ title }}</h3> <span> <h4>编程语言</h4> <div>Python Java Android</div> <div原创 2021-08-10 12:29:40 · 5148 阅读 · 0 评论 -
Vue 教程(三十二)webpack 使用 vue 配置步骤
Vue 教程(三十二)webpack 使用 vue 配置步骤新建一个项目 vue安装本地 webpack初始化 npm配置 webpack.config.js 文件npm install webpack@3.6.0 --save-dev初始化 npmnpm init安装 vuenpm install vue@2.5.21 --save配置 webpack.config.js 文件// 导入Node中path常量const path = require("pat原创 2021-08-10 12:29:33 · 283 阅读 · 0 评论 -
Vue 教程(三十一)webpack-ES6 转 ES5 处理
Vue 教程(三十一)webpack-ES6 转 ES5 处理如果你仔细阅读 webpack 打包的 s 文件,发现写的 ES6 语法并没有转成 ES5,那么就意味着可能一些对 ES6 还不支持的浏览器没有办法很好的运行我们的代码。将 ES6 的语法转成 ES5,那么就需要使用 babel 的 loader在 webpack 中,我们直接使用 babe 对应的 Loader 就可以了。安装 babel 对应 loadernpm install --save-dev babel-loa原创 2021-08-10 12:29:19 · 3042 阅读 · 0 评论 -
Vue 教程(三十)webpack 图片文件处理
Vue 教程(三十)webpack 图片文件处理准备两张图片素材,在 webpack 项目新建 image 文件夹,将素材放置文件夹中下载安装 loader 命令:url-loader:npm install url-loader@1.1.2 --save-devfile-loader:npm install file-loader@3.0.1 --save-dev修改 index.html<!DOCTYPE html><html lang=原创 2021-08-09 10:15:48 · 428 阅读 · 0 评论 -
Vue 教程(二十九)webpack 使用 less 文件
Vue 教程(二十九)webpack 使用 less 文件什么是 LessLess 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。webpack 处理.less 文件编写.less 文件@charset "UTF-8";@fontSize: 30px;@fontColor: white;body { font-size: @fontSize; color原创 2021-08-09 10:15:19 · 1090 阅读 · 0 评论 -
Vue 教程(二十八)webpack 使用 css 文件
Vue 教程(二十八)webpack 使用 css 文件webpack 用来做什么? 主要是用 webpack 来处理我们写的 js 代码,并且 webpack 会自动处理 js 之间相关的依赖。 在开发中我们不仅仅有基本的 js 代码处理,我们也需要加载 cs、图片,也包括一些高级的将 ES6 转成 ES5 代码,将 TypeScript 转成 ES5 代码,将 sscs、less 转成 css,将 Jsx、.vue 文件转成 js 文件等等。 对于 webpack 本身的能力来说,对于这些原创 2021-08-09 10:14:54 · 210 阅读 · 0 评论 -
Vue 教程(二十七)webpack 配置文件 webpack.config.js
Vue 教程(二十七)webpack 配置文件 webpack.config.jsnpm 初始化webpack.config.js开发时依赖项目配置在项目根目录下新建 webpack.config.js 文件,配置文件中 path 属性,需要绝对路径,因此需要的初始化 npm 获得 node 中内置的 path 变量,以获得当前绝对路径,命令执行成功后,自动生成:package.json 文件npm 初始化:npm init## 包名meetpackage name: (webpac原创 2021-08-09 10:14:15 · 1749 阅读 · 0 评论 -
Vue 教程(二十六)webpack 基本使用
Vue 教程(二十六)webpack 基本使用vue 目标结构string-utils.js 文件math-utils.js 文件main.js 文件index.html 文件打包命令:webpack src/main.js dist/bundle.jsvue 目标结构 dist:用于存放之后打包的文件 src:用于存放我们写的源文件main.js:项目的入口文件math-utils.js:定义了一些数学工具函数,可以在其他地方引用,并且使用string-util原创 2021-08-09 10:14:01 · 112 阅读 · 0 评论 -
Vue 教程(二十五)webpack 安装
Vue 教程(二十五)webpack 安装模块(modules)在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块。每个模块具有比完整程序更小的接触面,使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的。Node.js 从最一开始就支持模块化编程。然而,在 web,模块化的支持正缓慢到来。在 web 存在多种支持 JavaScript 模块化的工具原创 2021-08-09 10:10:50 · 708 阅读 · 0 评论 -
Vue 教程(二十四)slot 作用域
Vue 教程(二十四)slot 作用域父组件通过 “slot-scope” 来接收子组件传过来的插槽数据,再根据插槽数据来填充插槽的内容代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name=原创 2021-08-09 10:10:36 · 264 阅读 · 0 评论 -
Vue 教程(二十三)slot 插槽
Vue 教程(二十三)slot 插槽标签默认值:(默认)图书内容在标签里通过 slot=“名称”,显示内容代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="原创 2021-08-09 10:10:14 · 94 阅读 · 0 评论 -
Vue 教程(二十二)$children、$ref 属性
Vue 教程(二十二)children、children、children、ref 属性要点模板属性 ref 可以根据名称获取元素代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo原创 2021-08-09 10:10:00 · 653 阅读 · 0 评论 -
Vue 教程(二十一)子组件传参父组件
Vue 教程(二十一)子组件传参父组件要点通过事件向父组件发送消息 this.$emit()代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=原创 2021-08-09 10:07:16 · 170 阅读 · 0 评论 -
Vue 教程(二十)父组件传参子组件
Vue 教程(二十)父组件传参子组件子组件传递数据通过 props 向子组件传递数据2.props 类型验证:代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport原创 2021-08-08 11:31:11 · 139 阅读 · 0 评论 -
Vue 教程(十九)计数组件
Vue 教程(十九)计数组件计数组件template 必须有根元素 div代码实现<!DOCTYPE html><html lang="en"><html><head> <meta charset="UTF-8"> <title>计数组件</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">原创 2021-08-08 11:28:55 · 327 阅读 · 0 评论 -
Vue 教程(十八)template 标签
Vue 教程(十八)template 标签template标签标签必须加 id使用模板时,需要的中横线代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w原创 2021-08-08 11:25:02 · 3575 阅读 · 0 评论 -
Vue 教程(十七)父子组件
Vue 教程(十七)父子组件父子组件父组件下挂载一个子组件,子组件下还可以有子子组件。代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi原创 2021-08-08 11:22:01 · 145 阅读 · 0 评论 -
Vue 教程(十六)局部组件
Vue 教程(十六)局部组件Vue.extendVue.extend():调用 Vue extend 创建的是一个组件构造器。通常在创建组件构造器时,传入 template 代表我们自定义组件的模板。代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="原创 2021-08-08 11:21:24 · 224 阅读 · 0 评论 -
Vue 教程(十五)全局组件
Vue 教程(十五)全局组件Vue 组件创建组件 Vue.extend()注册组件 Vue.component()在全局使用代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor原创 2021-08-08 11:19:35 · 184 阅读 · 0 评论 -
Vue 教程(十四)v-model 修饰符
Vue 教程(十四)v-model 修饰符v-model 修饰符v-model.lazy:默认情况下, v-model 獸默认是在 input 事件中同步输入框的数据的。也就是说,一旦有数据发生改变对应的 data 中的数据就会自动发生改变。v-model.number:默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符串类型进行处理。但是如果我们希望处理的是数字类型,那么最好直接将内容当做数字处理。number 修饰符可以让在输入框中输入的内容自动转成数字类型。v-mode原创 2021-08-08 11:10:41 · 540 阅读 · 0 评论 -
Vue教程(十三)html元素绑定
Vue教程(十三)html元素绑定代码实现<!DOCTYPE html><html lang="en"><html><head> <meta charset="UTF-8"> <title>html元素绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><原创 2021-08-08 10:48:37 · 837 阅读 · 0 评论 -
Vue教程(十二)购物车案例
Vue教程(十二)购物车案例代码实现<!DOCTYPE html><html lang="en"><html> <head> <meta charset="UTF-8"> <title>购物车案例</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scrip原创 2021-08-08 10:46:10 · 250 阅读 · 0 评论 -
Vue教程(十一)事件监听
Vue教程(十一)事件监听事件监听【.stop】 - 调用 event.stopPropagation()【.prevent】 - 调用 event.preventDefault()【.{keyCode | keyAlias}】 - 只当事件是从特定键触发时才触发回调【.native】 - 监听组件根无素的原生事件【.once】 - 只触发一次回调代码<!DOCTYPE html><html lang="en"> <head> <m原创 2021-08-08 10:43:23 · 425 阅读 · 0 评论 -
Vue教程(十) computed 计算属性
computed 计算属性computed计算属性只会计算一次,对于任何复杂逻辑,你都应当使用计算属性。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>10_computed_attribute</title> <script src="https://cdn.jsdelivr.net/npm/vue/.原创 2021-08-07 18:40:23 · 333 阅读 · 0 评论