Vue
文章平均质量分 62
IT__learning
这个作者很懒,什么都没留下…
展开
-
Vue路由的两种加载方式
非懒加载原创 2021-03-21 23:17:05 · 705 阅读 · 0 评论 -
axios使用总结
Axios功能特性● 功能特性● 在浏览器中发送 XMLHttpRequests 请求● 在 node.js 中发送 http请求● 支持 Promise API● 拦截请求和响应● 转换请求和响应数据● 自动转换 JSON 数据● 客户端支持保护安全免受 XSRF 攻击Vue中安装使用Axios1、终端安装npm install axios --save-dev2、main.js文件导入Axiosimport axios from 'axios'import VueAxios原创 2021-03-19 22:19:07 · 508 阅读 · 0 评论 -
ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的解决方法
问题描述:在使用vue+element开发Dialog嵌套表单的时候,表单交数据关闭之后再次打开表单没有重置,仍显示上次输入的数据。原创 2021-03-19 16:22:35 · 10391 阅读 · 1 评论 -
Vue路由重复点击报错解决
Vue路由重复点击时会出现报错 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:XXX,虽然不影响运行结果,但最好还是处理一下。局部处理局部处理是指对单个路由进行处理,其他的路由依旧报错。在路由跳转的push语句中添加catch捕捉错误所以原来的路由跳转改为以下代码: toecharts(){ this.$router.push(原创 2021-03-16 10:29:07 · 2964 阅读 · 1 评论 -
Vue数据可视化——ECharts
完整实例代码:<template> <div> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="echarts" style="width: 600px;height:400px;"></div> <input type="button" @click="mcharts" value="显示图表"> </div></template>&原创 2021-03-16 00:18:02 · 2389 阅读 · 0 评论 -
Vue组件之间的通信
组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互传递,因此组件之间的通信很重要。一般来说,组件可以有以下几种关系如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。Vue组件间的通信方式● props和$emit(常用)● $ attrs和$listeners● 中央事件总线(非父子组件间通信)● v-model● provide和inject● $ pare原创 2021-03-11 19:31:35 · 122 阅读 · 0 评论 -
Vue路由的使用——定义、传参
路由,其实就是指向的意思。例如当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容——这就要在js 文件中配置路由。在Web开发中,路由是指根据URL分配到对应的处理程序。对于大多数单页面应用,都推荐使用官方支持的vue-router。Vue-router通过管理URL,实现URL和组件的对应,以及通过URL进行组件之间的切换。路由的原创 2021-03-11 19:30:51 · 875 阅读 · 0 评论 -
Vue中使用element-ui
安装1、npm 安装推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。npm i element-ui -S2、CDN导入目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">翻译 2021-03-08 14:02:49 · 367 阅读 · 0 评论 -
Vue组件的注册
Vue组件命名1、短横线分隔( kebab-case)Vue.component('my-component-name', { /* ... */ })注意字母全小写2、帕斯卡命名方式(PascalCase)Vue.component('MyComponentName', { /* ... */ })(1)当使用 PascalCase (首字母大写命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <M翻译 2021-03-05 13:17:45 · 164 阅读 · 1 评论 -
Vue文件加载执行流程
执行流程原创 2021-03-04 23:02:31 · 2424 阅读 · 0 评论 -
Vue请求传递参数
一、get请求get请求没有请求体,传递的参数是添加到url字符串的后面:url?name=value&name1=value1。1、直接拼接axios({ method: "get", url: "http://localhost:1111/01/zc?yhm=lhj&pwd=123", //参数拼接在url后面}).then(function(resp){ console.log(resp.data) })参数附在url后面携带的参数 2、params属性原创 2021-03-03 23:17:02 · 16918 阅读 · 1 评论 -
Vue踩坑—axios数据赋值错误Uncaught (in promise) TypeError: Cannot set property ‘mes‘ of undefined
最近正在入门vue,有个重要的应用场景:需要将axios请求返回的数据赋值到data中的数据项,data中的数据项会双向绑定到页面中进行渲染。但是在回调函数中进行赋值时出现错误,原代码如下:methods:{ tijiao(){ this.axios({ method:'post', params: { yhm:this.yhm,原创 2021-03-02 11:27:39 · 11767 阅读 · 1 评论 -
IDEA创建Vue项目的两种方式
安装好Vue运行环境1、下载安装Node.js参考步骤2、安装打包工具webpack运行CMD,安装命令如下所示,其中, -g是全局安装.npm install webpack webpack-cli –g输入如下命令,若出现版本号,说明安装成功。webpack -v创建Vue项目首先,IDEA必须安装Vue.js插件。1、命令行方式(推荐)(1)新建项目,选择Static Web,并填写项目名vue(2)打开编辑器的Terminal,输入vue init webpack原创 2021-02-23 20:37:52 · 811 阅读 · 0 评论