关注
分享
木卯彳亍
无论我在生活中试图做什么，都全力以赴地做好它；无论我献身于什么事业，都毫无保留地献身于它；无论做大事还是做小事，我总是一丝不苟、兢兢业业。我始终认为，任何天生或后生的才干，若不与坚韧不拔、谦逊踏实和埋头苦干的品质相结合，就不可能有所成就
展开
-
1，vue页面加载过程（index.html,main,App.vue的关系）
vue页面加载过程（index.html,main,App.vue的关系）（1） index.html的body体内只有一个div标签<div id="app"></div>，其id为app，通过这个id连接到main.js的内容（2） 在main.js中新建了一个vue实例，vue通过js渲染dom结构，在vue构造函数时，需要配置一个el属性，如果没有el属性时，可以用.$mount(’#app’)进行挂载。这里面的 render: h => h(App)原创 2021-10-20 15:47:39 · 5496 阅读 · 1 评论 -
2，vue路由的一些基础知识
vue结构的项目是一种单页面应用（单页面应用：改变url地址，不会像后端发起请求，并且可以重新渲染页面，达到页面异步更新的效果，而且会留有历史纪录）。它基于路由和组件，路由用于设定访问路径，并将路径和组件映射起来一，路由配置：router文件夹的index.js文件：const router = new Router({ routes: [ { path: "/", name: "Home", component: Home, childre原创 2021-10-22 17:07:52 · 236 阅读 · 0 评论 -
3，vue组件传值
vue组件传值1，父组件向子组件传值：要将父组件中的data值，即"父组件的值"传到子组件中父组件：<Menu :p_data="data"></Menu> data () { return { data: "父组件的值", }; },子组件：props: { p_data: { type: String, default: '', }, },//props接收父组件绑定的值 c原创 2021-10-20 17:14:46 · 306 阅读 · 0 评论 -
4，Vuex的一些基础使用说明
Vuex的一些基础使用说明vuex的方案是，在vue中构建一个用于存储state、定义操作state方法的仓库（即store）。通过在多个（不一定是全部）组件中引用需要的state、调用“操作state的方法”来实现对给共享变量的处理。且由于各个组件对state是引用的，单个组件改变了某个state后，其他组件可以实时的响应变化。store.js:import Vue from 'vue'import Vuex from 'vuex'import Cookies from 'js-cookie'原创 2021-10-20 16:38:47 · 250 阅读 · 0 评论 -
5，vue利用websocket，显示数据的实时改变
实现效果：默认显示：我们可以看到数据11弹窗的数值为11，现在我们在数据库里将是这个值改为12，并没有刷新页面，发现显示的值已经变为12了。值改变后：这一过程中，我们用到了用来发送数据的websocket（由客户端建立连接，服务器可以主动向客户端推送数据，只需要一次http请求），vuex和vue的watch监听属性，以及改变显示的DOM操作。准备工作：1，使用websocketd客户端来进行websocket连接。官网下载地址百度云盘地址 提取码：eptj作用：运行这个客户端，使得每原创 2021-10-27 09:00:29 · 8728 阅读 · 0 评论 -
6，vue项目开发中用到的前端框架之Element
前端框架：Element及其常用到到的组件(el-table、el-tree。。。)原创 2021-11-02 16:26:06 · 1519 阅读 · 2 评论 -
7，vue利用axios调用后台api接口
通常我们的vue项目是前后分离的，vue前端通过后台api提供的接口(url)操作数据库，这里我们通过axios来实现。我们后台有这样一个接口：http://localhost:8081/api/projectInfo/GetAll，它的作用是获取projectInfo表的所有数据。在地址栏输入上述地址，看一下结果：很明显，只要我们vue前台访问这个地址就可以拿到这些数据了。下面我们来一步步做：1，安装axios：和安其它包一样：npm install axios2，配置axios:在main原创 2021-11-07 14:05:26 · 24886 阅读 · 4 评论 -
8,element中Notification组件（this.$notify）自定义样式
修改前：修改后：let html = '<div class="alertTile"></div>' + '<div class="alertTile_1">' + "报警" + '</div>' + "<div style='word-wrap:break-word;color:white'>" + "目前温度" + ":" + "100" + "摄氏度" + "<br/>" + "报警时间："+this.forma原创 2022-04-12 10:59:18 · 4118 阅读 · 1 评论 -
9，导出数据到Excel
目的：将数据导出到Excel使用插件：Export2Excel依赖：js-xlsx、file-saver和script-loader最终结果：1，安装依赖：npm install xlsx file-saver -Snpm install script-loader -S -D2，src目录下新建Excel文件夹（1）Excel文件夹里新建Blob.js文件：将下面代码粘贴进去/* eslint-disable *//* Blob.js * A Blob implement原创 2022-04-20 17:18:43 · 483 阅读 · 0 评论 -
10，vue.js双向绑定的实现原理
参考文章一参考文章二<!DOCTYPE html><html><head></head><body> <div id="app"> <input type="text" v-model="text" id="a"> {{text}} </div><script type"text/javascript"> //将vm实例中的dat原创 2022-05-19 16:53:22 · 177 阅读 · 0 评论 -
11，jszip打包图片文件夹
jszip打包图片文件夹原创 2023-04-04 15:11:43 · 309 阅读 · 0 评论