![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
一码平串串
简约而不简单
展开
-
cnpm : 无法加载文件
系统搜索powershell,右击powershell使用管理员身份运行,然后输入以下命令执行,set-ExecutionPolicy RemoteSigned然后,选择Y,完成设置原创 2021-02-20 21:18:40 · 111 阅读 · 0 评论 -
vue3项目报错 Error: Cannot find module ‘vue-loader-v16/package.json‘
一、升级npmnpm i -g npm使用cnpm的也要升级一下cnpmcnpm i -g cnpm二、 重新下载cnpm i -D vue-loader-v16原创 2021-02-18 13:53:32 · 173 阅读 · 0 评论 -
vue3 路由hash与History的设置
一、history关键字:createWebHistoryimport { createRouter, createWebHistory } from 'vue-router'const routes = [ { path: '/userinfo', name: 'UserInfo', component: () => import('../views/UserInfo.vue')}]const router = createRouter({ history: createW原创 2021-02-16 19:53:48 · 7031 阅读 · 3 评论 -
报错: rollbackFailedOptional: verb npm-session
报错: rollbackFailedOptional: verb npm-session解决方法:使用淘宝镜像安装案例展示:安装ant-design-vue@next>npm --registry https://registry.npm.taobao.org install ant-design-vue@next搞定,这样就可以解决问题了...原创 2021-01-04 16:42:29 · 300 阅读 · 0 评论 -
报错:npm install --loglevel error
vue创建项目报错:npm install --loglevel error1、在C盘/用户/下找到文件.vuerc.npmrc2、然后删除这些文件3、错误就搞定了原创 2021-01-04 16:18:44 · 1878 阅读 · 3 评论 -
递归组件的特点
递归组件一、递归组件特点(一)name属性值是必须拥有的(二)可以在自己组件中,调用自己,而不需要引用组件(三)必须要有结束判断,以免进入死循环二、案例展示1、子组件Trees<template> <div class="Trees"> {{treeList.title}} <ul> //可以在自己组件中,调用自己,而不需要引用组件 <Trees ...原创 2020-12-10 15:55:08 · 127 阅读 · 0 评论 -
独立的弹窗组件
自定义弹窗组件一、特点(一)独立于vue实例(#app)之外的存在(二)Js动态创建简单案例展示1、弹窗jsimport Vue from 'vue';export default function dialogModel(components, props) { //创建实例 const vm = new Vue({ render(h) { //调用外部components和props return ...原创 2020-12-10 15:02:36 · 222 阅读 · 0 评论 -
修饰符.sync
修饰符.sync.sync可以实现“双向绑定”的语法糖案例展示说明:1、父组件 <SyncInput :myname.sync="username"/>2、子组件 this.$emit("update:myname",'我是一个值')父组件<template> <div class="Test1"> <h1> {{username}}</h1> <SyncInput ...原创 2020-12-10 13:47:46 · 86 阅读 · 0 评论 -
插槽要点
插槽要点1、多个插槽,父组件使用solot属性区别,子组件使用name属性区分2、样式可以存放到父组件或者子组件3、标签中有变量,必须在父组件中完成转化4、插槽类型:匿名插槽、具名插槽、作用域插槽<!-- 这是父组件 --><template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welco...原创 2020-12-04 21:50:59 · 91 阅读 · 0 评论 -
练习1-自定义input组件库知识要点
开课吧——VUE第一、插槽1、匿名用法2、具名用法3、作用域插槽原创 2020-12-04 21:31:08 · 147 阅读 · 0 评论 -
组件之间的相互通信
组件之间的相互关系一、组件传值(一)父组件=》子组件1、通过props传值2、通过refs传值3、通过children传值(注意:children对象不保证顺序和响应式)案例展示--------父组件<template> <div class="home" > <img alt="Vue logo" src="../assets/logo.png"> <!-- ****通过props传值**** -->原创 2020-12-03 15:56:26 · 912 阅读 · 0 评论 -
axios异步请求总结
axios异步请求总结第一,安装axios异步请求npm install axios --save第二、使用方法// 使用方法一this.$axios.get()this.$axios.post()// 使用方法二this.$axios({ //请求方式 method: 'get', //请求地址 url: url, //发送参数 data: {},}).then(res => { //...原创 2020-11-28 19:34:14 · 1186 阅读 · 0 评论 -
异步之后的回调this.$nextTick()
异步之后的回调this.$nextTick()this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行案例展示<script> export default { created() { console.log(this.$refs.allcity) //输出:undefined this.$nextTick(() => { co...原创 2020-11-27 14:56:00 · 295 阅读 · 0 评论 -
自定义滚动better-scroll
组件自定义滚动better-scroll第一、安装better-scroll插件npm install better-scroll --save第二、指定滚动组件<template> <div ref="area_scroll"> <ul> <li>这一个不可思议的哦</li> <li>这一个不可思议的哦</li> ...原创 2020-11-27 14:46:51 · 278 阅读 · 0 评论 -
ref与$res的关系
ref与$res的关系第一、ref标记DOME元素,$refs获取被标记的元素<template> <div id="app"> <div ref="mainBox"> <h1>在ref中的DOM元素</h1> </div> </div></template><script>export default { mounted() {...原创 2020-11-27 14:16:28 · 1295 阅读 · 0 评论 -
watch方法总结
watch方法总结watch可以监听data里面值的变化<input type="text" v-model="search_val" placeholder="小区/写字楼/学校等"><script> export default { data() { return { search_val: '', } }, watch:{...原创 2020-11-27 09:59:27 · 224 阅读 · 0 评论 -
错误:Unexpected token import
错误Unexpected token import注意: 按需加载import因为是es6语法,需要安装插件1、安装插件(@babel/plugin-syntax-dynamic-import)npm install --save-dev @babel/plugin-syntax-dynamic-import2、在babel.config.js配置文件中声明该插件module.exports = { "presets": [ "@vue/app" ],原创 2020-11-26 18:16:16 · 2750 阅读 · 0 评论 -
ESlint配置文件eslintrc.js
ESlint配置文件eslintrc.js案例展示<script>module.exports = { //解决错误: Parsing error: Unexpected token < root: true, parserOptions: { sourceType: 'module' }, parser: "vue-eslint-parser", env: { browser: true,...原创 2020-11-26 13:08:03 · 1189 阅读 · 0 评论 -
Router路由管理
Vue2.x路由管理总结(router)第一、父组件与子组件的路由管理<script>import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{ path: '/', //name: 'Index', component: () => { return import ('.....原创 2020-11-26 13:04:44 · 428 阅读 · 0 评论 -
Vuex共享数据状态管理
**Vuex状态管理**一、Vuex(Store)是什么?1、专属于Vue的2、管理数据状态的一个库3、所有组件都可访问,以方便管理数据二、什么情况使用Vuex?在中大型单页面使用,能更好的管理数据原创 2020-11-22 19:05:12 · 276 阅读 · 0 评论 -
vueCli3.x新增功能总结
**vue3.x新增功能**1、添加插件(1)在vue3.x以前添加插件npm install vuetify(2)在vue3.x以后使用此命令添加的插件能和项目融合vue add vuetify2、设置全局环境变量(1)在项目根目录新增文件 .envA:如果是开发环境,那么文件命名:.env.developmentB:如果是生产环境,那么文件命名:.env.production(2)添加变量内容,如:VUE_APP_URL = www.xiaovue.com注意原创 2020-11-21 16:33:56 · 208 阅读 · 0 评论 -
vue项目结构介绍
node_modules文件夹(1)这项目依赖的所有插件都在这个文件夹里(1)不需要上传到生产环境(2)如果缺失此文件夹,可以使用命令行;npm install命令行会根据package.json中依赖包的配置,进行下载public文件夹(1)icon图片(2)index.html 入口文件src文件夹(1)assets //静态资源(css,js)(2)components //组件babel.config.jsmodule.exports = { prese.原创 2020-11-19 17:12:39 · 776 阅读 · 0 评论 -
vueCli3.x脚手架安装步骤
**在windows环境下安装vue脚手架安装**1、安装node环境(1)进入node官网,下载node,并且进行安装。(2)如果npm需要安装插件也可以进入npm官网:npmjs.com进行搜索2、修改npm镜像,加快下载速度(这里使用淘宝镜像cnpm)(1)安装淘宝cnpm$ npm install -g cnpm --registry=https://registry.npm.taobao.org(2)查看cnpm安装是否成功cnpm -v3、安装vuecli(1)进原创 2020-11-19 15:55:31 · 857 阅读 · 0 评论 -
vue的基础知识总结
一、什么是vue?1、渐进式框架,易用,灵活,高效,可以兼容其他框架2、渐进式使项目由浅入深,由简单到复杂的方式进行开发3、vue是双向数据绑定,不用操作DOM,即可改变页面,所以开发者能更好的的专注于业务逻辑二、vue是基于虚拟DOMvue是预先通过javascript进行计算,然后在将DOM渲染出来。因为这个DOM是预处理操作,并且没有真实的操作DOM,所以,叫做虚拟DOM三、vue的基础知识1、模板插值 <div id="app"> <h1>模板原创 2020-11-19 14:02:52 · 696 阅读 · 0 评论