![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue.js
文章平均质量分 92
MerryMe2020
性能测试、自动化测试、测试开发分享
展开
-
Vue3 vuex高级
vuex中的计算属性-Getters案例:定义计算属性获取值:this.$store.getters.doubleCount案例:getters使用辅助函数方式实现1.先引入getters辅助函数:import {mapState, mapGetters} from 'vuex'2.再通过es6的对象扩展运算符合并到computed里面...原创 2020-12-26 11:43:46 · 1287 阅读 · 2 评论 -
Vue3 vuex基础
Vuex如果我们有很多个组件,这些组件依赖一些数据,要操作这些数据。比如电商页面,每个电商页面操作购物车里面的商品,这些商品就是我们的一些公用数据,如果我们用父子组件传值、非父子间传值,数据操作起来十分麻烦。处理公共数据部分的一些操作(解决方案),存放公共数据,可以把它看成一个仓库。官网:https://vuex.vuejs.org/zh/vuex有三部分组成1、state: vuex里面存放公共数据的一个地方2、Mutations改变State,改变这些数据...原创 2020-12-26 11:47:33 · 201 阅读 · 0 评论 -
vue3 组件通信、vue-router
关于组件通信1.父子组件间传值props/$emit$parent/ children$ref2.非父子组件传值事件总线//原理就是建立一个公共的js文件,专门用来传递信息//bus.jsimport Vue from 'vue'export default new Vue()//在需要传递消息的地方引入import bus from './util/bus'//传递消息bus.$emit('msg', val)//接收消息bus.$on('msg',(val) => { c...原创 2020-12-26 15:29:52 · 953 阅读 · 2 评论 -
vue/cli3构建工程
快速创建工程的两种方法安装vue/cli#npm install -g @vue/cli查看vue版本#vue --version创建工程首先进入创建工程的目录工程化的目录原创 2020-10-31 18:56:44 · 463 阅读 · 0 评论 -
vue-devtools安装
vue的调试工具vue-devtools 的安装和使用安装:1.到github下载:#git clone https://github.com/vuejs/vue-devtools2.进入vue-devtools目录下切换到主分支安装依赖包#cd vue-devtools#git checkout master#npm install依赖包下载完后执行npm run buildnpm run build4.译打包成功后会在shells下生成chrome文件夹。..原创 2020-10-30 08:31:37 · 130 阅读 · 0 评论 -
npm换源成淘宝镜像
npm换源成淘宝镜像cnpm(cnpm命令行工具代替默认的npm)#npm install -g cnpm --registry=https://registry.npm.taobao.org检测是否安装成功#cnpm -vnpm(永久使用淘宝的镜像源)直接命令行的设置#npm config set registry https://registry.npm.taobao.org检测是否修改成功#npm config get registry或npm info expres..原创 2020-10-29 21:59:49 · 202 阅读 · 0 评论 -
NVM实现Node多版本管理(搭建vue-cli、nodejs、webpack架子)
Vue语法要求在template模板下,只能有一个最外层的包裹元素 input里的内容,要和数据做双向绑定,在逻辑里面定义数据 在脚手架工具里面,data不再是一个对象,变成一个函数 data的返回值是具体的数据...原创 2020-10-28 15:21:24 · 1025 阅读 · 2 评论 -
Vue-cli安装文档及使用(搭建vue-cli、nodejs、webpack架子)
之前学习基础语法、todolist,所有的代码写在index.html之中,大型项目不可维护。 在真实vue项目开发过程中,会借助webpack打包工具帮助构建大型项目开发目录,再开发完成之后进行打包的操作,帮助生成线上可运行的代码。 如果让每一个开发人员自己配置webpack开发环境,对于开发者来说是一个不小的挑战。Vue官方也考虑到这一个因素,提供一款脚手架工具,vue-cli,通过这个脚手架工具我们可以快速构建标准的vue项目,同时这个工具自...原创 2020-10-26 18:04:58 · 475 阅读 · 1 评论 -
ToDoList删除功能
通过删除功能,可以学习很多知识点。父组件向子组件传值通过属性的形式父组件,子组件,在父组件里面通过属性的形式给子组件传递具体的内容 循环展示每一个子组件时(父组件调用子组件),通过属性形式(content)给子组件传递值,而子组件接收属性内容 而后再子组件模板上,进行内容的显示。 子组件里面给li标签绑定一个事件,在handleClick里面实现子组件删除 子组件显示与否,取决于父组件list: [] 这个数据,如果想实现子组件的删除,需在父组件里面把子组件对应数据给删除 子组件若想...原创 2020-10-26 13:33:09 · 712 阅读 · 0 评论 -
组件与实例的关系
组件与实例的关系Vue中的每一个组件,都是Vue的一个实例 任何一个Vue项目,都是由很多个实例组成的 组件里面也可以写methods,也可以写data,也可以写计算属性等 如果Vue的根实例,没有模板,它会去找挂载点,它会把挂载点标签下的模板内容当成实例的模板来使用。 每一个组件/实例统称为组件,因为组件就是Vue的一个实例,反回来每一个Vue实例就是一个组件。代码如下<!DOCTYPE html><html lang="en"><head>...原创 2020-10-26 12:15:47 · 761 阅读 · 0 评论 -
TodoList组件的拆分
前端开发中,经常提到的组件,对ToduList进行组件的拆分组件的概念:指的是页面上的某一部分当我们做的网页十分庞大的时候,我们可以把一个大型的网页,拆成几个部分,每个部分就是小的组件。这样我么的一个大型项目就被细化为小型组件。每个组件相对维护就比较简单了。 要学习组件化的开发,要知道如何去定义一个组件。 组件和组件之间如何做通信看如何拆分何时?li标签实际上一个基本的todoitem,也就是里面描述了我到底要干什么?小的项目,这个小的项目它会不断的出现。...原创 2020-10-26 11:37:31 · 312 阅读 · 0 评论 -
TodoList开发
通过制作功能模块,可以复习基础知识,同时可以延展出新的知识点。1.首先写最简单的TodoList结构希望输入内容,点击提交,提交项能显示在列表之中因为列表为空,所以显示内容为空。思路?接着当用户点击提交按钮的时候,让它显示在列表之中。以前的操作需要操作dom,现在是在写数据。只需要在用户点击提交的时候,把input框里的内容,放入list这个数组里面。数组有内容,li标签就会自动的循环,把数组的内容显示出来。...原创 2020-10-25 00:44:19 · 363 阅读 · 0 评论 -
Vue基础6-v-if、v-show与v-for指令
1. v-if(控制dom存在与否)与v-show(控制dom显示与否)首先准备一个基础代码 页面展示效果入下范例:点击按钮,helloworld或显示或隐藏需要借助:v-if、v-show指令在Vue实例之中定义一个数据,叫做show默认值为true,在挂载点处添加v-if,它的值等于show这个数据项只有show等于true,div存在。如果show这个变量等于falsediv不存在。观察下面的现象继续编辑代码...原创 2020-10-24 01:42:10 · 719 阅读 · 0 评论 -
Vue基础5-计算属性和侦听器
在Vue中会遇到这样一个场景,fullName变量是通过firstName和lastName计算而来的一个新的变量1.这个页面有一个fullName计算属性2.computed表示一个属性通过其他属性计算而来,如果firstName没改变,lastName也没改变,每一次使用fullName时候它会缓存上一次计算属性的缓存结果3.fullName定义在computed里面,表示它是一个计算属性,它是通过别的数据计算出来的。...原创 2020-10-22 22:50:56 · 103 阅读 · 0 评论 -
Vue基础4-属性绑定和数据双向绑定
范例:希望提示语可变v-band 当前title这个属性和“title”这个数据项做一个绑定。这个时候数据项的title就和上面的属性进行了一个绑定。注意:v-bind:title="title",模板指令等号后面根的内容就不再是一个字符串,它是一个js表达式,这个title表达的就是data里面的title<div v-bind:title=" 'yizhan' + title"> hello world</div>...原创 2020-10-22 19:36:59 · 251 阅读 · 0 评论 -
Vue基础3-实例中的数据,事件和方法
1.数据Vue实例,data属性,在里面可以配置任意的数据名字示例:data配置任意数据名字注意插值表达值的用法:两个花括号开始,两个花括号结束,意思是把number的值插入到h1之中除了这种写法,还有其他几种写法1.v-text指令它的意思是h1的内容,由number这个变量决定;v-text是vue之中的一个指令,指令跟的东西是一个变量,它告诉h1, 你要显示的内容是number这个变量。2.v-html指令范例:d...原创 2020-10-22 15:38:21 · 877 阅读 · 0 评论 -
Vue基础2-挂载点、模板与实例
挂载点、模板与实例之间的关系挂载点2.模板实例:原创 2020-10-22 12:02:08 · 223 阅读 · 0 评论 -
Vue基础1-如何创建一个vue实例
1.首先打开官方网站:网址:https://cn.vuejs.org/2.下载一个开发版本路径:学习-教程-下载,然后点击开发版本3.在D盘新建一个vue目录,然后用webstorm打开4.在vue目录下,新建一个Vue.js文件,把刚下载的文件内容复制到这里5.在Vue目录下,新建index.html文件接下来第一次使用vue.js,用vue.js创建一个实例,然后编写一段最简单的代码。6.打开页面...原创 2020-10-22 10:31:03 · 4232 阅读 · 0 评论