介绍 EmlogPro官方出了Api接口，比以往的插件版Brief使用更方便，所以我另外重新写了一个程序，还叫Brief Brirf-5.0使用uni-app开发，适配安卓、iOS、小程序 Rro的Api接口还不完善，所以实现的功能可能没有老版本多，等到新的接口发布，我会第一时间更新！ console.log("Hello Brief"); echo "Brief is OK!"; alert("Fewer and fewer bugs") 安装教程 导入项目到HBuilderX 修改setting.js内的配置信息 注册账号（http://tp.hkiii.cn） 联系我激活账号即可 历史版本 Brief3.0---设置教程 更新记录 2022-05-04 项目开始时间 新增文章发布 2022-06-12 新增文章列表和文章详情 文章发布支持标签 修复小bug 2022-06-15 文章发布支持上传图片到七牛云 2022-06-17 新增文章发布验证 新增关于、反馈等页面 2022-06-25 新增App登录功能 新增收录查询功能 修复bug若干 2022-07-03 新增文章分类 新增app、小程序端分享功能 修复小bug 2022-07-04 修复上传图片bug 小程序配置改为后台设置 2022-07-07 修复小程序端bug 小程序服务器域名配置 https://tp.hkiii.cn（必须，获取后台设置以及上传图片） https://api.tianapi.com（必须，调用百度查询） 您的博客域名（必须） 需要的接口 需要申请的api接口 百度收录量 搜狗收录量 需要注册的网站 Api后台管理 （用于管理您的程序） Dcloud （用于App打包） 七牛云对象储存（用于图片上传） 其他问题 以前购买过无授权版的用户直接联系我即可 购买插件版的用户需补差价 源码下载 github地址：https://github.com/pengsirs/emlog-uni gitee地址：https://gitee.com/pengsirs/emlog-wxmini

