关注
分享
vue的一些基础知识
2b勿扰
专注技术的研究
展开
-
(精华2020年5月12日更新) vue教程篇 webpack配置详解
package.json的启动"scripts": { "build":"rimraf dist && webpack --config webpack.config.js --mode production", "dev": "webpack-dev-server --config webpack.config.js" }基本共用配置文件webpack.common.jsvar webpack = require('webpack');var path = r原创 2020-05-10 10:24:21 · 15946 阅读 · 0 评论 -
(精华2020年5月8日更新) vue教程篇 手写脚手架vue-cli
首先先上脚手架目录webpack-demowebpack-demo|-index.html|- src---- |-main.js 入口文件------|-App.vue vue文件|-package.json 工程文件|-webpack.config.js webpack配置文件|-.babelrc Babel配置文件安装如下包npm install vue -Snpm install webpack -Dnpm install webpack-cli -D原创 2020-05-08 23:44:40 · 15497 阅读 · 0 评论 -
(精华2020年5月8日更新) vue教程篇 vue-router路由的权限控制
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>权限控制- filters</title> <style> .active { font-size: 20px; color: #ff7300; text-decoration: none; } .main-menu a { display原创 2020-05-08 22:38:38 · 14637 阅读 · 0 评论 -
(精华2020年5月8日更新) vue教程篇 vue-router路由的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>路由基本用法</title> <style> /* .router-link-active{ font-size:20px; color:#ff7300;...原创 2020-05-06 23:54:36 · 14598 阅读 · 0 评论 -
(精华2020年5月6日更新) vue教程篇 slot插槽（内容分发）的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>slot内容分发</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scri...原创 2020-05-06 23:51:42 · 14807 阅读 · 0 评论 -
(精华2020年5月6日更新) vue教程篇 非父子组件相互传参（发布订阅）
第三个vue实例实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>非父子组件间的通信</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&...原创 2020-05-06 23:48:53 · 15501 阅读 · 0 评论 -
(精华2020年5月20日更新) vue教程篇 父子组件相互传参
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父子组件传参组件<...原创 2020-05-06 23:33:38 · 15636 阅读 · 0 评论 -
(精华2020年5月6日更新) vue教程篇 模板template的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>引用模板</t...原创 2020-05-06 23:21:50 · 15161 阅读 · 0 评论 -
(精华2020年5月6日更新) vue教程篇 组件component的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定义组件的方式<...原创 2020-05-06 23:18:33 · 15855 阅读 · 0 评论 -
(精华2020年5月6日更新) vue教程篇 动画transition的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画</titl...原创 2020-05-05 09:14:10 · 14822 阅读 · 0 评论 -
(精华2020年5月5日更新) vue教程篇 简单小结(2)-元素拖动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>练习：自定义指令实例（元素拖动）</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&...原创 2020-05-05 08:40:50 · 14749 阅读 · 0 评论 -
(精华2020年5月5日更新) vue教程篇 自定义指令directive的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&...原创 2020-05-05 08:33:23 · 15119 阅读 · 1 评论 -
(精华2020年5月5日更新) vue教程篇 数据监听watch的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>监视数据的变化：$wa...原创 2020-05-05 08:30:11 · 15672 阅读 · 0 评论 -
(精华2020年5月5日更新) vue教程篇 vue实例属性的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue实例的属性和方...原创 2020-05-04 18:15:44 · 14614 阅读 · 0 评论 -
(精华2020年5月4日更新) vue教程篇 计算属性computed的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&...原创 2020-05-04 17:57:27 · 14509 阅读 · 0 评论 -
(精华2020年5月4日更新) vue教程篇 vue组件生命周期
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...原创 2020-05-04 17:56:55 · 15481 阅读 · 0 评论 -
(精华2020年5月4日更新) vue教程篇 axio的使用
地址为本地，需要请求数据科研自己搭建后端api，或者用mock<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>发送AJAX请求</title> <script src="https://cdn.jsde...原创 2020-05-04 12:55:35 · 15793 阅读 · 0 评论 -
(精华2020年5月4日更新) vue教程篇 filter过滤器的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义过滤器</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script...原创 2020-05-04 12:16:55 · 14808 阅读 · 0 评论 -
(精华2020年5月4日更新) vue教程篇 v-text,v-html,v-once,v-pre,v-cloak的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模板</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>...原创 2020-05-04 12:08:45 · 15618 阅读 · 0 评论 -
(精华2020年5月4日更新) vue教程篇 class和style的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>class和styl...原创 2020-05-04 08:30:03 · 15542 阅读 · 0 评论 -
(精华2020年5月4日更新) vue教程篇 v-bind的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>属性绑定和属性的简写</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></sc...原创 2020-05-04 07:48:53 · 14476 阅读 · 0 评论 -
(精华2020年5月4日更新) vue教程篇 键盘事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>键盘事件</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&g...原创 2020-05-04 07:46:01 · 16002 阅读 · 0 评论 -
(精华2020年5月4日更新) vue教程篇 事件冒泡和默认行为
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件冒泡和默认行为</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scr...原创 2020-05-04 07:41:18 · 16022 阅读 · 0 评论 -
(精华2020年5月4日更新) vue教程篇 事件简写和事件对象$event
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件简写和事件对象$event</title> <script src="js/vue.js"></script> <script> wi...原创 2020-05-04 07:37:31 · 16043 阅读 · 0 评论 -
(精华2020年5月4日更新) vue教程篇 简单小结(1)-用户管理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>练习：用户管理</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scri...原创 2020-05-04 07:31:14 · 16041 阅读 · 0 评论 -
(精华2020年5月4日更新) vue教程篇 v-show和v-if的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>常用指令：v-show v-if</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&...原创 2020-05-04 07:20:45 · 16061 阅读 · 0 评论 -
(精华2020年5月4日更新) vue教程篇 v-on的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>常用指令：v-on</title> <!-- 事件简写和事件对象$event --> <script src="https://cdn.jsdelivr.net...原创 2020-05-04 07:12:46 · 16080 阅读 · 0 评论 -
(精华2020年5月4日更新) vue教程篇 v-for的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>常用指令：v-for</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></s...原创 2020-05-04 07:03:08 · 16093 阅读 · 0 评论 -
(精华2020年5月4日更新) vue教程篇 v-model的使用
test原创 2020-05-04 06:56:28 · 16069 阅读 · 0 评论