vue笔记
常用的vue小知识
曹家小乐乐
这个作者很懒,什么都没留下…
展开
-
vue项目运行后Network: unavailable解决方法
项目场景:解决方案:在vue.config.js文件中加入以下一行代码module.exports = { devServer:{ port, //端口号就是自己设置的值 public: require('os').networkInterfaces()[Object.keys(require('os').networkInterfaces())[0]][1].address + ':' + port //设置访问ip端口 }}...原创 2022-02-21 10:10:37 · 3072 阅读 · 0 评论 -
前端vue项目生成唯一的uuid
一、使用步骤1.安装uuid代码如下(示例):npm install -S uuid2.在需要使用uuid的.vue文件中生成并存储uuid代码如下(示例):import uuid from 'uuid/v4'mounted(){let said=''}该处使用的url网络请求的数据。总结提示:这里对文章进行总结:例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。...原创 2021-11-29 19:13:55 · 14714 阅读 · 0 评论 -
关于VeeValidate 3.X的安装使用
veevalidate官网:https://vee-validate.logaretm.com/v3/guide/basics.html#validation-provider一、使用步骤1.安装npm install -S vee-validate@3.4.142.创建一个veevalidate.js文件用来存放表单验证规则,文件结构如下图所示:veevalidate.js代码如下(示例):import {extend} from 'vee-validate'//extend用于扩展官方原创 2021-11-26 15:44:00 · 1119 阅读 · 1 评论 -
将中国标准时间转换为年月日时分秒格式
1.将中国标准时间转换为年月日时分秒格式代码如下(示例): // 时间格式化 timestampToTime(timestamp) { var chinaStandard=Mon Jul 19 2021 11:11:55 GMT+0800 (中国标准时间); var date = new Date(chinaStandard); var y = date.getFullYear(); var原创 2021-07-19 11:15:46 · 6626 阅读 · 0 评论 -
使用WebRtcStreamer播放rtsp视频
一、使用步骤1.安装WebRtcStreamer包代码如下(示例):{ "name": "default", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { "core-js": "^2.6.5", "vue": "^2.原创 2021-07-13 14:14:08 · 8636 阅读 · 32 评论 -
vue时间戳的用法
1.新建一个js文件用来存放时间格式的代码代码如下:export function timestampToTime(timestamp) { let now = new Date(timestamp*1000); let year = now.getFullYear(); let month = now.getMonth()+1; let date = now.getDate(); let hour = now.getHours();原创 2021-06-21 17:01:50 · 2620 阅读 · 3 评论 -
全局注册vue方法,多文件调用export install
一、实现方法1.全局注册,多文件调用export default{ install(Vue.options){ Vue.prototype.XXXXX=function(){//全局注册XXXXX方法 console.log('11111') } }}具体使用方法:(1)新建一个js文件,用来注册全局方法(此例中新建global.js)export default{ install(Vue.options){ Vue.prototype.aaaaa=function(原创 2021-06-11 16:07:37 · 1986 阅读 · 0 评论 -
父子组件之间传值
1.父组件向子组件传值父组件可以在引用子组件的时候,通过属性绑定(v-bind:)的形式,把需要传递给子组件的数据,通过属性绑定传递到子组件内部,供子组件使用。当父组件通过属性绑定将值传过来时,子组件通过props:[ ‘属性值’]接受传过来的属性父组件代码:<template> <div> <child :parentmsg='msg'></child>//在子组件中通过自定义属性向子组件传值 </div>原创 2021-06-08 15:12:25 · 695 阅读 · 0 评论 -
elementui下拉框默认选中第一个的方法
二、步骤1.用elementui画下拉框代码如下(示例):<el-form-item label="活动区域"> <el-select v-model="form.region" placeholder="请选择活动区域"> <el-option v-for="item in option" :key="item.id" :label=item.value :value="item.id"></el-option> </e原创 2021-06-04 16:02:43 · 14427 阅读 · 1 评论 -
vue实现清空element-ui表格数据的方法
二、使用步骤点击“启用wifi”按钮表格中有数据,如图所示:点击关闭按钮,表格数据不显示:1.界面代码代码如下(示例):<el-form ref="form" :model="form" label-width="80px"> <el-form-item label="启用WIFI"> <el-switch v-model="form.delivery" @change="selectType()"></el-s原创 2021-06-02 17:19:09 · 2916 阅读 · 0 评论 -
vue项目进行base64加密的方法
一、使用步骤1.安装依赖包代码如下(示例):npm install --save js-base642.引入到需要加密的组件中代码如下(示例):let Base64 = require('js-base64').Base64;3.进行base64加密代码如下(示例):this.deleform.sPassword=Base64.encode(this.deleform.sPassword)//将this.deleform.sPassword进行了base64加密...原创 2021-06-02 15:00:50 · 721 阅读 · 0 评论 -
弹性盒布局设置元素水平垂直居中的方法
代码如下(示例):display:flex;align-items:center;//使内部元素垂直居中justify-content:center;//使内部元素水平居中原创 2021-06-01 15:57:39 · 1970 阅读 · 0 评论 -
路由守卫beforeEach
1.关于vueX命名空间的问题在store文件夹下建立如图所示文件结构:其中app.js文件中的代码如下/ 储存const state = { token:null}// 同步const mutations = { SET_TOKEN: (state,token) =>{ state.token = token }}// 异步修改const actions = { setToken:({commit},token)=>{原创 2021-05-31 17:39:17 · 402 阅读 · 0 评论 -
vueX使用说明
一、安装配置vueX(1) 安装npm install vuex --save(2) 在main.js中对vueX进行配置import Vue from 'vue'import App from './App'import store from './store'//引入storeimport router from './router'import { i18n } from './utils/i18n'Vue.config.productionTip = falseVue.u原创 2021-05-31 11:24:31 · 99 阅读 · 0 评论 -
cookie sessionStorage localStorage数据存储
浏览器端数据的存储分为:cookie_js存储和html5本地存储,其中,html5本地存储包括:sessionStorage存储和localStorage存储。sessionStorage的存储是暂时的,当浏览器关闭时存储的数据会被清除;sessionStorage存储的数据是永久的,只能手动清除。一、pandas是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下(示例):import numpy as npimp原创 2021-05-29 16:52:07 · 360 阅读 · 0 评论 -
vue项目点击元素后改变样式
一、点击元素都改变其样式的步骤示例:想实现点击产品名称时其颜色变为蓝色:点击前:点击后样式改变:二、使用步骤1.在template显示的数据中添加单击事件和样式绑定:代码如下(示例代码为uniapp):<view class="z-tr" v-for="(item,index) in productList" :key="item.id"> <view class="z-td">{{index + 1 }}</view> <view c原创 2021-04-15 10:15:53 · 10148 阅读 · 1 评论