介绍 经常可以在很多小程序内看到左右两个小卡片，我自己也经常写到，记录一下，后面用到直接复制粘贴即可 演示 代码 <view class="two-box"> <view class="one"> <view class="content-left"> <view class="hdjh"> 活动计划 </view> <view class="hdjh-btn"> 点击进入 </view> </view> <view class="content-right"> <tui-icon name="member-fill" color="rgb(77, 137, 134)" size="35"></tui-icon> </view> </view> <view class="two"> <view class="content-left"> <view class="gzzd"> 活动计划 </view> <view class="gzzd-btn"> 点击进入 </view> </view> <view class="content-right"> <tui-icon name="order" color="rgb(65, 154, 253)" size="35"></tui-icon> </view> </view> </view> 注意上面有用到tui的图标，直接换成图片或别的图标即可，网页使用可直接将view替换成div .two-box{ width: 96%; display: flex; justify-content: space-between; margin: 10px 2%; } .one{ background-color: rgb(234, 248, 245); width: 40%; border-radius: 5px; display: flex; justify-content: space-around; padding: 15px; } .content-left .hdjh{ font-weight: 700; color: rgb(77, 137, 134); } .content-left .hdjh-btn{ font-size: 11px; display: initial; color: #fff; font-weight: 500; border-radius: 10px; padding: 1px 3px; background-color: rgb(77, 137, 134); } .two{ background-color: rgb(236, 242, 255); width: 40%; border-radius: 5px; display: flex; justify-content: space-around; padding: 15px; } .content-left .gzzd{ font-weight: 700; color: rgb(65, 154, 253); } .content-left .gzzd-btn{ font-size: 11px; display: initial; color: #fff; font-weight: 500; border-radius: 10px; padding: 1px 3px; background-color: rgb(65, 154, 253); }

Vue如何实现父子组件之间的通信功能 在vue组件通信中其中最常见通信方式就是父子组件之中的通信，而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用，遇到业务逻辑操作时子组件触发父组件的自定义事件。无论哪种组织方式父子组件的通信方式都是大同小异。 父传子 在父组件中，用 v-bind 动态绑定一个自定义属性，用于给子组件传递数据 <template> <div> <child :users="user"></child> </div> </template> <script> import { child } from "./child"; export default { components: { child }, data() { return { user: '张三' }; } }; </script> 在子组件中，使用 props 接收父组件传过来的数据。 <template> <div>{{ users }}</div> </template> <script> export default { props: ["users"] }; </script> 子传父 子组件通过事件的方式，利用 $emit 给父组件传值。 注意：$emit 的第一个参数是父组件自定义事件的方法名，后边的 “value” 是子组件要给父组件传递的数据 <template> <div> <button @click="datas"></button> </div> </template> <script> export default { methods: { datas() { this.$emit("info", value); } } }; </script> 在父组件中，绑定一个自定义事件，用来接收子组件传来的值； <template> <div> <child @info="getInfo"></child> </div> </template> <script> import { child } from "./child"; export default { components: { child }, methods: { getInfo(value) { // value 就是子组件传递过来的数据 } } }; </script> 原文：https://blog.csdn.net/weixin_47013351/article/details/124335003

效果 主要使用点击给当前元素添加class 创建一个Float组件 <template> <div class="float"> <div class="title">{{ title }}</div> <div class="right-input-wrap"> <div class="alignMode" v-for="(item,index) in 3" :key="index"> <span @click="checkAtv(index)" :class="[cIndex === index?'active':'','align'+(index+1)]"><em></em><em></em><em></em><em></em></span> </div> </div> </div> </template> js部分 <script> export default { name: "float", components: {}, props: { title: { type: String, default: "标题", }, value: { type: [String, Number], default: "", }, prop: { type: String, default: "", }, }, data() { return { cIndex: 1 }; }, computed: { }, watch: {}, methods: { checkAtv(index){ this.cIndex = index; console.log(index) if(index == 0){ this.$emit("update", "left", this.prop); }else if(index == 1){ this.$emit("update", "none", this.prop); }else if(index == 2){ this.$emit("update", "right", this.prop); } } }, created() {}, mounted() {}, beforeMount() {}, }; </script> 样式部分 <style lang="less" scoped> .alignMode span.active { background: #daebff; } .alignMode em:first-child,.alignMode em:nth-child(3) { width: 8px; } .alignMode em:nth-child(2), .alignMode em:nth-child(4) { width: 100%; } .alignMode em:first-child, .alignMode em:nth-child(3) { width: 8px; } .alignMode em:nth-child(2), .alignMode em:nth-child(4) { width: 100%; } .alignMode .align1 { text-align: left; } .alignMode .align2 { text-align: center; } .alignMode .align3 { text-align: right; } .alignMode em { display: inline-block; vertical-align: top; border-top: 1px solid #333; margin: 1px 0; } .alignMode span { display: inline-block; width: 13px; height: 13px; padding: 5px; border-radius: 50%; line-height: 0; margin: 0 2px; cursor: pointer; } .float { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; .left-text { font-size: 12px; color: #888; } .right-input-wrap { display: flex; flex: 1; justify-content: end; // padding-right: 10px; .radio { margin-right: 10px; .text { font-size: 12px; } } } } </style> 使用组件 引入组件（路径自己找） import FloatVue from "../../input2/Float.vue"; export default { name: "home", components: { FloatVue }, 使用 <FloatVue title="对齐方式" @update="propsStyle.float = $event" :value="propsStyle.float" ></FloatVue>

this.$refs 在vue中ref可以以属性的形式添加给标签或者组件 ref 写在标签上时：this.$refs.ipt 获取的是添加了ref="ipt"标签对应的dom元素 ref 写在组件上时：this.$refs['component'] 获取到的是添加了ref="component"属性的这个组件 <template> //给标签使用 <input type="text" ref="ipt"/> //给组件使用 <comp-detail ref="component"></comp-detail> <button @click="confirm">确定</button> </template> methods:{ confirm(){ console.log(this.$refs.ipt.value) //打印出输入框中的value值 this.$refs['component'].init() //调用组件comp-detail中的init()方法 } } 原文链接：https://blog.csdn.net/weixin_52208079/article/details/117949166

Vue实训-音乐后台管理 音乐后台管理系统，使用Vue+ElementUI+Echars开发，拥有用户登录、后台首页、用户管理、歌曲管理、专辑管理、评论管理、系统设置等模块。 项目地址 Gitee：https://gitee.com/pengsirs/vue GitHub：https://github.com/pengsirs/Vue 实验目的 熟悉Vue开发工具，学会安装Vue-CLI脚手架工具。 学会使用Vue-CLI脚手架工具在自己的电脑上建立项目，并运行调试。 使用Vue+ElementUI便携一个后台管理系统 使用Vue整合Echars 实验内容 使用Vue-CLI脚手架工具，用命令的方法搭建一个Web项目 使用Vue创建音乐后台管理系统，使用Vue+ElementUI+Echars开发，拥有用户登录、后台首页、用户管理、歌曲管理、专辑管理、评论管理、系统设置等模块并使用ElementUI构建页面 使用Vue中的Router（路由）进行编写页面的跳转等功能 项目使用 下载并解压源码 打开命令窗口：windows使用win+R然后输入cmd，macOS使用Command+空格输入终端即可 安装依赖： npm install 打开终端后cd到项目目录输入下面的命令运行项目 npm run serve 直到提示网址链接即可复制链接到浏览器 项目详细过程及步骤 安装nodejs并配置环境变量 安装vue脚手架 打开命令行工具，通过npm方式全局安装@vue/cli脚手架，具体命令如下： npm install @vue/cli@3.10 –g 安装完成后，检测是否安装成功，使用如下命令来查看vue-cli的版本号： vue –V（或者vue --version) 创建项目 使用命令创建创建 vue create 项目名 使用可视化UI界面创建 在命令窗口输入Vue UI即可 项目目录结构 config 配置目录，包括端口号等 node_modules npm 加载的项目依赖 src/assets 放置图片等文件 src/components 项目组件 src/router 项目路由配置 src/views 项目页面 src/App.vue 项目入口文件 src/main.js 项目核心文件 README.md 项目的说明文档 安装并引入ElementUI 通过npm安装ElementUI，命令如下： npm i element-ui -S 在main.js中进行全局引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; 新建vue模板 点击VScode编辑器右下角设置-配置用户代码片段-新建代码片段，粘贴下列代码 { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div class=\"\">$0</div>", "</template>", "", "<script>", "export default {", " components:{},", " data(){", " return {", " }", " },", " created(){},", " mounted(){},", " watch:{},", " computed:{},", " methods:{},", "}", "</script>", "<style scoped>", "</style>" ], "description": "A vue file template" } } 保存文件为vue.json 使用方法：在后缀为.vue的文件中输入vue回车即可生成代码模板 创建登录模块 在views目录下新建LoginView.vue文件，输入vue回车生成代码模板 引入ElementUI中的表单组件和表单验证 编写页面CSS样式，完成效果如下图显示 配置路由 在src/router/index.js文件配置登录页面路由 { path: '/', redirect: "/login" }, { path: '/login', name: 'login', component: LoginView }, 创建首页模块 在views目录下新建HomeView.vue文件，输入vue回车生成代码模板 引入ElementUI中的布局容器 el-header：顶栏容器。 el-aside：侧边栏容器。 el-main：主要区域容器。 在顶栏容器中添加面包屑导航组件，用户头像以及下拉菜单组件 在主要区域容器内引入走马灯组件以及Echars 在侧边栏增加菜单并配置首页路由以及子路由 配置如下： { path: '/home', name: 'home', component: HomeView, children: [{ path: "/home/index", component: () => import ("../views/LunboView.vue") }, { path: "/home/UserList", component: () => import ("../components/User/UserList.vue") }, { path: "/home/SingeList", component: () => import ("../components/Singe/SingeList.vue") }, { path: "/home/CommentList", component: () => import ("../components/Comment/CommentList.vue") }, { path: "/home/AlbumList", component: () => import ("../components/Album/AlbumList.vue") }, { path: "/home/Setting", component: () => import ("../views/SettingView.vue") }], }, { path: '/home', redirect: "/home/index" }, 页面效果如下 整合Echars 在命令窗口输入npm i echars -S命令安装Echars 新建组件输入vue回车生成代码模板 在组件中引入Echars import * as echarts from "echarts"; 配置需要的图表（在Echars官网复制完整代码并修改即可） 创建用户管理、歌曲管理、专辑管理、评论管理、系统设置等模块

在VSCode中配置模版 { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div class=\"\">$0</div>", "</template>", "", "<script>", "export default {", " components:{},", " data(){", " return {", " }", " },", " created(){},", " mounted(){},", " watch:{},", " computed:{},", " methods:{},", "}", "</script>", "<style scoped>", "</style>" ], "description": "A vue file template" } }