![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue坎坷之路总结
vue学习过程中经历的问题及知识
记或往
这个作者很懒,什么都没留下…
展开
-
使用vue-cli简单搭建一个vue3.0项目
使用vue-cli简单搭建一个项目安装Vue-Clinpm install -g @vue/clivue --version创建项目vue create 项目名进入项目输入:npm run serve原创 2021-05-20 10:38:07 · 150 阅读 · 0 评论 -
使用vue-cli搭建一个简单的webpack项目
使用vue-cli搭建一个简单的webpack项目vue-cli是官方提供的一个脚手架,用于快速开发生成一个vue项目模板。开始搭建首先搭建nodejs环境1.安装node.js官网下载nodejs2.配置nodejs环境变量3.检测环境变量补充:因为npm是到国外下载镜像,比较慢,所以我们可以使用cnpmnpm install cnpm -gnpm install --registry=http://registry.npm.taobao.org搭建vue-cli环境1.下载原创 2021-05-20 10:15:35 · 563 阅读 · 3 评论 -
vue中定义data:{} 和 data(){ return }的区别
vue中定义data:{} 和 data(){ return }的区别1.第一种写法:对象var app = new Vue({ el: '#app', data: { name: 'yang' }})2.第二种写法:函数ES6规范中的写法var app = new Vue({ el: '#app', data() { return { name: 'yang' } }})区别:在简单的vue实例应用中,三种写法几乎是没有什么原创 2021-04-14 17:03:04 · 2461 阅读 · 0 评论 -
Vue+Element-UI树形控件报错:“TypeError: this.$refs.tree is undefined“
Vue+Element-UI树形控件报错:“TypeError: this.$refs.tree is undefined”报错信息:报错场景:使用axios发送异步请求获得角色的所有权限:将权限赋值到一个数组中:这里我的想法是在弹出会话框前使用 this.$refs.tree.setCheckedKeys(this.functionList); 勾选上角色所有权限效果图:解决过程:一开始我使用的是 ::default-checked-keys="functionList"后来原创 2021-04-13 19:53:44 · 2886 阅读 · 0 评论 -
Vue嵌套路由踩坑-Component template should contain exactly one root element.
主题:Vue嵌套路由踩坑-Component template should contain exactly one root element.vue-cli嵌套路由案例报错信息:先看这个工程的代码:工程目录结构:main.jspimport Vue from 'vue'import App from './App'//扫描router路径下的所有组件import router from './router';//导入 element-ui 的组件和css样式sassimpor原创 2021-03-17 19:34:42 · 439 阅读 · 0 评论 -
Vue的axios发送异步请求的使用
Vue的axios发送异步请求的使用Axios是一个开源的可以用在浏览器端和Nodejs的异步通信框架,主要实现ajax异步通信。vue2.0后推荐使用axios框架,少用jquery,因为jquery操作Dom太过频繁。下面我用CDN的方式加载axios需要的环境来演示Axios的使用:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title原创 2021-03-12 16:35:43 · 587 阅读 · 0 评论 -
Vue的Slot插槽的使用
Vue的Slot插槽的使用Vue中我们使用 <slot> 元素作为承载分发内容的出口,可以引用在组合组件的场景中。下面我用一个综合案例来表现插槽的使用:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <p原创 2021-03-12 16:19:33 · 79 阅读 · 0 评论 -
Vue的Computed计算属性的使用
Vue的Computed计算属性的使用computed和methods类似computed只能调用一次,methods可以调用多次,computed如果没有改变就会存在缓存中如果computed中的方法有所改变则重新计算<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> &l原创 2021-03-12 16:12:27 · 436 阅读 · 0 评论 -
Vue的Componet组件创建和使用
Vue的Componet组件创建和使用component组件,我觉得和jsp中的 <include>标签类似的效果可以引入一个html模块显示在你需要放的地方。那我们用一个简单的例子感受一下component组件的使用:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body&原创 2021-03-12 15:50:01 · 451 阅读 · 0 评论