vue学习笔记
文章平均质量分 75
new nm个对象
人生漫漫,吾将上下而求索
展开
-
VUE学习笔记:29.脚手架vue-cli之axios
一.什么是axiosaxios是一个用于网络通信的模块。在项目实际开发过程中,前端会频繁的请求后端接口获取到相关数据,然后展示在界面上。二.安装axios第一步:进入项目目录npm install axios --save第二步:使用axiosimport Vue from 'vue'import App from './App.vue'import store from './store/index.js'Vue.config.productionTip = falsenew原创 2021-10-23 23:51:11 · 459 阅读 · 0 评论 -
VUE学习笔记:28.脚手架vue-cli之vuex
一.什么是vuex二.单页面状态管理和多页面状态管理三.vuex的安装vuex是一个独立的插件,需要单独安装。第一步:进入项目目录下执行npm install vuex --save第二步:创建vuex对象创建一个目录store,用于存放vuex相关的代码*在store目录下创建index.js文件,并实例化一个vuex对象/** * Created by Administrator on 2021/10/22. */import Vue from 'vue'impo原创 2021-10-23 16:06:35 · 325 阅读 · 0 评论 -
VUE学习笔记:27.脚手架vue-cli之promise
一.什么是Promise二.Promise的使用1.基本使用(1)不使用Promise我们使用定时器setTimeout来模拟异步操作,看看Promise的作用。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script>原创 2021-10-21 22:15:15 · 307 阅读 · 0 评论 -
VUE学习笔记:26.脚手架vue-cli之路由vue-router
1.什么是路由原创 2021-08-02 20:11:53 · 841 阅读 · 0 评论 -
VUE学习笔记:25.脚手架vue-cli之箭头函数
在vue cli3中会经常使用到箭头函数形式,所以我们需要了解一下箭头函数的使用。1.箭头函数的基本使用js中定义函数有很多种方式:常规定义:const aaa = function(参数1,参数2,...){ 代码块;}箭头函数定义:const aaa = (参数1,参数2,...) => { 代码块;}注意:箭头函数定义时还有两个特殊的地方:当参数只有一个时,可以不加()const aaa = 参数1 => { 代码块;}当代码块只有一行代码时,且为r原创 2021-06-27 17:59:33 · 218 阅读 · 0 评论 -
VUE学习笔记:24.脚手架vue-cli之vue cli3初始化项目及其相关选项
1.vue cli3初始化项目命令:vue create 项目名称在初始化项目时会有许多选项供我们选择,如下:Please pick a preset:请选择配置。该选项有两个选择:1.default(默认的);2.Manually select feature(手动选择)。如果使用手动选择则可以手动选择以下配置项(空格选择配置项,回车提交选择)Where do you prefer placing config for Babel, ESLint, etc.?:你的Babel, ESL.原创 2021-06-27 17:20:28 · 1059 阅读 · 0 评论 -
VUE学习笔记:23.脚手架vue-cli之简介,安装及vue cli2初始化项目及其相关选项
1.什么是vue-cli如果我们使用webpack来管理项目,那么需要手动搭建,配置大量的东西。例如:打包css,js,html以及各种插件等等,会显得非常麻烦。而使用vue-cli框架可以自动生成对应的开发环境及配置,大大提高我们的开发效率。2.安装vue-cli第一步:安装node:https://nodejs.org/zh-cn/当执行以下命令成功时,表示安装完成。第二步:安装淘宝镜像(类似于阿里云的maven中央仓库镜像)# 安装npm install -g cnpm --re原创 2021-06-25 22:08:13 · 303 阅读 · 1 评论 -
VUE学习笔记:22.模块化开发之webpack搭建本地服务器
1.webpack搭建本地服务器步骤:第一步:安装依赖包webpack-dev-servernpm install webpack-dev-server@2.9.3 --save-dev第二步:在webpack的配置文件webpack.config.json中设置开发服务器dev-server的使用let path = require('path') //导入path模块let webpack = require('webpack')let HtmlWebpackPlugin =原创 2021-06-23 20:32:06 · 145 阅读 · 1 评论 -
VUE学习笔记:21.模块化开发之webpack插件使用
1.认识plugin2.使用BannerPlugin给打包后的文件添加版权声明因为BannerPlugin插件是webpack的内置插件,所以不需要额外安装。直接在webpack的配置文件webpack.config.json文件中使用即可。let path = require('path') //导入path模块let webpack = require('webpack')module.exports = { entry: './src/main.js', output: { //原创 2021-06-20 13:04:36 · 216 阅读 · 0 评论 -
VUE学习笔记:20.模块化开发之webpack结合VUE使用
1.webpack使用vue的配置过程我们在之前讲解vue的案例中,都是在html页面使用<script src="xxx/vue.js"></script>方式来导入vuejs的。但实际的项目开发中,我们往往不会使用这种方式,而是在npm中安装vue包来引入vuejs。(1)前期准备**第一步:使用npm安装vuenpm install vue@2.5.21 --save# 注意因为我们在打包后的文件中仍需要使用vue,所以这里不能使用-dev参数。因为加上dev参数表原创 2021-06-18 22:18:16 · 218 阅读 · 1 评论 -
VUE学习笔记:19.模块化开发之webpack处理ES6语法
1.使用webpack处理ES6语法我们在开发过程中,经常会使用ES6语法来编写js文件。但是一些浏览器并不支持ES6语法的js语句。所以我们需要使用webpack在打包js文件时将ES6语法转化为ES5语法。(1)前期准备第一步:安装loader及依赖的npm包安装babel-loadernpm install babel-loader@7.1.5 --save-dev安装babel-corenpm install babel-core@6.26.3 --save-dev安装原创 2021-06-17 22:20:20 · 748 阅读 · 1 评论 -
VUE学习笔记:18.模块化开发之webpack打包图片文件
1.webpack打包图片文件步骤(1)前期准备第一步:安装loader安装file-loadernpm install file-loader@3.0.1 --save-dev安装url-loadernpm install url-loader@1.1.2 --save-dev第二步:在webpack的配置文件webpack.config.js中配置loaderlet path = require('path') //导入path模块module.exports = {原创 2021-06-16 22:19:53 · 515 阅读 · 4 评论 -
VUE学习笔记:17.模块化开发之webpack打包less文件
1.使用webpack打包less文件步骤实际上在项目中,常用的样式文件不是css,而是使用less、scss或者stylus等来定义样式。那么如果要对这些文件打包应该如何处理呢?我们以打包less文件为例:(1)前期准备第一步:安装loader安装lessless是npm的第三方包,如果要把less文件转化为css文件,需要依赖less包。npm install less@3.9.0 --save-dev安装less-loaderless-loader:用于使用webpack.原创 2021-06-16 20:40:14 · 827 阅读 · 0 评论 -
VUE学习笔记:16.模块化开发之webpack打包css文件
1.webpack打包css文件步骤(1)前期准备第一步:安装loaderwebpack本身是不具备打包CSS文件的能力。如果我们需要所以webpack打包css文件,需要借助webpack拓展对应的loader。webpack处理css文件需要安装以下两个loader:安装css-loader:css-loader主要用于加载css文件。npm install css-loader@3.0.0 --save-dev安装style-loader:style-loader用于将css文件原创 2021-06-15 22:44:46 · 347 阅读 · 1 评论 -
VUE学习笔记:15.模块化开发之webpack使用配置文件打包
1.webpack使用配置文件打包我们前面讲的webpack打包命令webpack 待打包的文件 打包后的文件是以参数的形式来指定打包的入口文件和出口文件,这种方式不够灵活。在项目中我们更常用的方法是:将打包的相关信息写在配置文件中。webpack的配置文件为:webpack.config.js文件。(1)基本实现使用配置文件打包还是以前面的案例来进行讲解:新建webpack.config.js文件如下:module.exports = { entry: './src/main.js', /原创 2021-06-13 18:53:27 · 765 阅读 · 1 评论 -
VUE学习笔记:14.模块化开发之webpack简介,安装及基本使用
1.什么是webpack2.webpack安装webpack要运行需要依赖于node环境,所有我们需要先安装node。如何使用node中的包管理根据npm来安装webpack第一步:安装node:https://nodejs.org/zh-cn/当执行以下命令成功时,表示安装完成。第二步:更改镜像源地址为淘宝镜像(类似于阿里云的maven中央仓库镜像)# 安装npm install -g cnpm --registry=https://registry.npm.taobao.org原创 2021-06-13 16:40:50 · 148 阅读 · 1 评论 -
VUE学习笔记:13.模块化开发之:为什么需要模块化,CommonJS,ES6中的模块化(了解)
1.前端代码复杂带来的问题2.CommonJS(了解)3.es6中的模块化(1)导出(2)导入原创 2021-06-12 22:40:39 · 293 阅读 · 1 评论 -
VUE学习笔记:12.组件化之:slot组件插槽讲解
1.为什么需要使用slot我们自定义的组件往往需要在很多不同的页面中使用。而且在不同的页面中使用时,组件也不是一成不变的,而是同一组件在不同地方使用时展示的内容也稍有不同。要实现以上需求就不能在定义组件时把展示的内容写死,而是在组件中定义出插槽。当我们在使用组件再决定组件具体需要展示哪些内容。一般在定义组件时,我们将共性的内容写死在组件中。而可能改变的内容封装为插槽。2.slot的基本使用在定义子组件时,将不确定的内容抽取为slot。<template id="script_tem原创 2021-06-12 20:58:04 · 2064 阅读 · 5 评论 -
VUE学习笔记:11.组件化之:父子组件的访问方式
1.父子组件的访问2.父组件访问子组件对象(1)$children方式父组件中可以所有$children来获取所有子组件的对象,返回的是一个数组。通过子组件对象可以获取到子组件的数据,方法等所有东西。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body>原创 2021-06-12 00:12:13 · 167 阅读 · 4 评论 -
VUE学习笔记:10.组件化之:组件中数据的传递
1.组件中的数据存放案例:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div id="app1"> <!--使用组件--> <mycpnc></mycpnc></div><原创 2021-06-11 20:41:56 · 318 阅读 · 1 评论 -
VUE学习笔记:9.组件化之:组件注册语法糖写法及组件模板抽离
1.组件注册语法糖写法之前我们讲解的注册使用组件的方式需要三步:创建组件构造器:let 构造器名字 = Vue.extend({ template:'模板内容'})注册组件Vue.component('组件标签名',组件构造器)使用组件<!--注意,组件也需要在vue实例的挂载点中使用,才能生效--><div id="xxx"> <组件标签名></组件标签名></div>而使用语法糖的形式可以讲创建组件原创 2021-06-09 20:16:00 · 494 阅读 · 1 评论 -
VUE学习笔记:8.vue组件化之概述,基本使用,全局组件与局部组件概念,父组件与子组件的概念
1.什么是组件化开发(1)组件化思想(2)vue组件化思想现在前端的开发潮流是组件化开发。组件也可以简单理解为自定义的标签。将一些前端内容的HTML,CSS,JS等设置好,一起放入一个组件中来维护。组件就是可复用的vue实例,项目实际开发中一般在.vue的文件中维护组件一个页面可以使用几个组件来拼装出来,每个组件中还可以嵌套其他组件(3)注册使用组件的步骤2.组件化的基本使用过程组件的使用过程分为三步:创建组件构造器:let 构造器名字 = Vue.extend({ temp原创 2021-06-08 23:29:39 · 363 阅读 · 4 评论 -
VUE学习笔记:7.v-model指令讲解
1.v-model介绍v-model主要用来操作input标签,实现标签与数据的双向绑定双向绑定:即改变vue中数据的值会导致input标签中的值改变,同理改变input标签中的值来也会导致vue中数据的值改变。能双向绑定的input标签包括:text格式,select格式和textarea格式,radio格式,checkbox格式等2.v-model的基本使用格式如下:<input type="text" v-model="message"/># 将input标签与数据me原创 2021-06-07 21:54:15 · 777 阅读 · 2 评论 -
VUE学习笔记:6.阶段练习之购物车案例讲解
1.需求讲解我们不仅要实现上面的页面,还要实现以下功能:实现购买数量的增减,且数量为1时-按钮不可点击。实现移除操作:点击移除按钮,对应书籍从购物车中移除。当所有书籍全部移除时,界面显示文字购物车为空总价为各书籍价格*购买数量之和2.页面基本搭建我们先创建3个文件index.html,style.css,main.js来分别存放我们的HTML,CSS,JS代码。先在main.js文件中,实例化一个vue,并增加书籍数据对象。let vm = new Vue({ el: "#app"原创 2021-06-06 21:54:56 · 768 阅读 · 3 评论 -
VUE学习笔记:5.vue中判断指令,v-show及v-for的使用
一.vue中的判断指令1.判断指令的使用vue中的判断指令使用v-if="true/false",v-else-if="true/false",v-else来完成。其中v-if和v-else-if后面跟的表达式或者变量值必须为布尔类型。当条件判断不满足时,页面不会加载对应的标签及子标签。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title&原创 2021-06-06 17:59:51 · 4661 阅读 · 3 评论 -
VUE学习笔记:4.vue的计算属性和v-on绑定监听事件
一.计算属性1.什么是计算属性2.计算属性的基本使用<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div id="app"> <!--可以像使用data中的数据一样,获取计算属性中的数据内容--> <h2原创 2021-06-05 23:54:35 · 470 阅读 · 2 评论 -
VUE学习笔记:3.vue的插值操作及v-bind绑定属性
一.插值操作插值操作就是讲vue实例中的数据渲染到HTML页面中。1.mustache语法mustache语法是在HTML页面中,需要使用vue数据的地方使用{{key}}的方式来获取vue中的数据的值。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body>原创 2021-06-05 17:46:37 · 737 阅读 · 3 评论 -
VUE学习笔记:2.vue的选项(options)及生命周期
1.vue对象的常见选项(options)我们在实例化一个Vue对象后,会使用它的选项。如:el,data等。详细的讲解,参考文档:https://cn.vuejs.org/v2/api/#search-query-nav我们目前需要掌握以下几个选项:2.vue的生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的原创 2021-06-04 23:14:21 · 679 阅读 · 0 评论 -
VUE学习笔记:1.初识vue.js
1.什么是vue.jsvue的官方网站:https://cn.vuejs.org/v2/guide/2.安装vue.js方式一:CDN引入<!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本,优化了尺寸和速度 --><script src="https://cdn.jsdel原创 2021-06-04 22:24:35 · 244 阅读 · 1 评论