- 博客(66)
- 收藏
- 关注
RSS订阅原创 微信小程序+Vant框架
微信小程序+Vant框架(一)前言最近自己想做一个背单词的微信小程序，打发打发无聊的时间。毕业之后，由于没有从事开发的工作，已经很少写代码了。这一次也是相当于重新开始，重新接触代码，把自己做小程序的过程记录下来，好好学习学习。嘻嘻~准备工作1.安装Node 环境2.检查电脑是否成功安装Node环境3.在微信小程序根目录下打开终端，安装npm环境npm initnpm installnpm install weapp -save -production1.npm init：初始化npm
2021-05-22 16:12:44
1637
3
原创 1-2.软件测试---软件测试的定义
软件测试的定义软件测试就是软件在投入运行之前，对软件需求分析，设计规格说明书和编码实现的最终审查。1.定义一：软件测试是为了发现错误而执行程序的过程2.定义二：软件测试是根据软件开发各个阶段的规格说明和程序内部结构而设计的一批测试用例，并利用这些测试用例运行程序以及发现错误的过程，即执行测试步骤。软件测试员的目的：尽可能早一些找出软件缺陷，并确保得以修复，以提高软件质量。软件开发和测试的...
2020-03-20 17:30:04
715
原创 1-1.软件测试---软件以及软件缺陷的定义
软件的定义以及软件测试的发展软件的定义从广义上来说，软件就是一系列按照特定顺序组织的计算机数据和指令的集合；从狭义上来说，软件就是指计算机程序，数据以及解释和指导使用程序和数据的文档的总和。简单的来说，软件就是程序和文档的总和。软件=程序+文档软件的分类功能：系统+应用架构：单机+C/S+B/S用户：产品+项目规模：小型+中型+大型软件缺陷从广义上来说，软件或程序或相关的文档...
2020-03-20 15:30:34
611
原创 8-2.vue组件之间的通信
Vue组件之间的通信vue组件之间的通信分为几种情况：1.父组件向子组件传递数据2.子组件向父组件发送数据3.非父子关系组件的数据传递父组件向子组件传递数据父组件向子组件传递数据时，利用到的是props属性。子组件中在props定义好要接受的数据，父组件中使用v-bind传递子组件在props中定义好的数据。1.首先创建子组件Child，在src/components/目录下新建Ch...
2020-03-14 21:54:30
164
原创 网页布局方式------圣杯布局和双飞翼布局
圣杯布局和双飞翼布局圣杯布局和双飞翼布局是常用的两种布局方式，其共同的效果是实现一个两侧宽度固定,中间宽度自适应的三栏布局。它们都遵循以下原则：两侧宽度固定，中间宽度自适应中间部分在DOM结构上优先，以便先行渲染允许三列中的任意一列成为最高列只需要使用一个额外的<div>标签圣杯布局的实现：1.container包裹着三部分center,left,right,其中ce...
2020-03-09 21:41:52
248
1
原创 2-5.vue+axios+element-ui实现分页查询
Vue与Axios结合进行后台交互这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/104296020在之前的博客中只是模拟了一些数据，并没有与后台进行交互。这次是将axios与vue结合进行后台交互。安...
2020-03-04 21:41:15
2616
2
原创 2-4.vue+axios+element-ui实现增加操作
Vue与Axios结合进行后台交互这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/104296020在之前的博客中只是模拟了一些数据，并没有与后台进行交互。这次是将axios与vue结合进行后台交互。安...
2020-03-04 17:18:47
1015
1
原创 2-3.vue+axios+element-ui实现删除操作
Vue与Axios结合进行后台交互这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/104296020在之前的博客中只是模拟了一些数据，并没有与后台进行交互。这次是将axios与vue结合进行后台交互。安...
2020-03-04 15:27:56
4474
2
原创 2-2.vue+axios+element-ui实现修改操作
Vue与Axios结合进行交互这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/104296020在之前的博客中只是模拟了一些数据，并没有与后台进行交互。这次是将axios与vue结合进行后台交互。安装a...
2020-03-03 21:26:39
1866
原创 2-1.vue+axios+element-ui实现查找操作
Vue与axios结合获取后台数据这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/104296020在之前的博客中只是模拟了一些数据，并没有与后台进行交互。这次是将axios与vue结合进行后台交互。V...
2020-03-02 21:59:55
2428
2
原创 1-5.vue+element-ui实现简单的增删改查操作
Vue的增删改查操作这里只是利用Vue进行j简单的增删改查操作，还没有与后台进行结合，只是定义了一些模拟数据，模拟了增删改查操作的过程。其中element-ui组件库经常与vue进行结合，使用时需要提前安装好element-ui组件库的环境，详情操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/1042960201.首先是...
2020-02-26 22:19:11
7083
6
原创 1-4.vue+element-ui实现简单的查找操作
Vue查找表格数据这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/1042960201.首先在<template>标签中写好需要的模板。这里用到了element-ui组件库中的input输入框...
2020-02-26 17:07:14
5966
5
原创 1-3.vue+element-ui实现简单的增加操作
Vue增加表格数据这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/1042960201.首先在<template>标签中写好增加数据的模板。这里用到了element-ui组件库中的Dialog...
2020-02-17 21:25:45
1272
原创 1-2.vue+element-ui实现简单的修改操作
Vue修改表格中的数据这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/1042960201.首先在<template>标签中写好修改数据的模板。这里用到了element-ui的Dialog对话...
2020-02-16 15:54:54
3462
1
原创 1-1.vue+element-ui实现简单的删除操作
Vue对数据进行删除这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/104296020。1.首先在<template>标签中写好表格模板，用到的是element-ui中的Table表格组件，其...
2020-02-15 16:53:13
2689
1
原创 8-1.创建vue项目的完整步骤
Vue项目的创建Vue与Element-ui结合当element-ui与vue结合使用，需要搭建一个基于 Vue 和 Element 的开发环境。1.首先需要搭建Vue-cli脚手架，Vue-cli是vue官方出品的快速构建单页应用的脚手架。注意：在搭建脚手架之前需要安装npm和node,安装npm时可以直接下载node的安装包，根据自己的系统选择合适的版本。下载的网址：http://n...
2020-02-13 16:20:38
1380
原创 7-6.Vuex之module模块组设置
Vuex之module模块分组设置在实际开发中，共享的状态会越来越多。这时可以采用module模块进行分组设置，分组后再进行按组编写。利用module进行模块分组时需要修改store.js文件。在暴露状态时，先将这些状态属性放置在一个对象中，利用的是const常量的方法声明模块组。const modubleA={ state,mutations,getters,actions}声明好...
2020-02-12 15:32:47
235
原创 7-5.Vuex之actions异步修改状态
Vuex中actions异步修改状态actions与mutations作用类似，都是可以对状态进行修改。不同的是actions是异步操作的。actions是可以调用Mutations里的方法的。例子：在实现点击按钮进行数值相加或相减的功能时，利用异步方法进行操作。在src/vuex/store.js文件中定义actions对象：const actions={ addActions...
2020-02-11 21:59:13
1171
原创 7-4.Vuex之Getters计算过滤操作
Vuex中Getters计算过滤操作vuex中的getters的作用是在获取数据之前进行的一种再编辑，相当于对数据的过滤加工，与computed属性的作用类似，都是在获取数据之前对数据进行再次编辑或是操作。例子：在实现数值相加或是相减的功能时。若初始的结果为1，如果我们想要在获取结果之前，再对其进行操作(即在输出数据之前加上100)，这时就可以用到getters对其进行过滤操作。在src...
2020-02-11 20:42:19
281
原创 7-3.Vuex之Mutations修改状态
Vuex中Mutations修改状态commit传递参数Vuex提供了commit方法来修改状态，调用时的编码方式：<button @click="$store.commit('方法名')">加一</button>在实际开发中，可以在修改状态时进行传值操作。这时只需要在Mutations里再加上一个参数，并在commit的时候传递就可以实现。例子：点击按钮进行数...
2020-02-11 14:40:06
324
1
原创 7-2.Vuex之state访问状态对象
Vuexstate访问状态对象在store.js文件中声明的访问对象就是SPA（单页应用程序）中的共享值，将状态对象赋值给内部对象有三种方式。以下这种方法一般不推荐使用：<template> <div> <h3>结果是:{{$store.state.count}}</h3> </div></template>...
2020-02-11 13:57:51
182
原创 7-1.Vuex之安装和简单的应用
Vuexvuex是一个专门为vue.js设计的集中式状态管理架构，其中状态可以理解为在data中的属性需要共享给其他vue组件使用的部分(即是将共用属性进行共享)。例如当用户登陆成功，得到了用户名和密码，若将用户名和密码等属性做成状态，那么在其他页面可以很方便的得到用户名和密码(等属性)，不用在通过服务器进行查找。在使用vuex时需要安装相关的依赖包，利用npm包管理工具，安装vuex，采用...
2020-02-09 21:57:19
103
原创 6-9.Vue-router之编程式导航
Vue-router编程式导航vue中实现导航可以由<router-link>标签或者直接操作地址栏的形式完成，这里还有一种方式：编程式导航即在业务逻辑代码中实现导航。在src/APP.vue中写下以下代码：<template> <div id="app"> <img src="./assets/logo.png"> <...
2020-02-09 16:11:00
389
原创 6-8.Vue-router之路由的钩子函数
Vue-routerVue-router路由的钩子函数一个组件从进入到销毁有很多的钩子函数，同样在路由中也设置了钩子函数。路由的钩子函数可以写在路由的配置文件，也可以写在组件模板中。在路由配置文件（/src/router/index.js） 中写钩子函数：{ path:'/params/:newsId(\\d+)/:newsTitle', component:Params, befo...
2020-02-09 15:49:40
449
原创 6-6.Vue-router之路由重定向
Vue-router路由重定向redirect路由重定向：一般用在不同的页面跳转到同一个页面或是同一组件的情况。这时需要用到的是redirect参数，将要跳转的页面路径添加到redirect参数后。在路由重定向时，有两种情况：1.不携带参数进行路由重定向例子：demo2页面重定向到demo页面在src/router/index.js文件下增加demo2路由，这时不需要写compon...
2020-02-06 19:31:44
2952
原创 6-5.Vue-router之利用URL传递参数
Vue-routerVue中利用url传递参数在进行路由页面跳转时如果遇到需要传递参数的情况，可以通过配置src/router/index.js路由文件实现跳转路由时传递参数的功能。在实际的开发中，当我们实现新闻的浏览功能时需要根据每个新闻标题打开不同的新闻内容，这时就需要传递新闻编号和标题。可以利用vue-router中url传递参数的方式解决这一问题。传递参数需要在路由文件index....
2020-02-06 15:27:54
3045
原创 6-4.Vue-router之多路由区域操作
Vue-router单页面多路由区域操作在一个页面存在两个或多个<router-view>区域，可以通过配置index.js文件来操作这些区域。1.在src/App.vue文件中增加两个路由区域，加入一些css样式可以更加值观地查看相关执行效果。<router-view style="width: 100%;height: 200px;background-color: ...
2020-02-05 21:31:26
418
原创 6-3.Vue-router之路由参数传递
Vue-routervue-router中的参数传递在配置路由的时候，有name这一属性。可以用name传递参数，将name传的值显示在页面。1.在路由文件src/router/index.js里配置name属性，注意：当存在子路由时，父路由的name属性将不起作用。export default new Router({ routes: [{ path: '/demot', ...
2020-02-04 21:27:21
218
原创 6-2.Vue-router之子路由配置
Vue-routervue-router中的子路由，子路由的情况一般用在一个页面有它的基础模版，然后它下面的页面都隶属于这个模版。假设demot模板是父模板，现在新建demot1和demo2两个子模板新建子路由的步骤：1.在src/components目录下新建demot1.vue和demot2.vue两个组件模板2.在父模板引入<router-view>标签，给子模板提供插...
2020-02-04 19:25:48
1489
原创 6-1.Vue-router安装和简单的应用
Vue-router在vue应用中，使用a标签进行页面的链接是无法起作用的，这时需要采用vue-router插件(Vue开发中由于对路由的不支持，需采用vue-router插件)；学习vue,必须知道路由的作用。路由就是SPA（单页应用）的路径管理器，vue-router是一个WebApp的链接路径管理系统，由于Vue开发的都是单页面应用，只有一个index.html主页面，所以需要采用该插件...
2020-02-04 16:51:12
178
原创 5-1.Vue-cli脚手架的搭建
Vue-cli脚手架搭建Vue-cli是vue官方出品的快速构建单页应用的脚手架，在安装vue-cil之前需要安装npm，安装npm时可以直接下载node的安装包，根据自己系统选择合适的版本。下载地址：http://nodejs.cn/download/我这里选的是64位的Windows安装包下载好node安装包后，按照相关提示进行安装即可。注意：可以在命令行工具里输入npm -v 检...
2020-02-01 22:27:43
146
原创 4-4.Vue中的slot内置组件
Vue实例和内置组件slot内置组件slot是标签的内容扩展，使用slot可以将内容传递给组件，组件接受内容并输出。在使用slot内置组件时，有两个步骤：例子：利用slot内置组件在网页中输出诗句。1 在自定义组件那里，使用slot标签将内容传递给组件（在HTML的组件中用slot属性传递值 ）<liu> <span slot="first">{{mess...
2020-01-27 21:58:40
933
原创 4-3.Vue中的实例事件
Vue实例和内置组件Vue实例事件实例事件：在构造器外部写一个调用构造器内部的方法，可以通过这种写法在构造器外部调用构造器内部的数据。$on()事件：在构造器外部添加事件$once事件：只执行一次的事件$off()事件：关闭事件，关闭之后就不再执行$on事件$on接受两个参数，第一个是调用时的事件名称，第二个是匿名函数(方法)vue实例.$on('事件名称',function(){...
2020-01-27 20:48:15
246
1
原创 4-2.Vue中的实例方法
Vue实例和内置组件Vue实例方法下面将分别介绍vue的实例方法：$mount()：用来挂载我们的扩展的$destroy()：用来销毁整个挂载的$forceUpdate()：用来提示更新数据的$nextTick()：用来提示数据已经被修改的结合vue的几个生命周期，可以更好的理解这些实例方法实例方法一. $mount()方法的示例先构造一个外部扩展：var demoExten...
2020-01-26 22:40:04
271
原创 4-1.Vue中自定义方法与挂载
Vue实例和内置组件Vue实例实例就是在vue构造器外部操作构造器内部的属性或者方法实例的作用就是使得vue可以与其他框架融合(结合)Vue与JQuery结合使用例子：改变vue中messages在网页输出的值1.引入JQuery.js文件<script src="../assets/js/jquery-3.4.1.min.js" type="text/javascript"&...
2020-01-26 20:47:52
471
原创 3-6.Vue选项之extends选项
Vue选项Vue中的extends选项Vue中的extends选项，通过外部增加对象的形式，对构造器进行扩展
2020-01-23 23:33:54
1995
原创 3-5.Vue选项之mixins选项
Vue选项Vue中的mixins选项mixins选项的用途：在内部构造器写完之后，如需要临时添加方法或是临时改变显示效果，这时利用混入会减少污染代码在需要使用公用方法时，可以减少污染代码，避免代码重复1.在构造器内部使用mixinsmixins后面接的是一个数组：mixins:[mixinsNum]2.在构造器外部使用mixins，即全局API全局混入，这是使用mixin，...
2020-01-23 12:16:24
517
原创 3-4.Vue选项之watch选项
Vue选项Vue中的watch选项watch选项是可以监控数据的变化的，根据不同的数据显示不同的效果。例子：通过监控天气的温度变化，提出不同的穿衣建议。如当温度大于26摄氏度时，建议穿"T恤短袖"，当温度在0~26摄氏度时，建议穿“夹克长裙”，当温度小于0摄氏度时，建议穿“棉衣棉服”。首先先定义一个穿衣建议数组：var styleArray=['T恤短袖','夹克长裙','棉衣棉服']...
2020-01-22 21:48:06
243
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人