- 博客(118)
- 收藏
- 关注
RSS订阅
1原创 git 常用命令
初次运行 git 前的配置$ git config --list --show-origin配置用户# 查看$ git config user.name# 修改$ git config user.name = 'mary'初始化本地仓库执行之后，当前文件夹下面会多出一个 .git 的隐藏文件$ git init add commit 本地仓库 —------> 暂存区 -------> 远程仓库 已.
2021-10-21 20:54:55
114
原创 关于引入 js 文件
一、说说 script 标签的几个常用属性async 表示立即下载该 js 文件，但不妨碍页面中的其他操作（只对外部 js 文件有效）defer 表示该 js 文件可以延迟到整个页面被解析并显示之后再执行（只对外部 js 文件有效）src 指定要引入的 js 文件路径type 是 language 的替代属性，表示当前脚本的类型，如 text/javascript | text/babel二、引入 js 文件正常引入<script src="./js/routerList.js"
2021-09-24 10:03:05
6764
原创 vue-router
一、路由的基本使用安装 npm i vue-router引入// main.jsimport VueRouter from "vue-router";Vue.use(VueRouter);router 配置项// index.jsimport VueRouter from "vue-router";import About from "../components/About.vue";import Home from "../components/Home.vue";//
2021-09-20 10:56:54
98
原创 vuex 的模块化+命名空间
一、目的：让代码更好维护，让多种数据分类更加明确二、修改 store.jsconst person = { namespaced: true; // 开启命名空间 state: {}, getters: {}, actions: {}, mutations: {}}const count = { namespaced: true; // 开启命名空间 state: {}, getters: {}, actions: {}, mutations: {}}const stor
2021-09-19 10:35:07
100
原创 vuex 状态管理
一、在组件中读取 vuex 中的数据$store.state.sum;二、组件中修改 vuex 中的数据$store.dispatch('actions中的方法名', 数据)$store.commit('mutations中的方法名', 数据)如果没有网络请求或者其他业务逻辑，组件中也可以越过 actions（不写 dispatch 直接写 commit三、getters 的使用// 准备 state 用于存储数据const state = { sum: 1,};// 加工
2021-09-18 15:53:37
90
原创 vue 插槽
让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于 父组件 ⇒ 子组件默认插槽<!-- 父组件中 --><Category> <div>html 结构</div></Category><!-- 子组件中 --><template> <div> <!-- 定义插槽 --> <slot>插槽默认内容</slot> <
2021-09-16 10:36:56
69
原创 Vue 脚手架配置代理
一、在 vue.config.js 中添加配置devServer: { proxy: 'http://localhost:5000'}优点：配置简单，请求资源时直接发送给前端（8080）即可缺点：不能配置多个代理，不能灵活的控制请求是否走代理工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）二、具体代理规则：module.exports = { devServer: { proxy: { '/api1': { // 配置
2021-09-14 16:46:09
248
原创 Vue 封装的过渡与动画
一、作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名二、图示三、写法：元素进入的样式 v-enter | v-enter-active | v-enter-to元素离开的样式 v-leave | v-leave-active | v-leave-to使用 transition 包裹要过渡的元素，并配置 name 属性：<transition> <h1 v-show="isShow">哈哈哈</h1></transitio
2021-09-12 18:22:14
132
原创 Vue.$nextTick
一、语法：this.$nextTick(回调)二、在下一次 DOM 更新结束后执行其指定的回调函数三、啥时候调用：当改变数据后，要基于更新后的新 DOM 进行某些操作时，要在 nextTick 所指定的回调函数中执行
2021-09-12 11:55:08
114
原创 消息订阅与发布（pubsub)
一、一种组件间通信的方式，适用于任意组件间通信。二、使用步骤：安装 pubsub：npm i pubsub-js引入：import pubsub from 'pubsub-js'接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调在A组件中methods() { demo(msgName, data) {....} // msgName 消息名称 // data 接收传过来的数据}...mounted() { this.pId = pubsub.subscribe('xx
2021-09-12 10:40:04
129
原创 全局事件总线 (GlobalEventBus)
一、一种组件间通信的方式，适用于任意组件间通信。二、安装全局事件总线：new Vue({ ... BeforeCreate() { Vue.prototype.$bus = this; // 安装全局事件总线, $bus 就是当前的应用的 VueComponent 实例对象 }})三、使用事件总线接收数据：A组件想接收数据，则A组件中给 $bus 绑定自定义事件，事件的回调在A组件中methods() { demo(data) {...}}mounted() { this
2021-09-12 10:18:57
415
原创 Vue 组件的自定义事件
一种组件间通信的方式，适用于：子组件 ==> 父组件使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。在父组件中绑定自定义事件// 第一种方式<Demo @demo="test"/> || <Demo v-on:demo="test"/>// 第二种方式<Demo ref="demo"/>...mounted() { this.$refs.xxx.$on('demo', this.test.
2021-09-11 19:01:06
137
原创 scoped 样式
一、加不加 scoped ？加上之后组件之间互相独立 a 组件不能访问 b 组件定义的样式<!-- a.vue --><style lang="less" scoped>#bg-red { background-color: #f00;}</style>不加，相当于是定义的全局样式，每个组件都可以访问你定义的样式在 App.vue 的样式属性中就没有 scoped ，因为每个组件都要汇总到 App.vue 中，每个组件都可以访问 App.vue
2021-09-09 15:00:12
144
原创 脚手架 插件
一、定义插件plugin.js --> export default{} --> install() -->// 全局过滤器Vue.filter('myFilter', function (value) { return value.slice(0, 4);});// 全局指令Vue.directive("fbind", { bind(element, binding) { element.value = binding.value; }, inser
2021-09-08 19:16:17
162
原创 脚手架 mixin (混入)
可以把多个组件共用的配置提取成一个混入对象使用方式：定义混合{ data() {}, methods() {} ...}使用混合// 1. 引入混合import {hunhe1, hunhe2} from /..mixin/// 1. 在 main.js 中全局混入：Vue.mixin(hunhe1)// 2. 局部混入 mixins: [hunhe1]...
2021-09-08 17:12:01
64
原创 脚手架 - props
一、props — 让组件接收外部传过来的数据传递数据<Example name="xxx"/>接收数据// 1. 只接收props: ['name']// 2. 接收并限制类型props: { name: String}// 3. 接收、限制类型、必要性、默认值props: { name: { type: String, // 类型 required: true, // 必要性 default: 'mary' // 默认值 }}pro
2021-09-08 17:06:32
96
原创 脚手架 - ref
被用来给元素或子组件注册引用信息（id的替代者）应用在 html 标签上获取的是真实 DOM 元素，应用在组件标签上的是组件实例对象 VueComponent{}使用方式(1). 打标识<!-- 给真实 DOM 元素打标识 --><h1 ref="xxx">...</h1><!-- 给组件打标识 --><组件 ref="xxx">...</组件>(2). 获取this.$refs.标识名如果用 id 做标识.
2021-09-08 16:01:52
62
原创 vue 脚手架
一、 脚手架 初始全局安装脚手架 npm i -g @vue/cli切换到项目根目录，使用 vue create 项目名称 创建项目使用 npm run serve | yarn serve 启动项目如果中途卡顿使用 npm 淘宝镜像 npm config set registry --> https://registry.npm.taobao.orgvue 隐藏了所有 webpack 相关配置，使用 vue inspect > output.js 进行查看二、脚手架
2021-09-08 10:53:06
55
原创 vue 组件 - 非单文件组件
一、定义组件const school = Vue.extend({ template: ` // ----------------------------> 模板 <div> ... 此处是结构 </div> `, data() { // ----------------------------> 模板数据 return { msg: '此处是数据' } }})二、注册组件// 全局注册V
2021-09-06 09:42:09
81
原创 聊聊 vue 生命周期
一、常用的常用的生命周期钩子：mounted: 发送 ajax 请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】mounted() { console.log('vm 实例被挂载之后：mounted'); this.timer = setInterval(() => { ... }}beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】beforeDestroy() { console.log('vm 实例被挂载将要被
2021-09-05 17:52:29
85
原创 react 组件传值
一、父传子 - 函数式组件function Father (props) { render() { <div> <Child getMsg={props.msg.money}/> </div> }}function Child (props) { }const msg = {money: 1000000};ReactDOM.render(<Father {...msg} />, document.getElementByi
2021-09-05 14:08:34
63
原创 使用 ref 对已渲染到页面的节点进行标记
一、字符串形式的 ref<input type="text" /*给标签打上标记 ipt */ ref="ipt" />拿到标记的节点，对其进行操作handleClick = () => { console.log(this); // 用 ref 标记了的标签，都会保存在 refs 里面 console.log(this.refs); // 获取 refs console.log(this.refs.ipt); // 获取 refs 里面的标记，返回标记所对应的标
2021-09-05 10:28:28
179
原创 组件的 props
一、函数式组件的 propsfunction Demo (props) { // 由于函数式组件没有自己的 this 必须指定 props return ( <div> <ul> <li>{props.name}</li> <li>{props.age}</li> </ul> </div> )}// 抽离挂到组件上面的 pro
2021-09-05 10:17:21
57
原创 react 组件
一、函数式组件{/* - 定义组件的组件名 大写 - <组件名/> -- 单标签的形式 - 函数式组件没有 this*/}// 1. 定义组件名 大写function Demo() { return <h1>我是函数式组件</h1>}// 2. 将组件渲染到页面ReactDOM.render(<Demo/>, document.getElementById('test'));二、类式组件{/*
2021-09-05 10:07:46
123
原创 jsx 语法规范
一、插值语法 – {}const str = 'hello react';const VDOM = <h1>{str}</h1>; // 注意：是一对大括号 {} 和 Vue( {{}} ) 区分开二、给标签添加类名 – className= "" | {}/* css: .active { background-color: red; }*/const VDOM = <h1 className="active">hello react&l
2021-09-05 09:59:09
118
原创 初识 react
<!-- 学 react 的原因： 1. 原生 js 操作 DOM 繁琐、效率低，每次都要去获取 DOM 每次操作 DOM 都会引起页面的重绘重拍 2. 原生 js 没有组件化，代码复用率低 react 的特点： 1. 采用组件化模式，声明式编码来提高开发效率以及组件复用率 2. 在 React Native 可以使用 react 语法进行移动端开发 3. 使用虚拟 DOM + Diffing 比较算法，尽量减少与真实 D
2021-09-05 09:48:09
156
原创 vue 自定义指令
一、定义语法局部指令 – directivesnew Vue({ directives:{指令名: 配置对象 | 回调函数}})全局指令 – driectivesVue.directive(指令名: 配置对象 | 回调函数)二、配置对象中常用的3个回调：bind: 指令与元素成功绑定时调用inserted: 指令所在元素被插入页面时调用update: 指令所在模板结构被重新解析时调用如果直接在 directive 里面写函数，就是 bind + update三、备注
2021-09-05 09:28:50
479
原创 vue 内置指令
渲染文本 – v-text<!-- v-text 指令： 1. 作用：向其所在的节点中渲染文本内容 2. 与插值语法的区别：v-text 会替换掉节点中的内容，{{xxx}} 则不会--><div id="root"> <p>{{msg}} {{num}}</p> ==> <h1>哈哈哈</h1> 0 <p v-text="msg">{{num}}</p> ==>.
2021-09-04 17:03:12
66
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人