- 博客(22)
- 收藏
- 关注
RSS订阅原创 vue tabbar重复点击报错Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation ×××
tabbar重复点击报错
2022-06-03 18:00:59
264
原创 npm ERR! network request to https://registry.npmjs.org/axios failed, reason: Client network socket d
npm install 报错
2022-06-01 16:41:06
7060
原创 router、routes、route的区别
@router、routes、route的区别router、routes、route的区别1.router：路由器对象，new出来的路由器对象VueRouter，包含一些操作路由的功能函数，来实现编程式导航。如访问路由：router.push()和router.push()和router.push()和router.replace()2.routes：指创建vue-router路由实例的配置项，用来配置多个route路由对象3.route：指路由对象表示当前活跃的路由...
2022-05-30 22:32:49
917
原创 vue移动项目设置tabbar的显示隐藏
1.在router文件中设置meta属性const routes = [{ path: '/home', component: Home, meta:{ isShowTabBar:true//显示 } }, { path: '/cart', component: Cart, meta:{ isShowTabBar:true//显示 } }, { path: '/user', component: User, m
2022-05-30 22:21:20
762
原创 router-link的用法
@router、routes、route的区别1.router：路由器对象，是new出来的路由器对象，包含一些操作路由的功能函数，来实现编程式导航。如访问路由：router.push()和router.push()和router.push()和router.replace()2.routes：指创建vue-router路由实例的配置项，用来配置多个route路由对象3.route：指路由对象表示当前处于活跃的路由...
2022-05-30 21:44:56
9076
原创 vue-router的基本使用
@路由的基本使用：1.通过Vue.use(插件)安装插件2.配置路由和组件之间的映射关系3.导出对象传入到vue实例中4.挂载创建Home,About,User三个组件Home.vue<template> <div> <h2>我是首页</h2> <p>哈哈哈</p> </div></template><script>export default { n
2021-08-14 23:26:33
131
原创 runtime-only版本指定vue.esm.js版本
@runtime-only和runtime-compile知识小扩充runtime-only==>代码中，不可以存在任何templateruntime-compiler==>代码中，可以存在任何template，应为有compiler可以用于编译template。如果想在runtime-only版本中用template，需要配置webpackmodule:{...},resolve:{ //alias:别名 alias:{ 'vue$':'vue/dist/vue.esm
2021-08-14 13:48:12
242
原创 webpack-ES6转ES5
@webpack-ES6转ES5的babel-loader安装babel-loader：npm install --save dev babel-loader @7 babel-core babel-preset-es2015用法 ：在 webpack 配置对象中，需要将 babel-loader 添加到 module 列表中module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_c
2021-08-14 13:21:27
866
原创 cli脚手架的runtime-compiler和runtime-only的区别
@runtime-compiler和runtime-only的区别runtime-compiler的步骤：template -> ast -> render -> vDOM -> 真实DOMruntime-only的步骤：render -> vDOM -> 真实DOMast：abstract syntax tree（抽象法语法树）vDOM ：virtual dom（虚拟dom）runtime-only：将template在打包的时候，就已经编译为render
2021-08-13 15:35:07
113
原创 vue模块化，webpack的使用
先搞清楚node、npm和webpack之间的关系.Node.js ：是一个基于Chrome JavaScript 运行时建立的一个平台.npm：包管理工具，是于Node社区中产生的，是node.js的官方包管理工具，下载安装好node的时候，npm就自动安装好了.webpack：是一个模块化打包工具，是npm生态中的一个模块，可以通过全局或局部安装webpack来使用webpack对项目文件进行打包；运行必须依赖于node的环境，没有node是不能打包的，但是webpack打包后的项目本身只是前端静
2021-08-02 21:35:33
143
原创 Vue中的slot-插槽
插槽（Slot）是Vue提出来的一个概念，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。. 插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>slot-插槽</title></head><
2021-07-31 16:21:12
154
原创 vue组件访问 -父访问子-$children、$refs -子访问父-$parent、$root
父访问子-children、children、children、refs子访问父-parent、parent、parent、root代码演示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父访问子</title></head><body><div id="app"><!-- {{
2021-07-30 22:08:25
131
原创 vue父子组件之间的通信
@父子组件通信父传子：props子传父：通过$emit发射事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父子组件通信</title></head><body><!--第一部分：父传子--><div id="app1"><!-- {{message}}-->
2021-07-26 23:29:58
205
2
原创 组件化小应用
@组件化语法糖，全局注册和局部注册全局注册==>Vue.component(‘组件名’,构造器(也可以说是对象))局部注册==>components:{组件名:构造器(也可以说是对象)}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件化应用</title></head><body><
2021-07-26 17:51:30
108
原创 vue组件化
@1.组件化三大步骤（1）构建组件构造器（2）注册组件（3）使用组件@2.认识父组件和子组件的关系<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>初认识组件化</title></head><body><!--1.组件思路：--><!--（1）构建组件构造器--><!
2021-07-26 16:22:51
94
原创 vue表单绑定v-model
@v-model结合radio、checkbox的使用代码演示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-model</title></head><body><div id="app"><!-- v-model其实是个语法糖 背后v-bind和v-on两个操作-->
2021-07-25 22:41:11
109
原创 vue的高阶函数
@高阶函数filter():用于把Array的某些元素过滤掉，然后返回剩下的元素。map():返回一个新数组，数组中的元素为原始数组元素经处理后的值。reduce():接收一个函数作为累加器，数组中的每个值（从左到右）开始累计，最终计算为一个值。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高阶函数</title></h
2021-07-25 22:30:09
395
原创 Vue框架入门3
@简单购物车；学习笔记，加油------其中涉及到动态绑定v-bind属性语法糖（简写）：v-bind: =>:v-on: =>@代码如下.csstable{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing:0;}th,td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-align: center;}t
2021-07-25 16:09:33
121
原创 Vue框架入门2
@响应式方法：push()、pop()、shift()、unshift() 、splice()、sort()、reverse()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> {{message}} &l
2021-07-25 15:42:03
141
原创 Vue 框架入门
@mustache语法，v-指令v-cloak，v-once，v-html，v-text，v-pre代码演示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>指令</title></head><style> [v-cloak]{ display: none; }</style>
2021-07-25 15:11:38
133
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人