![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue基础
jwz934738949
这个作者很懒,什么都没留下…
展开
-
Better-Scroll插件的使用
Better-Scroll基本使用Better-Scroll插件是一款实现滚动的插件,比原生滚动更加的流畅,功能更加的完善在引入Better-Scroll文件之后,使用**new BScroll()**实现插件的使用。有两个参数,第一个参数是实现Better-Scroll的标签,一般为div标签。第二个参数为对象类型,代表实现的一些额外功能注意的是,在实现Better-Scroll时,要将滚动的内容置于div标签中,对div标签实现插件的实现,才可以实现滚动的效果Better-Scorll属性原创 2020-08-19 08:52:45 · 261 阅读 · 0 评论 -
axios拦截器
axios拦截器是用来拦截请求与相应的,对请求与相应进行相关操作,然后将结果返回请求拦截器使用axios实例.interceptors.request.use() 函数,该函数有两个参数,这两个参数均为函数。第一个函数表示拦截成功时要执行的操作,第二个表示失败时执行的操作 // 请求拦截器 instance1.interceptors.request.use(config => { // 对request进行相关操作,返回请求config console.log(conf.原创 2020-08-14 10:47:51 · 705 阅读 · 0 评论 -
axios的实例与模块封装
axios的实例在项目中可能会出现发送多个数据, 而这些数据可能存在某些相同的配置,这种情况下需要使用axios的全局配置。但是,也有可能出现某些配置相同,而某些配置不相同,这时就需要使用axios的实例创建axios的实例时需要使用**axios.create()**函数,参数对对象类型,将配置相同的属性放入其中。当传递数据时调用实例对象,输入各自的属性即可// 创建axios实例对象const instance1 = axios.create({ baseURL: '127.0.0.1:原创 2020-08-14 10:22:21 · 487 阅读 · 0 评论 -
axios基本使用
axios的定义axios是基于promise的用于浏览器和nodejs的HTTP客户端。与ajax类似,都是用于处理网络请求,进行数据的发送与接收axios本身就是一个promise,可以使用promise语法,使用then函数来显示具体的操作axios的基本参数。axios的参数为对象,在对象中有url、method等参数。url代表要连接的url地址,method代表连接的方式,可以为get方法,也可以为post方法axios({ method: 'get', url: '/use原创 2020-08-13 11:42:44 · 512 阅读 · 0 评论 -
vuex-store的目录结构
在vuex中,所有的代码都放在了index.js文件中,这使得index.js文件过于复杂,不方便查找与修改,为了更好的管理项目,使用以下方法来进行简化在store文件夹中创建mutations.js、actions.js、getters.js分别用来存放mutations属性、actions属性与getters属性对于modules属性,创建modules文件夹,在modules文件夹中存放创建的modules属性在index.js文件中导入以上文件实现vuex项目mutations.jse.原创 2020-08-12 10:23:57 · 949 阅读 · 0 评论 -
vuex-actions与vuex-modules
vuex-actions在使用vuex时,有时需要使用异步操作,但是在mutations中是不支持异步操作的,这是就需要使用actions属性了actions属性的使用方法与mutations类似,都是形式为函数形式,不同的是actions属性的默认参数为context,还可以添加其他的参数,使用payload来表示,类型为对象类型 actions: { actUpdateInfo(context, payload) { setTimeout(() => {原创 2020-08-12 10:00:37 · 313 阅读 · 0 评论 -
mutations的类型常量
mutations的类型常量在使用mutations属性的过程中,在index.js文件中定义好mutations属性后,需要在组件中调用,使用this.$store.commit函数来调用,这种方法容易在调用mutations的函数时写错函数名使用类型常量来进行mutations属性的调用。在store文件夹中新建js文件,名字叫做mutations-types,用来存放将要在mutations中定义的函数名export const INCREMENT = 'increment'export原创 2020-08-11 17:30:26 · 397 阅读 · 0 评论 -
vuex-getters与vue-mutations
vuex-gettersgetters是vuex中的一个属性,主要作用于vue中的计算属性(computed)类似,用来存放一些经过修改的数值getters的基本用法与mutations类似,都是一个函数,函数的参数默认为state getters: { power(state) { return state.counter * state.counter; }在调用getters中的内容是使用 $store.getters.函数名进行调用作为函数参数使用时,原创 2020-08-10 18:48:53 · 2217 阅读 · 1 评论 -
vuex概念及基本使用
vuex概念Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extensionVuex包含三种状态:state,驱动应用的数据源;view,以声明方式将 state 映射到视图;actions,响应在 view 上的用户输入导致的状态变化如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成原创 2020-08-09 19:18:09 · 106 阅读 · 0 评论 -
keep-alive
keep-alive是Vue内置的一个组件,作用是使被包含的组件保留状态,避免被重新渲染生命周期函数created():当组件被创建时调用该生命周期函数destroyed():当组件被销毁时调用该生命周期函数activated():与created类似,创建组件时调用deactivated():与destroyed类似,销毁组件时调用当使用activated与deactivated时必须使用keep-alive标签将router-view包裹起来,这两个生命周期函数才可以产生效果 &原创 2020-08-03 08:59:09 · 95 阅读 · 0 评论 -
vue-router导航守卫
前置守卫前置守卫为全局导航守卫,导航守卫的功能是用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的在index.js文件中创建前置守卫beforeEach,其中beforeEach的参数为一个箭头函数,箭头函数的参数有to,from,next。to代表要跳转的地址,from 代表当前的地址,next为要调用的函数。在使用箭头函数时,必须调用next()函数router.beforeEach((to, from, next) => {原创 2020-08-02 12:00:32 · 87 阅读 · 0 评论 -
vue-router参数传递
方法一为了实现点击按钮实现参数的传递,在router-link中使用query属性来进行传递。首先创建一个新的组件Profile在index.js中导入该组件,并且调用该组件const Profile = () => import('../components/Profile') { path: '/profile', component: Profile }之后再App.vue中使用router-link来使用参数传递,对to进行绑定,传入对象,对象的内容为原创 2020-08-01 17:04:50 · 113 阅读 · 0 评论 -
路由的嵌套使用
路由的嵌套使用,指的就是在一个组件中嵌套使用一个组件,该组件是子组件首先创建子组件,并且在index.js文件中使用懒加载,导入该组件,并且在routes中的home组件中添加children属性,添加子组件const HomeNews = () => import('../components/HomeNews')const HomeMessage = () => import('../components/HomeMessage')需要注意的是,添加子组件时的path属性中不.原创 2020-07-27 18:49:50 · 303 阅读 · 0 评论 -
路由懒加载的使用
在一般项目中,对整个项目打包会使得js包很大,不利于页面加载。在页面加载时,会将所有的js加载完毕才会显示出页面来,这样会增加页面加载的时间使用懒加载来解决这一问题,只有当js代码需要使用时,才会去加载js代码,节省了页面加载的时间在导入组件时使用箭头函数实现懒加载// 通过懒加载方式实现导入组件,当使用组件时才会导入组件const Home = () => import('../components/Home')const About = () => import('../com.原创 2020-07-27 18:20:06 · 263 阅读 · 0 评论 -
动态路由的使用
在开发项目时,有时需要在点击链接之后,将用户相关信息显示在新的页面上,并且需要显示信息在url地址栏之中,这是就需要使用动态路由了首先,修改index.js文件中的routes属性,对path属性进行修改,添加要在地址栏中显示的属性,在显示属性前加入字符’:’ { // 只有获取到userId时才会显示该组件 path: '/user/:userId', component: User }之后修改App.vue中的相关属性,在router-link标签中对to属性.原创 2020-07-26 16:47:29 · 622 阅读 · 0 评论 -
vue-router的相关配置
路由的默认路径为页面添加默认值,当点击页面地址时会默认进入该默认值的页面。使用重定向(redirect)来进行{ path: '/', redirect: '/home' }修改路径为history模式默认情况下,页面的url地址为hash模式,在url地址中总是出现字符#,不方便观看,使用history模式来显示url地址在Router实例中添加属性mode,mode值为historyexport default new Router({ routes,原创 2020-07-26 10:13:53 · 117 阅读 · 0 评论 -
vue-router的安装与使用
vue-router安装使用vue脚手架创建项目,在是否使用路由器时选择yes,等待项目安装完毕在项目的src根目录中新增了一个文件夹,叫做router,在router文件夹中有一个index.js文件import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({原创 2020-07-26 09:06:18 · 150 阅读 · 0 评论 -
箭头函数使用与this的指向
箭头函数箭头函数与一般的函数一致,是对一般函数的简化,方便书写。格式为:(参数列表) => {};当参数列表中只存在一个参数时,可以将小括号省略当函数代码块中只存在一行代码时,可以不写大括号,直接将该行代码显示出来。同时,当函数存在返回值时,直接返回要返回的变量,不需要再写关键字return<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&原创 2020-07-24 21:52:41 · 99 阅读 · 0 评论 -
render函数
在创建Vue项目中,需要创建模板,对模板进行修改,修改之后,在Vue实例中进行使用,这种方法太过冗余复杂,使用render函数来解决这一问题render函数需要传入一个参数createElement,这是一个函数,用来创建HTML标签。创建完这个元素之后,将这个参数返回,就直接可以修改template中的HTML元素了createElement函数有三个参数,第一个参数为标签名称(例如h2),第二个参数为标签的属性,为对象类型(例如class、name等),第三个参数为数组形式,用来存放标签的具体内容.原创 2020-07-24 10:28:05 · 116 阅读 · 0 评论 -
vuecli脚手架的安装与脚手架创建项目
vuecli安装安装最新版本脚手架,进入终端输入命令:npm install -g @vue/cli由于vuecli3.0之后与2.0产生了较大的变化,如果想要使用2.0版本的模板的话,需要使用2.0版本的“vue init”,输入命令:npm install -g @vue/cli-init在终端中输入vue --version,显示脚手架的版本信息,判断脚手架是否安装成功vuecli创建项目前往要创建项目的文件夹目录下,输入命令:vue init webpack 项目名称,等待一段时间后原创 2020-07-22 14:57:31 · 168 阅读 · 0 评论 -
webpack搭建本地服务器
在webpack之前的项目中,每修改一次项目,都需要进行打包之后,才能在页面上显示出来,使用本地服务器可以解决这个问题webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果安装webpack-dev-server,输入命令:npm install --save-dev webpack-dev-server@2.9.1。之后在webpack.config.js文件的module.exports.原创 2020-07-21 21:21:22 · 674 阅读 · 0 评论 -
webpack插件的配置
添加版权插件在webpack.config.js文件中添加webpack包,之后在module.exports属性中添加plugins,添加版权插件// 添加webpackconst webpack = require('webpack'); // 添加插件 plugins: [ // 添加版权的插件 new webpack.BannerPlugin('最终版权归12345所有') ]对项目进行打包后,在dist文件夹中的bundle.js文件中出现新添加的版权原创 2020-07-21 18:26:17 · 560 阅读 · 1 评论 -
webpack配置Vue组件
为了实现模块化开发,减少代码的耦合性,不能在一个文件中设置template,应该使用组件来实现模板的功能在src根目录中新增vue文件夹,创建Vue Component文件,代表Vue组件文件。在文件中分三个标签,template、script、style scoped三个标签。其中,template存放模板内容,script存放js代码,style存放样式代码<template> <div> <h2 class="title">{{title}}&l.原创 2020-07-21 16:55:49 · 152 阅读 · 0 评论 -
webpack使用Vue配置
安装Vue,输入命令:npm install vue --save,进行Vue的安装安装完毕之后,在js文件中引用Vueimport Vue from 'vue';new Vue({ el: '#app', data: { message: '你好,webpack配置Vue成功!!' }})但是通过这种方式,无法在页面上显示,提示出现错误,原因是引入了错误的vue文件修改webpack.config.js文件,在exports中添加reslove属性 // .原创 2020-07-21 10:04:29 · 122 阅读 · 0 评论 -
webpack使用图片配置
在webpack中加载图片时,需要知道图片的大小。在加载图片之前,在src文件夹下创建img文件夹用来存放图片将图片导入img文件夹下之后,安装url-loader,命令为:npm install --save-dev url-loader,之后在webpack.config.js文件的rules中添加以下内容// 导入图片 { test: /\.(png|jpg|gif|jpeg)$/, use: [ { lo.原创 2020-07-20 16:08:38 · 988 阅读 · 0 评论 -
webpack使用Less文件的配置
Less文件也是一种样式文件,与CSS文件类似,使用时也需要对webpack进行配置。配置步骤如下:在css文件夹中创建special.less文件,修改字体大小与字体颜色//定义变量@fontSize: 40px;@fontColor: white;body { font-size: @fontSize; color: @fontColor;}在js入口文件中引用less文件,并且在页面上显示内容require('./css/special.less');docume原创 2020-07-20 10:19:44 · 6473 阅读 · 0 评论 -
webpack使用CSS文件
在实际开发项目过程中,CSS文件用于修改页面的样式,如何使用webpack来对CSS文件进行打包,以下是使用CSS文件进行打包的步骤首先按照如图所示,创建项目目录结构其中normal.css文件表示要打包的CSS文件。首先在终端中安装style-loader与css-loader,命令为:npm install style-loader --save-dev、npm install css-loader --save-dev安装完成之后,进入main.js文件中,引入normal.css文件r原创 2020-07-20 09:46:45 · 226 阅读 · 0 评论 -
webpack.config.js与package.json配置
webpack.config.js为了使用webpack.config.js文件来进行打包,首先创建该文件,使用commonJS方法来进行打包使用module.exports来导出入口文件路径与出口文件路径,分别使用entry与output代表使用output时,需要使用path属性,输入出口文件的绝对路径,使用node语法来获取。使用filename属性,输入出口文件的文件名在使用node语法前,首先要初始化node,在终端中输入命令:npm init -y动态获取项目的路径,使用requir原创 2020-07-19 19:04:27 · 1362 阅读 · 0 评论 -
webpack的介绍与使用
webpack介绍webpack是将javascript文件的静态模块打包工具。使用webpack可以让我们进行模块化开发webpack可以打包javascript文件、css文件、图片、json文件等webpack的安装使用webpack必须安装node环境,前往node.js官网(https://nodejs.org/en/),下载LST版本;下载webpack 3.6.0版本。进入cmd命令行模式,输入命令npm install webpack@3.6.0 -g;安装完毕后输入命令:原创 2020-07-19 16:03:51 · 152 阅读 · 0 评论 -
ES模块化的导入和导出
export导出在使用导入与导出时,需要在引用js文件时添加type属性,type值为module<script src="test1.js" type="module"></script><script src="test2.js" type="module"></script>导出对象:使用export {} 来导出对象,大括号中填写要导出的变量名称var flag = true;function sum(num1, num2) {原创 2020-07-18 16:42:38 · 688 阅读 · 0 评论 -
作用域插槽
作用域插槽指的是父组件去替换插槽中的标签,而插槽中的内容由子组件显示。就是说,在父组件中以不同的标签以及形式显示子组件中的内容。首先在slot标签中绑定某一属性,该属性的值即为要传递的数据。在本例中,要传递movies数组,所以在slot中绑定的data属性的值为movies。在父组件中使用模板来调用传递的数据,添加v-slot指令,值为自定义的字符串。使用字符串.绑定的属性名,得到传递的数据对象,之后再进行相应的操作。<!DOCTYPE html><html lang="en.原创 2020-07-17 11:55:03 · 775 阅读 · 0 评论 -
slot插槽
slot插槽当一个项目中需要使用多个组件时,而这些组件需要添加不同的内容时,不能够直接向组件标签添加内容,而是使用slot插槽。在模板中添加<slot></slot>来实现向组件中添加不同的内容。在使用插槽时,如果在插槽中添加内容的话,代表添加的内容为默认值。在使用组件时,不添加内容的话,会显示插槽中的默认值;添加内容后,会将默认值替换为添加的内容。<!DOCTYPE html><html lang="en"><head> <原创 2020-07-16 16:50:54 · 111 阅读 · 0 评论 -
父子组件间的访问
为了实现父子组件之间的访问,即父组件访问子组件中的方法与属性,子组件访问父组件的方法与属性,使用以下操作实现父子组件之间的访问。$chidren使用$children来实现父组件访问子组件,返回结果为VueComponent,数组类型。当访问子组件的属性时,需要添加第几个组件的属性。console.log(this.$children);console.log(this.$children[0].name);$refs当有多个子组件时,想要获取某个特定的子组件的值时,需要使用$refs来实原创 2020-07-16 11:03:31 · 146 阅读 · 0 评论 -
父子组件双向绑定实例
为了实现父组件传值给子组件的同时,修改子组件的值之后,再传递给父组件,实现父子组件值的相互影响。使用双向绑定来实现该功能。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父子组件双向绑定</title></head><body><div id="app"> <!-- 实现父子组件之间原创 2020-07-15 11:22:26 · 431 阅读 · 0 评论 -
子传父组件
在项目开发中,有时会使用子组件中的属性传入父组件中,为了实现这个操作,需要使用$emit()函数,具体步骤如下:在子组件的methods方法中使用this.$emit('自定义函数名', item),将item属性发射出去,让父组件去接受; 在父组件中调用子组件,其中使用v-on与之前自定义函数相关联,并且将自定义函数的值传入父组件的函数中,例如:<cpn @item-click="cpnClick"></cpn>.其中cpnClick虽然没有参数,但是会默认将之前的item原创 2020-07-14 16:55:06 · 342 阅读 · 0 评论 -
父子组件通信——父传子props
在父组件与子组件中,为了实现父子组件之间的通信,需要使用props,来实现父组件中的内容被子组件所使用。在子组件中使用props来进行与父组件之间的通信。 在使用组件时通过绑定props中定义的变量与父组件中的属性,实现父组件的属性传递到子组件,子组件就可以使用父组件的属性了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父传子组件pro原创 2020-07-12 16:01:50 · 950 阅读 · 0 评论 -
组件模板抽离写法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件模板抽离写法</title></head><body><div id="app"> <cpn></cpn></div><!--script标签实现模板分离--><!--<sc.原创 2020-07-11 09:13:06 · 271 阅读 · 1 评论 -
父组件与子组件
当一个组件中使用另一个组件的内容时,这个组件就被称为父组件,而被使用的组件就称为子组件。使用子组件时,要在构造器中新建一个components属性,添加子组件相关的信息,便可以在父组件中使用子组件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父组件与子组件</title></head><body>原创 2020-07-10 17:09:59 · 2092 阅读 · 0 评论 -
全局组件与局部组件
全局组件指的是在注册组件之后,不管任何div都可以使用该组件,使用Vue.component()来实现全局组件的注册。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全局组件与局部组件</title></head><body><div id="app"> <my-cpn>&l原创 2020-07-10 16:23:37 · 430 阅读 · 0 评论 -
组件化的基本使用
组件是可复用的 Vue 实例,且带有一个名字。因为组件是可复用的 Vue 实例,所以它们与new Vue接收相同的选项,例如data、computed、watch、methods以及生命周期钩子等。组件可以进行复用,为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型:全局注册和局部注册。至此,我们的组件都只是通过Vue.component全局注册的。创建组件的过程:创建组件构造器——Vue.extend() 注册组件——Vue.component() ...原创 2020-07-10 11:41:50 · 129 阅读 · 0 评论