2020年07月_jwz934738949

原创路由的嵌套使用

路由的嵌套使用，指的就是在一个组件中嵌套使用一个组件，该组件是子组件首先创建子组件，并且在index.js文件中使用懒加载，导入该组件，并且在routes中的home组件中添加children属性，添加子组件const HomeNews = () => import('../components/HomeNews')const HomeMessage = () => import('../components/HomeMessage')需要注意的是，添加子组件时的path属性中不.

2020-07-27 18:49:50 311

原创路由懒加载的使用

在一般项目中，对整个项目打包会使得js包很大，不利于页面加载。在页面加载时，会将所有的js加载完毕才会显示出页面来，这样会增加页面加载的时间使用懒加载来解决这一问题，只有当js代码需要使用时，才会去加载js代码，节省了页面加载的时间在导入组件时使用箭头函数实现懒加载// 通过懒加载方式实现导入组件,当使用组件时才会导入组件const Home = () => import('../components/Home')const About = () => import('../com.

2020-07-27 18:20:06 276

原创动态路由的使用

在开发项目时，有时需要在点击链接之后，将用户相关信息显示在新的页面上，并且需要显示信息在url地址栏之中，这是就需要使用动态路由了首先，修改index.js文件中的routes属性，对path属性进行修改，添加要在地址栏中显示的属性，在显示属性前加入字符’:’ { // 只有获取到userId时才会显示该组件 path: '/user/:userId', component: User }之后修改App.vue中的相关属性，在router-link标签中对to属性.

2020-07-26 16:47:29 634

原创 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 124

原创 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 165

原创箭头函数使用与this的指向

箭头函数箭头函数与一般的函数一致，是对一般函数的简化，方便书写。格式为：(参数列表) => {};当参数列表中只存在一个参数时，可以将小括号省略当函数代码块中只存在一行代码时，可以不写大括号，直接将该行代码显示出来。同时，当函数存在返回值时，直接返回要返回的变量，不需要再写关键字return<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&

2020-07-24 21:52:41 109

原创 render函数

在创建Vue项目中，需要创建模板，对模板进行修改，修改之后，在Vue实例中进行使用，这种方法太过冗余复杂，使用render函数来解决这一问题render函数需要传入一个参数createElement，这是一个函数，用来创建HTML标签。创建完这个元素之后，将这个参数返回，就直接可以修改template中的HTML元素了createElement函数有三个参数，第一个参数为标签名称（例如h2），第二个参数为标签的属性，为对象类型（例如class、name等），第三个参数为数组形式，用来存放标签的具体内容.

2020-07-24 10:28:05 127

原创 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 173

原创 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 689

原创 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 589 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 162

原创 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 131

原创 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 1018

原创 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 6513

原创 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 238

原创 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 1372

原创 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 172

原创 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 699

原创作用域插槽

作用域插槽指的是父组件去替换插槽中的标签，而插槽中的内容由子组件显示。就是说，在父组件中以不同的标签以及形式显示子组件中的内容。首先在slot标签中绑定某一属性，该属性的值即为要传递的数据。在本例中，要传递movies数组，所以在slot中绑定的data属性的值为movies。在父组件中使用模板来调用传递的数据，添加v-slot指令，值为自定义的字符串。使用字符串.绑定的属性名，得到传递的数据对象，之后再进行相应的操作。<!DOCTYPE html><html lang="en.

2020-07-17 11:55:03 793

原创 slot插槽

slot插槽当一个项目中需要使用多个组件时，而这些组件需要添加不同的内容时，不能够直接向组件标签添加内容，而是使用slot插槽。在模板中添加<slot></slot>来实现向组件中添加不同的内容。在使用插槽时，如果在插槽中添加内容的话，代表添加的内容为默认值。在使用组件时，不添加内容的话，会显示插槽中的默认值；添加内容后，会将默认值替换为添加的内容。<!DOCTYPE html><html lang="en"><head> &lt

2020-07-16 16:50:54 120

原创父子组件间的访问

为了实现父子组件之间的访问，即父组件访问子组件中的方法与属性，子组件访问父组件的方法与属性，使用以下操作实现父子组件之间的访问。$chidren使用$children来实现父组件访问子组件,返回结果为VueComponent，数组类型。当访问子组件的属性时，需要添加第几个组件的属性。console.log(this.$children);console.log(this.$children[0].name);$refs当有多个子组件时，想要获取某个特定的子组件的值时，需要使用$refs来实

2020-07-16 11:03:31 154

原创父子组件双向绑定实例

为了实现父组件传值给子组件的同时，修改子组件的值之后，再传递给父组件，实现父子组件值的相互影响。使用双向绑定来实现该功能。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父子组件双向绑定</title></head><body><div id="app"> <!-- 实现父子组件之间

2020-07-15 11:22:26 440

原创子传父组件

在项目开发中，有时会使用子组件中的属性传入父组件中，为了实现这个操作，需要使用$emit()函数，具体步骤如下：在子组件的methods方法中使用this.$emit('自定义函数名', item)，将item属性发射出去，让父组件去接受; 在父组件中调用子组件，其中使用v-on与之前自定义函数相关联，并且将自定义函数的值传入父组件的函数中，例如：<cpn @item-click="cpnClick"></cpn>.其中cpnClick虽然没有参数，但是会默认将之前的item

2020-07-14 16:55:06 355

原创父子组件通信——父传子props

在父组件与子组件中，为了实现父子组件之间的通信，需要使用props，来实现父组件中的内容被子组件所使用。在子组件中使用props来进行与父组件之间的通信。在使用组件时通过绑定props中定义的变量与父组件中的属性，实现父组件的属性传递到子组件，子组件就可以使用父组件的属性了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父传子组件pro

2020-07-12 16:01:50 964

原创组件模板抽离写法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件模板抽离写法</title></head><body><div id="app"> <cpn></cpn></div><!--<sc.

2020-07-11 09:13:06 279 1

原创父组件与子组件

当一个组件中使用另一个组件的内容时，这个组件就被称为父组件，而被使用的组件就称为子组件。使用子组件时，要在构造器中新建一个components属性，添加子组件相关的信息，便可以在父组件中使用子组件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父组件与子组件</title></head><body>

2020-07-10 17:09:59 2121

原创全局组件与局部组件

全局组件指的是在注册组件之后，不管任何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 433

原创组件化的基本使用

组件是可复用的 Vue 实例，且带有一个名字。因为组件是可复用的 Vue 实例，所以它们与new Vue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等。组件可以进行复用，为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过Vue.component全局注册的。创建组件的过程：创建组件构造器——Vue.extend() 注册组件——Vue.component() ...

2020-07-10 11:41:50 136

原创 v-model的修饰符

1、lazy修饰符当用户使用v-model之后，用户每次修改输入内容，都会将后台的数据同时绑定，为了避免这种情况的发生，使用lazy修饰符来进行限定。只有当用户的input中失去焦点或者用户点击回车按钮时，才会将后台的数据进行修改。 <input type="text" v-model.lazy="message"> <h2>用户输入的内容： {{me

2020-07-10 09:40:01 6036 1

原创 input的值绑定

在定义input标签时，value值不是确定的值，而是一个动态变化的值，需要用户或者是从网络中获取的，所以使用动态的值绑定来给input的value属性绑定值。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>input的值绑定</title></head><body><div id="app"&g

2020-07-10 08:59:37 4803

原创 v-model

1、v-model原理v-model代表双向绑定，就是说改变前端的数据会影响到后端的数据，改变后端的数据也会改变前端的显示。<input type="text" v-model="message">实际上是由两个命令组成的，也可以写成<input type="text" :value="message" @input="message=$event.target.value">其中@input是对<input>输入事件的一个监听，message=$even

2020-07-08 19:23:17 83

原创 JS高阶函数的应用

1、filter()filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。参数为一个回调函数，回调函数的参数为数组中具体的值，返回值为boolean类型。当该数组中的值满足回调函数返回值为true时，将该值返回到新的数组中；不满足则不返回，最后得到一个新的数组。const nums = [15, 70, 80, 120, 95, 110, 100, 105]//filter()函数let newNums = nums.filter(functio

2020-07-08 15:53:47 236

原创 Vue案例——购物车案例

test.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车案例</title></head><body><div id="app"> <div v-if="books.length"> <table> <thead>

2020-07-08 11:57:34 202

原创 v-show与v-for

v-show:v-if与v-show都可以表示条件判断；当条件为false时，v-if所修饰的元素直接在DOM中消失，而v-for修饰的元素只是添加了display:none的样式v-for:表示循环的命令，可以对数组以及对象进行循环遍历，获取到数组以及对象相应的属性。①在v-for中循环数组 1.只显示数组内容：v-for="item in 数组" 2.显示数组内容与数组下标：v-for="(item, index) in 数组"②在v-for中循环对象 1.直接循环...

2020-07-05 19:03:47 2050

原创 v-if

v-if、v-else与v-else-if是Vue中用于条件判断的指令，与后端中的if、else、ifelse一致。当条件过多时，使用v-if会使得代码太过复杂，不便于观看，所以条件过多时使用计算属性来进行条件的判断较为合适。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>条件判断v-if</title></hea.

2020-07-03 11:36:44 157

原创 v-on修饰符

.once- 只触发一次回调 .{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调 .prevent- 调用event.preventDefault() .stop- 调用event.stopPropagation() <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g...

2020-07-03 10:52:46 125

原创 v-on参数传递

v-on可以传递click命令，代表点击事件，简写为@click点击事件有三种情况：1.无参方法；2.有参方法；3.既需要参数，也需要浏览器产生的event事件无参方法实现时，可以在调用方法时加入小括号，也可以不加小括号；当方法有参数时，需要在调用方法时传入参数,当不写参数时默认为undefined。不写小括号，默认将浏览器产生的event事件传给方法；当方法即需要参数,又需要event事件时，必须使用$event才可以返回事件；当使用event时或者不写时返回undefined；当

2020-07-03 09:05:45 4282

jwz934738949的博客