Vue2
文章平均质量分 86
vue2
richest_qi
这个作者很懒,什么都没留下…
展开
-
vue2项目:路由搭建
文章目录使用vue脚手架(Vue CLi)初始化项目项目的其他配置路由分析路由搭建测试使用vue脚手架(Vue CLi)初始化项目vue create vue_project,创建名为vue_project的项目。本项目使用vue2(“version”: “2.6.14”)。项目的其他配置 项目启动后自动打开浏览器。 关闭Lint语法检查。 vscode下,给src文件夹取别名。如果希望项目启动后自动打开浏览器,需要修改package.json,添加--open,如下所示。个人偏爱【C原创 2022-03-23 11:48:12 · 5040 阅读 · 0 评论 -
vue2项目:一般组件的实现
文章目录Header组件的实现Footer组件的实现本项目中,一般组件包括:Header组件和Footer组件。现在来一一实现它们。Header组件的实现 模板结构(template) components下新建文件夹images,存放图片资源 样式(style) 安装less、less-loader index.html引入reset.css模板结构(template)如下。<template> <header class="header">原创 2022-03-25 12:09:12 · 908 阅读 · 0 评论 -
路由传递query参数(vue)
文章目录嵌套路由的实现模板文件index.html入口文件main.jsApp.vue(App组件)Header.vue(Header组件)router/index.js(路由规则文件)About.vue(About组件)Home.vue(Home组件)News.vue(News组件)Message.vue(Message组件)路由传递query参数router/index.js(路由规则文件)Detail.vue(Detail组件)Message.vue(Message组件)嵌套路由的实现嵌套路由的原创 2022-05-20 16:47:00 · 567 阅读 · 0 评论 -
路由传递params参数(vue)
文章目录嵌套路由的实现模板文件index.html入口文件main.jsApp.vue(App组件)Header.vue(Header组件)router/index.js(路由规则文件)About.vue(About组件)Home.vue(Home组件)News.vue(News组件)Message.vue(Message组件)路由传递params参数万事俱备router/index.js(路由规则文件)Detail.vue(Detail组件)Message.vue(Message组件)东风来了router原创 2022-05-20 16:07:04 · 7146 阅读 · 0 评论 -
嵌套路由的实现(vue)
文章目录基本路由的使用模板文件index.html入口文件main.js入口组件App.vuerouter/index.js(路由规则)pages/About.vue(About组件)pages/Home.vue(Home组件)嵌套路由的实现router/index.jsHome.vue(Home组件)News.vue(News组件)Message.vue(Message组件)基本路由的使用本篇的vue项目,代码涉及的主要文件有:模板文件index.html入口文件main.js入口组件App原创 2022-05-19 10:00:49 · 487 阅读 · 0 评论 -
路由的基本使用(vue)
文章目录新建vue应用初步搭建页面public/index.htmlApp.vue安装vue路由插件:vue-router定义路由组件pages/Home.vuepages/About.vue编写路由链接,指定路由展示位置App.vue注册路由router/index.jsmain.js启动应用,测试效果新建vue应用vue create vue_demo,创建vue应用。其中,vue@2。初步搭建页面主要涉及两处修改:public文件夹下新建文件夹:css,css文件夹下放入文件:boots原创 2022-05-17 21:53:36 · 132 阅读 · 0 评论 -
todoList案例(vue版本)之编辑todo(vuex实现)
文章目录App.vue(App组件)store/index.jsItem.vue(Item组件)编辑todo,代码涉及的主要文件有store/index.jsApp.vue,即App组件components/Item.vue,即Item组件App.vue(App组件)变更部分:添加样式.btn-edit。<template> <div id="app"> <div class="todo-container"> <div原创 2022-05-16 20:46:48 · 480 阅读 · 0 评论 -
todoList案例(vue版本)(vuex实现)
文章目录main.js(入口文件)store/index.jsHeader.vue(Header组件)List.vue(List组件)Item.vue(Item组件)Footer.vue(Footer组件)本篇使用vuex实现todoList案例。代码涉及的主要文件有main.js,即入口文件store/index.jscomponents/Header.vue,即Header组件components/List.vue,即List组件components/Item.vue,即Item组件c原创 2022-05-13 10:22:21 · 780 阅读 · 0 评论 -
github搜索案例(vue版本)(消息订阅与发布实现组件通信)
文章目录消息订阅与发布的基本使用App.vue(App组件)Search.vue(Search组件)List.vue(List组件)相关链接本篇通过消息订阅与发布实现任意组件间通信,来完成github搜索案例。消息订阅与发布的基本使用npm install --save pubsub-js,安装第三方库pubsub-js。import pubsub from "pubsub-js",引入第三方库pubsub。订阅消息:id = pubsub.subscribe(消息名,callback),且ca原创 2022-05-12 13:47:16 · 217 阅读 · 0 评论 -
vue组件间通信方式总结
vue组件间有如下通信方式:props原创 2022-05-13 10:24:23 · 146 阅读 · 0 评论 -
todoList案例(vue版本)(消息订阅与发布实现组件通信)
文章目录消息订阅与发布的基本使用App.vue(App组件)List.vue(List组件)Item.vue(Item组件)Footer.vue(Footer组件)相关链接父组件向子组件传递数据,使用props即可。子组件向父组件传递数据,也可以使用props,将props值设置为一个函数即可。子组件向父组件传递数据,还可以使用自定义事件来实现。全局事件总线,可以实现任意组件间通信。消息订阅与发布,也可以实现任意组件间通信。本篇通过消息订阅与发布实现任意组件间通信,来完成todoList案例。原创 2022-05-12 11:29:56 · 234 阅读 · 0 评论 -
todoList案例(vue版本)之删除todo(全局事件总线实现)
文章目录App.vue(App组件)Item.vue(Item组件)相关链接代码更改涉及的文件有,App.vue,即App组件。Item.vue,即Item组件。注意,入口文件main.js已在beforeCreate()生命周期函数中通过Vue.prototype.$bus=this注册了全局事件总线。App.vue(App组件)生命周期函数mounted()中注册监听deleteTodo事件,deleteTodo事件一旦发生,监听回调this.deleteTodo将执行。生命周期函数b原创 2022-05-12 12:15:21 · 287 阅读 · 0 评论 -
todoList案例(vue版本)之勾选/去勾选todo(全局事件总线实现)
文章目录App.vue(App组件)Item.vue(Item组件)相关链接代码更改涉及的文件有,App.vue,即App组件。Item.vue,即Item组件。注意,入口文件main.js已在beforeCreate()生命周期函数中通过Vue.prototype.$bus=this注册了全局事件总线。App.vue(App组件)生命周期函数mounted()中注册监听checkTodo事件,checkTodo事件一旦发生,监听回调this.checkTodo将执行。生命周期函数befo原创 2022-05-12 12:15:49 · 409 阅读 · 0 评论 -
todoList案例(vue版本)之添加todo(全局事件总线实现)
文章目录main.js(入口文件)App.vue(App组件)Header.vue(Header组件)相关链接父组件向子组件传递数据,使用props即可。子组件向父组件传递数据,也可以使用props,将props值设置为一个函数即可。子组件向父组件传递数据,还可以使用自定义事件来实现。本篇介绍如何使用全局事件总线来实现子组件向父组件传递数据。另,该方法适用于任意组件间通信,不仅仅限于父子组件间通信。代码更改涉及的文件有:main.js,即入口文件。components/App.vue,即A原创 2022-05-12 12:14:56 · 243 阅读 · 0 评论 -
github搜索案例(vue版本)之完善案例
文章目录App.vue(App组件)Search.vue(Search组件)List.vue(List组件)相关链接代码变更涉及的文件有:App.vue,即App组件。components/Search.vue,即Search组件。components/List.vue,即List组件。App.vue(App组件)<template> <div id="app"> <div class="container"> <Searc原创 2022-05-11 16:37:56 · 145 阅读 · 1 评论 -
github搜索案例(vue版本)之展示数据
文章目录App.vue(App组件)Search.vue(Search组件)List.vue(List组件)相关链接代码变更涉及的文件有:App.vue,即App组件。components/Search.vue,即Search组件。components/List.vue,即List组件。App.vue(App组件)<template> <div id="app"> <Search :saveUsers="saveUsers"/> &l原创 2022-05-11 16:37:42 · 193 阅读 · 2 评论 -
github搜索案例(vue版本)之搭建静态页面
文章目录public/index.html入口文件main.jsApp.vue(App组件)Search.vue(Search组件)List.vue(List组件)本篇搭建github搜索案例的静态页面,包括以下组件:App组件。Search组件。List组件。代码主要涉及如下文件:public目录下的index.html。main.js,即入口文件。App.vue,即App组件。components/Search.vue,即Search组件。components/List.vue原创 2022-05-11 16:37:27 · 1037 阅读 · 1 评论 -
todoList案例(vue版本)之添加todo(自定义事件实现)
文章目录自定义事件实现子向父传递数据的第一种写法App.vue(App组件)Header.vue(Header组件)自定义事件实现子向父传递数据的第二种写法App.vue(App组件)Header.vue(Header组件)子组件向父组件传递数据,可以通过props,props值是一个函数。举例见:todoList案例(vue版本)之添加todo。子组件向父组件传递数据,也可以使用自定义事件来实现。本篇将使用自定义事件来实现添加todo。自定义事件有以下两种写法。第一种写法:@addTodo="c原创 2022-05-10 11:18:08 · 553 阅读 · 0 评论 -
vue中收集input[type=“checkbox”]的值
文章目录input[type="checkbox"],勾选or不勾选v-model:checkedinput[type="checkbox"]多个时,哪些被选中相关链接input[type=“checkbox”],勾选or不勾选要控制input[type=“checkbox”]勾选或不勾选,有以下两种方式,v-model=“isDone”。isDone为true时,勾选;isDone为false时,不勾选。:checked="isDone"。isDone为true时,勾选,isDone为false原创 2022-05-10 10:08:54 · 2407 阅读 · 0 评论 -
vue中收集input[type=“text”]的值
文章目录v-modelevent.targetrefvue里收集input[type=“text”]的值,有以下方法:v-modelevent.targetref本例中,输入后点击回车键触发handleKeyup回调,回调会打印出输入框中的数据,之后便清空输入框中数据。v-model<body> <div id="root"> <label>用户名:<input type="text" v-model="username"原创 2022-05-10 10:08:26 · 932 阅读 · 0 评论 -
todoList案例(vue版本)之底部交互
文章目录App.vue(App组件)Footer.vue(Footer组件)相关链接底部交互,包括如果所有事项被勾选,则底部复选框自动勾选上。如果底部复选框选中(或不选中),则所有事项被勾选(或去勾选)。若没有事项,则底部(已完成xx/全部,清除已完成按钮)隐藏,不显示。点击 清除已完成按钮, 已勾选的事项将被删除,不再显示。代码变更涉及的文件有:App.vue,即App组件。Footer.vue,即Footer组件。App.vue(App组件)<template>原创 2022-05-10 10:08:03 · 130 阅读 · 0 评论 -
todoList案例(vue版本)之底部统计
文章目录App.vue(App组件)Footer.vue(Footer组件)相关链接底部统计,代码变更涉及的文件有:App.vue,即App组件。Footer.vue,即Footer组件。App.vue(App组件)<template> <div id="app"> <div class="todo-container"> <div class="todo-wrap"> <Header :addTo原创 2022-05-10 10:07:43 · 152 阅读 · 0 评论 -
todoList案例(vue版本)之删除todo
文章目录App.vue(App组件)List.vue(List组件)Item.vue(Item组件)相关链接鼠标移入效果采用css实现。删除todo,代码变更涉及的文件有:App.vue,即App组件List.vue,即List组件Item.vue,即Item组件App.vue(App组件)<template> <div id="app"> <div class="todo-container"> <div class="原创 2022-05-09 16:11:21 · 630 阅读 · 0 评论 -
todoList案例(vue版本)之鼠标移入效果
文章目录css实现js实现相关链接鼠标移入事项时,事项所在行背景色变为浅灰色,且显示删除按钮。鼠标移出事项时,事项所在行背景色变为白色,且不显示删除按钮。对此,有两种实现方式,css实现js实现代码变更涉及的文件有,Item.vue,即Item组件。css实现变动部分:li:hover{ background: #ddd; }和li:hover button{ display: block; }<template>原创 2022-05-09 15:40:47 · 927 阅读 · 0 评论 -
todoList案例(vue版本)之勾选/去勾选todo
文章目录App.vue(App组件)List.vue(List组件)Item.vue(Item组件)相关链接代码更改涉及的文件有,App.vue,即App组件。List.vue,即List组件。Item.vue,即Item组件。App.vue(App组件)<template> <div id="app"> <div class="todo-container"> <div class="todo-wrap">原创 2022-05-09 14:15:29 · 176 阅读 · 0 评论 -
todoList案例(vue版本)之添加todo
文章目录App.vue(App组件)Header.vue(Header组件)相关链接代码更改涉及的文件有,App.vue,即App组件。Header.vue,即Header组件。App.vue(App组件)<template> <div id="app"> <div class="todo-container"> <div class="todo-wrap"> <Header :addTodo="a原创 2022-05-09 11:44:23 · 171 阅读 · 0 评论 -
todoList案例(vue版本)之初始化列表
文章目录App.vue(App组件)List.vue(List组件)Item.vue(Item组件)相关链接代码更改涉及的文件有,App.vue,即App组件。components/List.vue,即List组件。components/Item.vue,即Item组件。App.vue(App组件)<template> <div id="app"> <div class="todo-container"> <div clas原创 2022-05-09 10:13:51 · 456 阅读 · 0 评论 -
todoList案例(vue版本)之搭建静态页面
文章目录入口文件:main.jsApp组件:App.vueHeader组件:Header.vueList组件:List.vueItem组件:Item.vueFooter组件:Footer.vue本篇搭建todoList案例的静态页面。包括以下组件:App组件Header组件List组件Item组件Footer组件代码涉及以下几个文件:main.js,入口文件。App.vue,即App组件。components/Header.vue,即Header组件。components/Lis原创 2022-05-09 09:02:38 · 647 阅读 · 0 评论 -
什么时候用ref,什么时候不用ref
文章目录用ref不用ref用ref“打在我身,疼在她心”时,用ref。比如,点击事件绑定在某个标签上,事件处理函数中却要访问另一个完全不相关的元素的真实DOM。本例中,click事件绑定在button标签上,事件处理函数handleClick中却要访问h2元素中的内容。<template> <div> <h2 ref="title">{{msg}}</h2> <button @click="handleClick">点击原创 2022-05-07 10:18:49 · 378 阅读 · 0 评论 -
天气切换示例
文章目录vue实现react实现天气切换示例,本篇实现了vue版本、react版本。vue实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device原创 2022-05-06 17:15:02 · 364 阅读 · 0 评论 -
vue实例的watch选项
文章目录watch选项回调函数handlerwatch的简写形式监听多级结构的某个属性的变化deep参数,监听多级结构的所有属性的变化immediate参数相关链接watch选项回调函数handler<body> <div id="root"> <h2>今天天气很{{isHot?'炎热':'凉爽'}}</h2> <button @click="isHot=!isHot">切换天气</button&原创 2022-05-06 16:21:45 · 192 阅读 · 0 评论 -
vue事件传参
文章目录事件传参不传参只传入自己的参数既传入自己的参数,也传入event对象既传入event对象,也传入自己的参数相关链接事件传参不传参<button @click="handleClick">不传参</button>handleClick(event){ console.log(event); }<body> <div id="root"> <button @click="handleClick">不传原创 2022-05-06 14:51:40 · 1035 阅读 · 0 评论 -
vuex的模块化
本例有两个组件,分别是,Count组件,详见Count.vue。Person组件,详见Person.vue。Count组件和Person组件共享以下两个数据:sumpersonList代码主要涉及如下3个文件,store/index.jsApp.vueCount.vuePerson.vuemain.jsmain.jsimport Vue from 'vue'import App from './App.vue'import store from "./store".原创 2022-05-06 11:16:39 · 2064 阅读 · 0 评论 -
vuex的辅助函数:mapActions和mapMutations
文章目录mapActions/mapMutations生成方法(对象写法)mapActions/mapMutations生成方法(数组写法)本篇介绍vuex的辅助函数:mapActions和mapMutations。代码涉及两个文件,store/index.js。本例中,该文件内容不发生变更。Count.vue。本例中,该文件内容将发生多次变更,如辅助函数mapActions生成方法,方法中调用dispatch联系actions。对象写法数组写法辅助函数mapMutations生成原创 2022-05-05 21:08:38 · 1338 阅读 · 0 评论 -
vuex的辅助函数:mapState和mapGetters
文章目录自己写计算属性mapState/mapGetters生成计算属性数组写法对象写法对象写法(key-value,value是一个字符串)对象写法(key-value,value是一个函数)本篇介绍vuex的辅助函数:mapState和mapGetters。代码涉及两个文件,store/index.js。本例中,该文件内容不发生变更Count.vue。本例中,该文件内容将发生多次变更,如自己写计算属性辅助函数(mapState/mapGetters)生成计算属性数组写法对象写法原创 2022-05-05 16:37:42 · 584 阅读 · 0 评论 -
vuex的核心概念
vuex有以下四个核心概念,state,用于存储状态(或数据)。getters,用于对state中的状态(或数据)进行加工。actions,里面的action函数,用于响应组件动作。mutations,里面的mutation函数,用于操作状态(或数据)。state、getters、actions和mutations都由Store管理,其中,$store.state,访问state。$store.getters,访问getters。$store.dispatch()或context.dis原创 2022-05-05 15:35:00 · 1175 阅读 · 0 评论 -
vue devtools之vuex开发者工具
Time Travel to This State,时间线穿梭。Revert This Mutation,回退。Commit This Mutation,合并。Export Vuex State,导出state。Import Vuex State,导入state。是否记录。点亮,记录mutations;置灰,不再记录mutations。清空。点击,将清空所有的mutations记录,且state复位。合并。点击,将合并所有的mutations。...原创 2022-05-05 14:55:43 · 2283 阅读 · 0 评论 -
vuex实现求和案例
文章目录求和案例(纯vue版)求和案例(vuex版)先dispatch再commitstore/index.jsCount.vue直接commitstore/index.jsCount.vue求和案例(纯vue版)<template> <div class="count"> <h2>当前求和为{{sum}}</h2> <select v-model="num"> <option :value="1">原创 2022-05-05 13:55:36 · 751 阅读 · 0 评论 -
搭建vuex开发环境
文章目录几个要点完整代码store/index.jsmain.js几个要点npm install --save vuex@3,安装vuex插件。注意!!vue和vuex的搭配:vue2搭配vuex3;vue3搭配vuex4。src下新建文件夹:store,store下新建文件:index.js。import Vuex from "vuex",引入vuex插件。Vue.use(Vuex),应用vuex插件。创建store并导出store。const actions = {};const原创 2022-05-05 11:28:40 · 288 阅读 · 0 评论 -
收集表单数据时遇到的问题及其解决办法
问题描述切换下拉框选项时,被选中项的值是字符串类型,不是数值类型,导致2+5=25。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width原创 2022-05-05 10:36:05 · 489 阅读 · 0 评论