- 博客(45)
- 收藏
- 关注
RSS订阅原创 微信小程序----第四天
uni-app：是一个使用 Vue.js 开发所有前端应用的框架。官网条件编译：条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。#ifndef H5需条件编译的代码#endif H5平台#ifndef MP-WEIXIN需条件编译的代码#endif 微信小程序 loginFn() { // #ifdef MP-WEIXIN this.wxLogin...
2022-04-21 21:45:38
859
原创 小程序----第四天
微信小程序父子通信方法一// 子组件中定义 propertiesproperties:{ // 属性名:类型 age: Number}<!-- 子组件使用自定义属性 --> {{ 属性名 }} {{ age }}<!-- 父组件传递数据 --><子组件 属性名="{{ 变量 }}"></子组件><子组件 age="{{ 18 }}"></子组件>方法二通过 selectComponent 获取子...
2022-04-19 22:08:18
163
原创 微信小程序---第三天
wxs模块：WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。每个 wxs 模块均有一个内置的 module 对象。需要定义module，用于访问。模块化要遵循commonJS规范要暴露出去<text class="price">{{tools.tofix(item.price_info)}}元起</text>====================================================
2022-04-18 21:04:57
201
原创 微信小程序第二天
navigator：默认只能跳转到非tabBar页面，如果要跳转到tabBar页面，需要配置 open-type属性open-type属性：默认navigate 跳转到非tabBar页面redirect 重定向switchTab 跳转到tabBar页面reLaunch 打开小程序navigateBack 返回，不需要设置urlexit 退出小程序编程式导航：wx.navigateTo 类似push的效果wx.redirectTo 类似replace的效果跳转到tabBar页面，ta
2022-04-17 21:53:25
118
原创 wx小程序----第一天
安装wx开发者工具=>wx公众平台注册账号pages:存放所有小程序的页面app.js:小程序的入口页面app.json:全局的配置文件app.wxss全局的样式文件常用的组件：view、swiper、scroll-view,详情见：官方文档导航组件：navigator，事件绑定：bindtap、catchtap（可以阻止冒泡）渲染列表：<view wx:for="{{arr2}}" wx:key="index"><view>姓名是{{it
2022-04-16 21:37:42
85
原创 人资项目-首页模块渲染,知识点总结
混入 (mixin) ：混入其实就是vue组件的配置项可以局部混入、也可以全局混入注册的方法有区别：官方文档混入的原则：data里面有变量、混入也有，以data的为主；methods有方法，混入也有，以data的为主；生命周期中的是合并，都执行，先执行混入再执行页面。//全局注册import checkPermission from '@/mixin/checkPermission'Vue.mixin(checkPermission)//局部注册<script>.
2022-04-07 21:05:15
126
原创 黑马头条-路由权限
Model是代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View是代表UI组件，它负责将数据模型转化成UI展现出来。ViewModel是一个同步View和Model的对象。在MVVM框架下，View和Model之间并没有直接联系，而是通过ViewModel（桥梁）进行交互。Model和ViewModel之间的交互是双向的。ViewModel通过双向数据绑定将View和Model层连接了起来，而View和Model之间的同步工作都是完全自动的，无需人为操作。nextTick
2022-04-06 21:20:13
124
原创 人资项目-员工角色,权限管理
URL.createObjectURL(文件信息)：会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。css加权重筛选/deep/、::v-deep：<style lang="scss" scoped>//less /deep///scss ::v-deep.hidden { ::v-deep .el-upload--picture-card { display: none; }}</style>ResetFul接口规范...
2022-04-05 20:20:20
122
原创 人资项目-员工信息详情页
页面传值的方式:1.url传值,(动态路由,查询参数)2.本地存储3.vuex--------------------------------------// ResetFul 接口规范// 用户功能的地址是 /admin/user// 读取用户列表 请求方式为： GET 地址为 /admin/user// 读取单个用户 请求方式为： GET 地址为 /admin/user/:id// 新增单个用户 请求方式为： POST 地址为 /admi...
2022-04-03 21:53:04
396
原创 黑马头条-替换对象的键,element-ui
element-ui表单验证三要素：el-form需要有model属性：要有rule属性用于校验规则：ref属性el-form-item需要有prop属性el-input需要有v-model绑定快速替换数组中对象key的方法：const arr = [{name:'张三',age:20},{name:'李四',age:22},{name:'王五',age:21}]let data = JSON.stringify(arr).replaceAll('name','xm')JSON.p..
2022-04-01 21:54:34
120
原创 黑马头条-新增员工
插件：通常用来为 Vue 添加全局功能。使用插件：通过全局方法 Vue.use() 使用插件。开发插件：Vue.js 的插件需要暴露一个 install 方法。这个方法的第一个参数是 Vue 实例，第二个参数是一个可选的选项对象：import PageTools from "./PageTools";export default { install(Vue) { // 注册全局的通用组件对象 Vue.component("PageTools", PageTools);...
2022-03-31 22:02:01
86
原创 黑马头条-公司和角色
通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据：<template slot-scope="{ row }"> <el-button size="small" type="success">分配权限</el-button> <el-button size="small" type="primary" @click="editRole(ro...
2022-03-29 21:37:07
99
原创 黑马头条-组织构架,表单校验
element-ui自定义表单校验：表单校验--根据当前部门id，找到所有子部门相关的数据，判断是否重复 const checkNameRepeat = async (rule, value, callback) => { // 先要获取最新的组织架构数据 const { depts } = await getDepartments(); // depts是所有的部门数据 // 如何去找技术部所有的子节点 const isRepea...
2022-03-28 20:49:27
96
原创 黑马头条-路由和页面
动态路由,当有多个子路由时,写在实例中,为以后的修改不方便,我们就用动态路由,方便,易操作没个页面路由的js页面中import Layout from "@/layout";// { path: '', component: '' }// 每个子模块 其实 都是外层是layout 组件位于layout的二级路由里面export default { path: "/approvals", // 路径 name: "approvals", // 给路由规则加一个name...
2022-03-26 20:55:35
170
原创 黑马头条-主页模块
在main.js中进行全局注册：import * as directives from '@/directives'// 注册自定义指令// 遍历所有的导出的指令对象 完成自定义全局注册Object.keys(directives).forEach(key => { // 注册自定义指令 Vue.directive(key, directives[key])})此导入语法可以获取文件中所有的指令对象：import * as 变量 得到的是一个对象{ 变量1：对象1，变量2： 对象..
2022-03-25 20:43:40
142
原创 人资项目--登录模块,解决跨域问题
由于我们的请求,涉及到跨域问题,可以通过代理的方式,进行解决.module.exports = { devServer: { // 代理配置 proxy: { // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制 // localhost:8888/api/abc => 代理给另一个服务器 // 本地的前端 =》 本地的后端 =》 代理我们向另一个服务器发请求 （行得通） // 本地的前...
2022-03-24 20:12:13
456
原创 人力资源项目--初始化
git clone 仓库地址npm i install 下载依赖包不行的话垫片npm install --save core-js@3.21.1npm run dev 启动在项目进行改进sass使用$符来标记变量：$highlight-color: #f90 $basic-border: 1px solid black;有变量范围：与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。$nav-col...
2022-03-22 20:38:34
107
原创 Vuex 第二天
const {data: {data: { channels: payload },},} = awaitaxios.get("");多层解构，重命名import axios from "axios"export default { namespaced: true, state: { allData: {} }, mutations: { updateAllData (state, {id, list}) { // allData这个对象 这种赋...
2022-03-21 21:27:21
94
原创 Vuex 第一天
1.1vuex状态管理模式vuex@3.6.2作用:应用组件之间的传值垫片:core-js@3.8.31.1.1 获取vuex中的值3$store.state1.1.1.2 多次调用,可以用计算属性computed:{count(){return this.$store.state.count}}1.1.1.3 第二种方式引入模块import {mapState} from 'vuex'computed:{...mapState(['count']
2022-03-19 21:47:46
82
原创 黑马头条-个人资料信息修改
toast组件loading的使用： this.$toast.loading({ message: "修改中...", forbidClick: true, duration: 0, });-----------------------------------this.$toast.success("修改成功！");封装组件：<template> <div class="updateGender"&g...
2022-03-18 21:08:45
552
原创 黑马头条-评论模块
点击发布评论,会有弹出层,用vant写出弹出层,弹出层对发布评论的页面来说,是爷爷,要经过两次传参.item中@click="$emit('recleClick', comment)"list中@recleClick="$emit('recleClick', $event)"index,中@recleClick="recleClick"来判断弹出层是否要打开设置样式.发布评论要验证是否登录,没有登录,点击发布评论,会跳到登录页,登录,if (!this.$store.st
2022-03-17 20:57:44
782
原创 黑马头条-关注,点赞,评论模块
单独封装组件,把关注的内容放进去,引导父组件进行传参props: {is_followed: {type: Boolean,required: true,},artclidate: {type: Object,required: true,},},判断,用户只有在登录时才能关注作者,同时,用户也不能关注自己 async onclock() { this.isfindinfo = true; if (!this.$store.state...
2022-03-15 21:15:44
1098
1
原创 黑马头条--搜索记录和文章详情
搜索框搜索之后要有历史记录声明一个变量,用来存放历史记录,data(){return{ishidtory:[]}}存放历史记录this.history.unshift(val)判断一下,不能有重复,有重复就删除,并添加到第一个.const id=this.ishistory.indexOf(val)if(id !== -1){this.ishistory.splice(id,1)}优化并永久化,渲染到页面上调用函数,import {setItem,g
2022-03-14 21:26:36
357
原创 黑马头条-列表数据同步,搜索页面
同步列表,登录状态,未登录状态,用户编辑时利用store的state中的user.来判断用户是否登录,没有登录,就保存到本地中,等录保存在网络中.if (this.user) { try { const { data } = await userChines(); this.chennls = data.data.channels; } catch (err) { console.log(err);...
2022-03-12 20:42:50
156
原创 黑马头条--首页频道编辑
优化时间,利用day.js.修改的样式例如:初始化前是 2021:01:22初始化后是 一年前下载 npm i dayjs// 配置中文包import "dayjs/locale/zh-cn";import relativeTime from "dayjs/plugin/relativeTime";// 使用中文语言包dayjs.locale("zh-cn");//相对时间设置全局过滤器Vue.filter("relativeTime", (timer...
2022-03-11 21:14:29
445
原创 黑马头条-home页布局和渲染
1.首页的页面布局头部导航栏1、使用导航栏组件2、在导航栏组件中插入按钮3、样式调整2、频道列表2.1、使用 Tab 标签页组件样式调整：宽高、样式、位置、添加占位符充当内容区域2.3、展示频道列表思路：第1步：api目录下面文件封装请求方法第2步：data里面定义变量用于存储数据第3步：methods里定义获取数据方法3.1 页面里面导入这个方法3.2 methods方法里面调用方法发送请求3.3 请求错误处理3.4 请求成功赋值data里面变量第4步：cr
2022-03-10 21:18:49
235
原创 黑马头条----首页和登录模块
登录注册创建 src/views/login/index.vue并配置路由<template> <div class="login-container">登录页面</div></template><script>export default { name: 'LoginPage', components: {}, props: {}, data () { return {} }, compute
2022-03-08 21:43:19
1615
原创 黑马头条----项目初始化
npm install --global @vue/cli // 全局安装脚手架vue create toutiao-m // 创建项目分别选择：Babel：es6 转 es5Router：路由Vuex：数据容器，存储共享数据CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等Linter / Formatter：代码格式校验# 进入你的项目目录cd toutiao-m...
2022-03-07 20:52:48
431
原创 Vuex初识
认识vuex 文档地址： https://v3.vuex.vuejs.org/zh/ 是什么？是状态管理器，作用是在vue项目中管理数据，方便数据通讯 为什么？ 组件的通讯是很复杂的，方便进行组件通讯 优点： 数据的更新是响应式的！使用vuex 1. 安装 yarn add vuex@3.6.2 | npm i vuex@3.6.2 2. 创建配置store store/index.js import ...
2022-03-05 20:54:44
395
原创 Vue day 07
路由:Vue中的路由:路径和组件的映射关系单页面应用: 所有功能在一个html页面上实现前端路由作用: 实现业务场景切换优点：整体不刷新页面，用户体验更好数据传递容易, 开发效率高缺点：开发成本高(需要学习专门知识)首次加载会比较慢一点。不利于seovue-router:第三方模块包1.安装 yarn add vue-router@32.导入路由 import VueRouter from 'vue-router'3.使用路由插件 Vue.use(VueR
2022-03-03 21:38:09
215
原创 Vue day 06
动态组件多个组件使用同一个挂载点，并动态切换，这就是动态组件组件缓存组件插槽目标: 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽具名插槽当一个组件内有2处以上需要外部传入标签的地方作用域插槽子组件里值, 在给插槽赋值时在父组件环境下使用...
2022-03-01 21:52:46
75
原创 Vue day05
axios基本使用:特点支持客户端发送Ajax请求支持服务端Node.js发送请求支持Promise相关用法支持请求和响应的拦截器功能自动转换JSON数据axios 底层还是原生js实现, 内部通过Promise封装的用axios.defaults.baseURL 统一设置前缀基地址, 暴露在逻辑页面里$refs获取 dom 元素目标: 利用 ref 和 $refs 可以用于获取 dom 元素获取组件对象, 调用组件里方法D...
2022-02-28 21:15:07
62
原创 Vue day 04
钩子函数作用: 特定的时间点，执行特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据分类: 4大阶段8个方法 初始化 挂载 更新 销毁 初始化阶段含义讲解:1.new Vue() – Vue实例化(组件也是一个小的Vue实例)2.Init Events & Lifecycle – 初始化事件和生命周期函数3.beforeCreate – 生命周期钩子...
2022-02-27 18:10:14
141
原创 Vue day 03
计算属性computed:{}特点:函数内使用的变量改变,重新计算结果返回.优势:带缓存,只要依赖项不变,使用缓存的值依赖项改变,会重新缓存另一种用法computed:{file:{set(val){log(val)},get(){retrun '无名氏'}}}监听器watch:{}深度监听,监听对象watch(){obj:{handler(new,old){}deep:true,immediate:true}.
2022-02-25 20:57:46
241
原创 Vue day02
更新DOM对象的innerText/innerHTMLv-text="Vue数据变量"v-html="Vue数据变量"注意: 会覆盖插值表达式区别v-text把值当成普通字符串显示v-html把值当成标签进行解析显示vue如何控制标签显示/隐藏v-show或v-if, 给变量赋予true/false, 显示/隐藏区别v-show是用css方式隐藏标签v-if直接从DOM树上移除v-if 可以配合v-else或者v-else-if使用v-for...
2022-02-24 19:54:32
309
原创 Vue 初学day 01
Vue什么是Vue:渐进式javacript框架, 一套拥有自己规则的语法渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用什么是库和框架库: 封装的属性或方法框架: 拥有自己的规则和元素, 比库强大的多@vue/cli脚手架安装:yarn global add @vue/cli or npm install -g @vue/clivue -V 查看vue脚手架版本创建项目: vue create +文件夹名 文件夹名不能有大写字母, 中文和特殊符号启动服务器:...
2022-02-22 21:36:39
185
原创 webpack的使用
webpack作用:1. 减少文件数量2. 缩减代码体积3. 提高浏览器打开的速度本质是, 一个第三方模块包, 用于分析, 并打包,压缩,整合代码基础使用:1.初始化包环境,得到package.json文件yarn init2.安装依赖包yarn add webpack webpack-cli -D3.在package.json中配置scripts(自定义命令)scripts: { "build": "webpack"}4.新建默认配置文件:webpack.conf...
2022-02-21 21:34:30
85
原创 ES6模块化与异步编程的高级用法
ES6模块化 ES6模块化规范 :浏览器和服务器通用的模块化开发规范 优点:降低了沟通成本，极大的方便了各个模块之间的相互调用 特点: 1.每一个js文件都是一个独立的模块 2.导入其它模块成员使用import关键字 3.向外共享模块成员使用export关键字 怎样在nodejs中使用ES6模块？ 1. 确保安装了v14.15.1 或更高版本的node.js 2. 在package.json的根节点...
2022-02-15 19:55:11
257
原创 大事件项目
首先用''码云''建立一个远程仓库,后再本地创建本地仓库 git init把本地的文件保存上传到本地仓库 git add . 暂存 git commit -m '创建了文件夹' 保存到本地再用''码云''提供的命令,把本地与远程仓库连接起来再本地的文件提交到远程的仓库中在建一个分支,用来写功能, git checkout -b 分支名切换到功能分支,开始编辑功能,功能写完,保存到本地仓库,在发送到远程仓库,之后再切换到master进行分支合并,git merge 副...
2022-01-21 21:53:56
459
原创 git 学习第二天
1.git 分支作用:协作开发,互不干扰2.master主分支创建git 仓库时,Git 默认已经帮我们创建了一个名字叫做 master 的分支。通常我们把这个master 分支叫做主分支。查看分支的一些命令:查看分支列表: git branch创建新的分支: git branch 分支名称切换分支: git checkout 分支名称快速创建和切换分支: git checkout -b 分支名合并分支: git merge 分支名删除分支: git branch
2022-01-20 19:46:28
192
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人