Vue
文章平均质量分 60
小白学习Vue
做猪呢,最重要的是开森啦
哈哈哈干活
展开
-
Vue + el-menu刷新选中 + 路由监听 + 路由重复点击
0. 整体代码: 【App.vue】<template> <div id="app"> <HeaderPage :routerData="routerData"/> <br> <router-view v-if="isRouterAlice"/> </div></template><script>import HeaderPage from './components/原创 2021-09-08 22:30:06 · 4499 阅读 · 2 评论 -
Vue +父组件调用子组件方法 + 子组件回调父组件方法
0. 整体代码: 【父组件】:<template> <div> <span style="color: red">-------------------------------------------</span><br> <span style="color: red">这是父组件页面</span>  <button @click="clickPare原创 2021-09-07 22:31:40 · 4543 阅读 · 2 评论 -
Vue + el-date-picker日期时间控件实现今天、昨天、上周、上一个月等功能
有时我们需要搜索对应时间段的内容,我们就可以用el-date-picker这个日期时间控件来实现0. 整体代码:【效果】:【栗子代码】:<template> <div> <el-col :span="10"> <el-row align="middle"> <el-col :span="4" ><label>时间范围:</label></el-col> .原创 2021-09-06 21:47:50 · 3504 阅读 · 1 评论 -
Vue + el-table中html返显 + title悬浮显示 + 超长打点
0. 整体代码:【效果】:【栗子代码】:<template> <div> <el-table @cell-mouse-enter="hoverDate" :row-class-name="tableRowClassName" :data="tableData"> <el-table-column align="center" label="序号"> <template v-slot="scope">原创 2021-08-22 21:14:25 · 4040 阅读 · 5 评论 -
小白学习Vue(13)--vue-route的使用
13. vue-router的使用: 13.1. 关键步骤: 13.2. 举个栗子: 13.3. 代码实现: 13.4. 可能出现的错误:13. vue-router的使用:传统的页面应用,是用一些超链接来实现页面的切换和跳转。在vue-router单页面应用中,则是通过路径之间的切换,也就是组件的切换路由模块的本质 就是建立起url和页面之间的映射关系。 13.1. 关键步骤: 下载:npm i vue-router -S 引入:import VueRouter from 'vu.原创 2020-11-22 22:15:41 · 560 阅读 · 0 评论 -
小白学习Vue(12)--axios的封装使用 | devServer.proxy的配置 | 前后端分离调用请求
12. axios的封装: 12.1. axios的安装引入: 12.1.1. 安装: 12.1.1. 引入以及import/export: 12.2. vue.config.js的配置: 12.3. axios的封装:12. axios的封装:项目中会有很多请求,一般我们都会将axios的get、post请求方式进行封装,这样在使用的时候会方便、美观很多 本文使用了webstorm对vue进行前端分离,所以要准备好vue的环境,可以参考:环境安装及项目构建 12.1. axios的安.原创 2020-11-22 17:18:49 · 1492 阅读 · 0 评论 -
小白学习Vue(11)--环境安装及项目构建 | webstorm构建vue项目
11. 环境安装及项目构建: 11.1. node.js下载安装: 11.2. npm修改全局下载和缓存路径(可选): 11.3. vue-cli相关插件下载: 11.3.1. vue.js安装: 11.3.2. vue-cli安装: 11.3.3. 设置vue环境变量: 11.4. 项目构建: 11.5. 项目启动: 11.2.1. webpack离线包下载:11. 环境安装及项目构建:vue项目快速构建需要脚手架(vue-cli)的支持,类似web项目可以通过maven快速构建;vue项.原创 2020-11-20 21:46:37 · 523 阅读 · 1 评论 -
小白学习Vue(10)--axios发送请求 | post请求参数
9. axios发送请求 9.0. axios的引入: 9.1. axios的基本使用: 9.1.1. axios发送get请求 9.1.2. axios发送post请求: 9.2. axios使用别名发送请求: 9.2.1. axios.get()发送get请求 9.2.2. axios.post()发送post请求9. axios发送请求Axios 是基于 promise 对Ajax的封装 9.0. axios的引入:和Vue一样,对于初学者,推荐使用cdn形式引入:<.原创 2020-11-16 23:25:01 · 2017 阅读 · 3 评论 -
小白学习Vue(9)--箭头函数 | this指向 | 指令缩写
9.1 箭头函数: 9.1.1. 无参多行形式: 9.1.2. 无参单行简写形式: 9.1.3. 有参多行形式: 9.1.4. 有参单行简写形式:9.2 this指向:9.3 常用指令指向:9.1 箭头函数:通过function关键字我们可以定义一个函数,此外我们也可以通过箭头=>来定义;形式:(参数)=> {//函数实现}; 9.1.1. 无参多行形式:<script> const a = () => { console.log("无参多.原创 2020-11-15 20:38:11 · 396 阅读 · 0 评论 -
小白学习Vue(8)--动态组件(<component v-bind:is=““>的使用)以及keep-alive
8. 动态组件: 8.1. 【栗子】: 8.2. keep-alive:8. 动态组件: 通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现: 8.1. 【栗子】: 通过v-for来构建多个button,一般和v-bind:key=""一起使用,能提高效率什么的;点击button时,会改变currentTab值为对应tab值 <component v-bind:is="currentTabComponent"><.原创 2020-11-14 23:04:42 · 2024 阅读 · 0 评论 -
小白学习Vue(7)--实例方法/生命周期(vm.$nextTick | vem.$mount)
7. 实例方法/生命周期 7.1. vm.$mount( [elementOrSelector] ) 7.2. vm.$forceUpdate() 7.3. vm.$nextTick( [callback] ) 7.4. vm.$destroy()7. 实例方法/生命周期 7.1. vm.$mount( [elementOrSelector] ) 用于手动挂载一个未挂载的实例,方法返回实例本身,elementOrSelector为需要挂载到的dom节点<div id="test-inst.原创 2020-11-14 20:13:35 · 350 阅读 · 0 评论 -
小白学习Vue(6)--实例方法/数据(vm.set | vem.delete | vm.watch )
4.3. vm.$set | vm.&delete:使用上和全局Api的Vue.set和Vue.delete一致,可点击链接查看,然后对比一下<div id="test-instanceSet"> <p>position: {{work.position}}</p> <button v-on:click="changePosition">ChangePosition</button> <button v原创 2020-11-14 15:25:59 · 263 阅读 · 0 评论 -
小白学习Vue(5)--实例选项介绍及例子(props | computed | watch | component等)
5. 实例选项/数据 5.1. data:vue实例的数据对象,实例创建后,可以通过vm.$data获取元素数据对象,data类型可以是object也可以是function函数 5.1.1 data为object类型: 内部的属性可以是String、Boolean、数值、数组、object等等 但内部属性名不能以_或命名开头(如name、命名开头(如_ name、命名开头(如name、name),可能会与vue内置的属性冲突 在页面上可以通过{{}}插值表达式直接获取属性值, 在原创 2020-11-14 14:52:27 · 663 阅读 · 0 评论 -
小白学习Vue(?)--model选项的使用(自定义组件文本框双向绑定)
1. model选项:v-model在普通dom的表单标签上使用可以实现双向绑定,但在自定义组件标签中就不行,其要实现双向绑定需要model选项来实现理解这个属性,可以很好的理解v-model的绑定原理,可以对照v-model的使用来浏览本文1.1. <input>文本框 刚开始加载时,<span>标签取的{{name}}是vue实例的属性值,所以会显示bbb 而渲染子组件时,子组件绑定的value是子组件中data的value,所以会显示aaa 输入时,输原创 2020-11-14 13:57:58 · 863 阅读 · 0 评论 -
小白学习Vue(?)--v-model在表单中的使用
1. v-model指令:v-model 指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源本文只讨论v-model在普通dom标签上的使用,关于自定义组件的model选项,可以查看【xxx】1.1. <input>文本框中使用:<div i原创 2020-11-13 19:33:07 · 480 阅读 · 0 评论 -
小白学习Vue(4)--实例方法/事件(vm.$emit | vm.$on | vm.$once | vm.$off)
4. 实例方法/事件: 4.1. vm.\$on | vm.\$once | vm.\$off: 4.2. vm.$emit( eventName, […args] ):4. 实例方法/事件:包括vm.$on、vm.$once、vm.$off、vm.$emit、参考:vue官网 4.1. vm.$on | vm.$once | vm.$off:vm.$on( event, callback ) | vm.$once( event, callback ) | vm.$off( [event.原创 2020-11-12 20:35:31 · 1552 阅读 · 0 评论 -
小白学习Vue(3)--全局Api(Vue.set | Vue.directive | Vue.component等)
3. 全局Api: 3-1. Vue.set()&&Vue.delete() 3-2. Vue.directive( id, [definition] ) 3-3. Vue.filter( id, [definition] ) 3-4. Vue.component( id, [definition] ) 3-5. Vue.extend( options ) 3-6. Vue.use( plugin )3. 全局Api:全局:任何地方都可以使用 3-1. Vue.set()&.原创 2020-11-11 23:26:59 · 1505 阅读 · 1 评论 -
小白学习Vue(2)--生命周期
0. 生命周期的钩子函数有:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed这从名称也能知道在什么位置调用的【栗子】:div id="test-lifecycle"> <span>message: {{message}}</span><br/> <span>returnMsg:{{returnMsg}}&l原创 2020-11-11 20:35:00 · 202 阅读 · 0 评论 -
小白学习Vue(1)--插值表达式和指令
插值表达式和指令0. Vue引入:1. 插值表达式{{}}:2. vue指令: 2.1.1. v-bind指令: 2.1.2. v-if&v-else-if&v-else&v-show指令: 2.1.3. v-for指令: 2.1.4 v-on&v-once指令: 2.1.5 v-model指令: 2.1.6 v-html指令:0. Vue引入: 初学vue,推荐在html中直接引入vue.js <script src="https://cdn.jsde原创 2020-11-10 23:00:42 · 337 阅读 · 0 评论