- 博客(118)
- 收藏
- 关注
RSS订阅原创 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
185
原创 关于引入 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
6917
原创 vue-router
一、路由的基本使用 安装 npm i vue-router 引入 // main.js import VueRouter from "vue-router"; Vue.use(VueRouter); router 配置项 // index.js import VueRouter from "vue-router"; import About from "../components/About.vue"; import Home from "../components/Home.vue"; //
2021-09-20 10:56:54
168
原创 vuex 的模块化+命名空间
一、目的：让代码更好维护，让多种数据分类更加明确 二、修改 store.js const person = { namespaced: true; // 开启命名空间 state: {}, getters: {}, actions: {}, mutations: {} } const count = { namespaced: true; // 开启命名空间 state: {}, getters: {}, actions: {}, mutations: {} } const stor
2021-09-19 10:35:07
178
原创 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
158
原创 vue 插槽
让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于 父组件 ⇒ 子组件 默认插槽 <!-- 父组件中 --> <Category> <div>html 结构</div> </Category> <!-- 子组件中 --> <template> <div> <!-- 定义插槽 --> <slot>插槽默认内容</slot> <
2021-09-16 10:36:56
124
原创 Vue 脚手架配置代理
一、在 vue.config.js 中添加配置 devServer: { proxy: 'http://localhost:5000' } 优点：配置简单，请求资源时直接发送给前端（8080）即可 缺点：不能配置多个代理，不能灵活的控制请求是否走代理 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源） 二、具体代理规则： module.exports = { devServer: { proxy: { '/api1': { // 配置
2021-09-14 16:46:09
338
原创 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
218
原创 Vue.$nextTick
一、语法：this.$nextTick(回调) 二、在下一次 DOM 更新结束后执行其指定的回调函数 三、啥时候调用：当改变数据后，要基于更新后的新 DOM 进行某些操作时，要在 nextTick 所指定的回调函数中执行
2021-09-12 11:55:08
173
原创 消息订阅与发布（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
208
原创 全局事件总线 (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
491
原创 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
220
原创 Xshell 的基本使用
软件长这样 Xshell 链接地址 一、输入 ifconfig 查看 linux ip 地址 二、远程连接服务器 三、测试连接
2021-09-10 16:57:34
153
原创 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
236
原创 脚手架 插件
一、定义插件 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
238
原创 脚手架 mixin (混入)
可以把多个组件共用的配置提取成一个混入对象 使用方式： 定义混合 { data() {}, methods() {} ... } 使用混合 // 1. 引入混合 import {hunhe1, hunhe2} from /..mixin/ // 1. 在 main.js 中全局混入： Vue.mixin(hunhe1) // 2. 局部混入 mixins: [hunhe1] ...
2021-09-08 17:12:01
109
原创 脚手架 - 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
146
原创 脚手架 - ref
被用来给元素或子组件注册引用信息（id的替代者） 应用在 html 标签上获取的是真实 DOM 元素，应用在组件标签上的是组件实例对象 VueComponent{} 使用方式 (1). 打标识 <!-- 给真实 DOM 元素打标识 --> <h1 ref="xxx">...</h1> <!-- 给组件打标识 --> <组件 ref="xxx">...</组件> (2). 获取 this.$refs.标识名 如果用 id 做标识.
2021-09-08 16:01:52
109
原创 vue 脚手架
一、 脚手架 初始 全局安装脚手架 npm i -g @vue/cli 切换到项目根目录，使用 vue create 项目名称 创建项目 使用 npm run serve | yarn serve 启动项目 如果中途卡顿 使用 npm 淘宝镜像 npm config set registry --> https://registry.npm.taobao.org vue 隐藏了所有 webpack 相关配置，使用 vue inspect > output.js 进行查看 二、脚手架
2021-09-08 10:53:06
102
原创 vue 组件 - 非单文件组件
一、定义组件 const school = Vue.extend({ template: ` // ----------------------------> 模板 <div> ... 此处是结构 </div> `, data() { // ----------------------------> 模板数据 return { msg: '此处是数据' } } }) 二、注册组件 // 全局注册 V
2021-09-06 09:42:09
144
原创 聊聊 vue 生命周期
一、常用的常用的生命周期钩子： mounted: 发送 ajax 请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】 mounted() { console.log('vm 实例被挂载之后：mounted'); this.timer = setInterval(() => { ... } } beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】 beforeDestroy() { console.log('vm 实例被挂载将要被
2021-09-05 17:52:29
144
原创 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
116
原创 使用 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
255
原创 组件的 props
一、函数式组件的 props function Demo (props) { // 由于函数式组件没有自己的 this 必须指定 props return ( <div> <ul> <li>{props.name}</li> <li>{props.age}</li> </ul> </div> ) } // 抽离挂到组件上面的 pro
2021-09-05 10:17:21
124
原创 react 组件
一、函数式组件 {/* - 定义组件的组件名 大写 - <组件名/> -- 单标签的形式 - 函数式组件没有 this */} // 1. 定义组件名 大写 function Demo() { return <h1>我是函数式组件</h1> } // 2. 将组件渲染到页面 ReactDOM.render(<Demo/>, document.getElementById('test')); 二、类式组件 {/*
2021-09-05 10:07:46
182
原创 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
203
原创 初识 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
235
原创 vue 自定义指令
一、定义语法 局部指令 – directives new Vue({ directives:{指令名: 配置对象 | 回调函数} }) 全局指令 – driectives Vue.directive(指令名: 配置对象 | 回调函数) 二、配置对象中常用的3个回调： bind: 指令与元素成功绑定时调用 inserted: 指令所在元素被插入页面时调用 update: 指令所在模板结构被重新解析时调用 如果直接在 directive 里面写函数，就是 bind + update 三、备注
2021-09-05 09:28:50
626
原创 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
122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人