john987321456的博客

系统搜索powershell，右击powershell使用管理员身份运行，然后输入以下命令执行， set-ExecutionPolicy RemoteSigned 然后，选择Y，完成设置

一、升级npm npm i -g npm 使用cnpm的也要升级一下cnpm cnpm i -g cnpm 二、 重新下载 cnpm i -D vue-loader-v16

一、history 关键字：createWebHistory import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/userinfo', name: 'UserInfo', component: () => import('../views/UserInfo.vue') }] const router = createRouter({ history: createW

报错： rollbackFailedOptional: verb npm-session 解决方法：使用淘宝镜像安装 案例展示：安装ant-design-vue@next >npm --registry https://registry.npm.taobao.org install ant-design-vue@next 搞定，这样就可以解决问题了 ...

vue创建项目报错：npm install --loglevel error 1、在C盘/用户/下找到文件 .vuerc .npmrc 2、然后删除这些文件 3、错误就搞定了

递归组件 一、递归组件特点 （一）name属性值是必须拥有的 （二）可以在自己组件中，调用自己，而不需要引用组件 （三）必须要有结束判断，以免进入死循环 二、案例展示 1、子组件Trees <template> <div class="Trees"> {{treeList.title}} <ul> //可以在自己组件中，调用自己，而不需要引用组件 <Trees ...

自定义弹窗组件 一、特点 （一）独立于vue实例(#app)之外的存在 （二）Js动态创建 简单案例展示 1、弹窗js import Vue from 'vue'; export default function dialogModel(components, props) { //创建实例 const vm = new Vue({ render(h) { //调用外部components和props return ...

修饰符.sync .sync可以实现“双向绑定”的语法糖 案例展示 说明： 1、父组件 <SyncInput :myname.sync="username"/> 2、子组件 this.$emit("update:myname",'我是一个值') 父组件 <template> <div class="Test1"> <h1> {{username}}</h1> <SyncInput ...

插槽要点 1、多个插槽，父组件使用solot属性区别，子组件使用name属性区分 2、样式可以存放到父组件或者子组件 3、标签中有变量，必须在父组件中完成转化 4、插槽类型：匿名插槽、具名插槽、作用域插槽 <!-- 这是父组件 --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welco...

开课吧——VUE 第一、插槽 1、匿名用法 2、具名用法 3、作用域插槽

组件之间的相互关系 一、组件传值 （一）父组件=》子组件 1、通过props传值 2、通过refs传值 3、通过children传值（注意：children对象不保证顺序和响应式） 案例展示 --------父组件 <template> <div class="home" > <img alt="Vue logo" src="../assets/logo.png"> <!-- ****通过props传值**** -->

axios异步请求总结 第一，安装axios异步请求 npm install axios --save 第二、使用方法 // 使用方法一 this.$axios.get() this.$axios.post() // 使用方法二 this.$axios({ //请求方式 method: 'get', //请求地址 url: url, //发送参数 data: {}, }) .then(res => { //...

异步之后的回调this.$nextTick() this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行 案例展示 <script> export default { created() { console.log(this.$refs.allcity) //输出：undefined this.$nextTick(() => { co...

组件自定义滚动better-scroll 第一、安装better-scroll插件 npm install better-scroll --save 第二、指定滚动组件 <template> <div ref="area_scroll"> <ul> <li>这一个不可思议的哦</li> <li>这一个不可思议的哦</li> ...

ref与$res的关系 第一、ref标记DOME元素，$refs获取被标记的元素 <template> <div id="app"> <div ref="mainBox"> <h1>在ref中的DOM元素</h1> </div> </div> </template> <script> export default { mounted() { ...

watch方法总结 watch可以监听data里面值的变化 <input type="text" v-model="search_val" placeholder="小区/写字楼/学校等"> <script> export default { data() { return { search_val: '', } }, watch:{ ...

错误Unexpected token import 注意: 按需加载import因为是es6语法，需要安装插件 1、安装插件（@babel/plugin-syntax-dynamic-import） npm install --save-dev @babel/plugin-syntax-dynamic-import 2、在babel.config.js配置文件中声明该插件 module.exports = { "presets": [ "@vue/app" ],

ESlint配置文件eslintrc.js 案例展示 <script> module.exports = { //解决错误： Parsing error: Unexpected token < root: true, parserOptions: { sourceType: 'module' }, parser: "vue-eslint-parser", env: { browser: true, ...

Vue2.x路由管理总结（router） 第一、父组件与子组件的路由管理 <script> import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [{ path: '/', //name: 'Index', component: () => { return import ('.....

** Vuex状态管理 ** 一、Vuex（Store）是什么？ 1、专属于Vue的 2、管理数据状态的一个库 3、所有组件都可访问，以方便管理数据 二、什么情况使用Vuex？ 在中大型单页面使用，能更好的管理数据

** vue3.x新增功能 ** 1、添加插件 （1）在vue3.x以前添加插件 npm install vuetify （2）在vue3.x以后 使用此命令添加的插件能和项目融合 vue add vuetify 2、设置全局环境变量 （1）在项目根目录新增文件 .env A：如果是开发环境，那么文件命名：.env.development B：如果是生产环境，那么文件命名：.env.production （2）添加变量内容，如： VUE_APP_URL = www.xiaovue.com 注意

node_modules文件夹 （1）这项目依赖的所有插件都在这个文件夹里 （1）不需要上传到生产环境 （2）如果缺失此文件夹，可以使用命令行； npm install 命令行会根据package.json中依赖包的配置，进行下载 public文件夹 （1）icon图片 （2）index.html 入口文件 src文件夹 （1）assets //静态资源（css,js） （2）components //组件 babel.config.js module.exports = { prese.

** 在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 -v 3、安装vuecli （1）进

一、什么是vue？ 1、渐进式框架，易用，灵活，高效，可以兼容其他框架 2、渐进式使项目由浅入深，由简单到复杂的方式进行开发 3、vue是双向数据绑定，不用操作DOM，即可改变页面，所以开发者能更好的的专注于业务逻辑 二、vue是基于虚拟DOM vue是预先通过javascript进行计算，然后在将DOM渲染出来。因为这个DOM是预处理操作，并且没有真实的操作DOM，所以，叫做虚拟DOM 三、vue的基础知识 1、模板插值 <div id="app"> <h1>模板