vue项目搭建

目录

  • 引入依赖
  • 1. element
    • a. notify
    • b. el-dropdown-item绑定点击事件点击无效
    • c. 页面重新加载
    • d. 路由新页面打开
    • e.Scrollbar 滚动条
  • 2. main.js模板
  • 3.axios post请求参数
  • 4. 数据保存在本地
  • 5. mavon-editor
  • 6. 获得路由参数
  • 7.远程搜索
  • 8.参数传入自定义参数
  • 9.固定屏幕不动
  • 10.有时事件触发无效
  • 11.上传文件
  • 12.有时在方法中不能获取全局变量
  • 13.子组件的样式在父组件中无效
  • 14.获取视频音频的时长和播放当前的时间
  • 15.有些时候的ref拿不到dom
  • css知识
    • 1. 长宽

引入依赖

//element-ui 下载
npm install element-ui --save
//echarts、词云、axios
npm install echarts --save
npm install echarts-wordcloud --save
npm install axios --save

// 全局使用element ui 2.x
import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(Element);

// 全局使用echarts
import * as echarts from "echarts";
// 引入词云
import "echarts-wordcloud";
Vue.prototype.$echarts = echarts;

// 全局使用axios
import axios from "axios";
Vue.prototype.$axios = axios;
//请求头前缀
axios.defaults.baseURL = "http://localhost:8088";
//axios请求携带cookie
axios.defaults.withCredentials = true;

//全局样式引入[确认文件是否存在]
import "./assets/css/global.css";

1. element

a. notify

this.$notify({
        title: "欢迎你的使用",
        // 支持html文本
        dangerouslyUseHTMLString: true,
        message:
          "<text style='color:#00b7c3'>希望您用的开心，有bug欢迎反馈~</text>",
        // 自动关闭，0 为点击关闭，>0是到时间关闭
        duration: 3 * 1000,
        // 提示的分类图标
        type: "success"
      });

b. el-dropdown-item绑定点击事件点击无效

@click.native 即可

<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>

c. 页面重新加载

location. reload()
this.$router.go(0)

d. 路由新页面打开

let src = this.$router.resolve({
        path: "/blog?aid=" + item.aid
      });
      // 打开一个新的页面
      window.open(src.href, "_blank");

e.Scrollbar 滚动条

最外层 height: vh单位
el-scrollbar style=“height= xx %”

2. main.js模板

import Vue from "vue";
import App from "./App";
import router from "./router";
// import ElementPlus from "element-plus";
// import "element-plus/dist/index.css";

// 全局使用element ui
import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(Element);

// 全局使用axios
import axios from "axios";
Vue.prototype.$axios = axios;
//axios请求携带cookie
axios.defaults.withCredentials = true;

//全局样式引入
import "./assets/css/global.css";

// mavon-editor
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue,use(mavonEditor)

Vue.config.productionTip = false;


/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>"
});

3.axios post请求参数

param

4. 数据保存在本地

客户端存储数据的两个对象为：1：sessionStorage 2:localStorage

sessionStroage.setitem(key,JSON.stringify(value))保存数据；

JSON.parse(sessionStroage.getitem(key))获取数据；

sessionStroage.remove(key);删除单个数据；

sessionStroage.clear();清除所有数据；

sessionStroage.keye(index)得到某个索引的key；

LocalStroage和sessionStroage保持数据类似。

LocalStroage在关闭浏览器后仍然保存数据，sessionStorage在关闭浏览器后会删除数据。

5. mavon-editor

安装依赖

cnpm install mavon-editor --save

main.js

//全局注册
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

mavonEditor(README.md)

markdown-IT解析markdown
github-markdown-css美化markdown

cnpm install markdown-it --save
cnpm install github-markdown-css

使用
视屏讲解

		// 引入markdown
        var markdownIt =require("markdown-it");
        // new markdown对象
        var md = new markdownIt();
        var context =md.render("内容");
        

<!-- js引入 import "github-markdown-css"; -->
 <div class="markdown-body" v-html="blog.content"></div>

6. 获得路由参数

获得路由参数

7.远程搜索

<template>
  <div class="layout">

        <!-- 搜索 -->
        <el-autocomplete
          class="search"
          v-model="search"
          :fetch-suggestions="querySearch"
          placeholder="搜索"
          @select="handleSelect"
        />
        
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        avatar: "",
        uid: ""
      },
      search: "",
      result: []
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var res = this.result;
      var results = queryString
        ? res.filter(this.createFilter(queryString))
        : res;
      cb(results);
    },
    //这是当输入数据时触发的，筛选出和输入数据匹配的建议输入。
    //我这里用的是调用match方法，是模糊匹配；官方调用的是indexOf，是精确匹配，看自身情况选择
    createFilter(queryString) {
      return item => {
        return (
          item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      let src = this.$router.resolve({
        path: "/blog?aid=" + item.aid
      });
      // 打开一个新的页面
      window.open(src.href, "_blank");
    }
  },
  created() {
    var user = window.sessionStorage.getItem("user");
    if (user != null) {
      this.user.avatar = user.avatar;
      this.user.uid = user.uid;
    }
    //获得所有博文数据
    this.$axios
      .post("/article/queryAllArticle")
      .then(res => {
        this.result = res.data.data;
      })
      .catch(err => {
        console.error(err);
      });
  }
};

8.参数传入自定义参数

 @change="changeStatus($event, (ui= 1))

<el-radio-group v-model="item.status" @change="changeStatus($event, (ui= 1))"
>
 <el-radio :label="1">禁言</el-radio>
 <el-radio :label="2">正常</el-radio>
 <el-radio :label="3">管理员</el-radio>
</el-radio-group>

 changeStatus($event, uid) {
      console.log($event);
      console.log(uid);
    }

9.固定屏幕不动

.bg {
    no-repeat top;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

添加背景图片

 background: url("http://120.79.198.192:9003/school/2021-11-03/xiaobai.jpg")

10.有时事件触发无效

可以试试 .native
eg: @click.native
像element-ui封装过的ui就要使用.native

11.上传文件

  1. html
<input type="file" ref="inputFile" />
<el-button type="primary" @click="updateFile">上传</el-button>

2.js

uploadFile() {
	//获取ref="inputFile"的对象接收上传的文件数组
   var files = this.$refs.inputFile.files;
   var fd = new FormData();
   //没有遍历文件集合是因为只是上传一个文件，上传多个文件就要遍历集合
   fd.append("file", files[0]);
   this.$axios
     .post("你的上传路径", fd, { "Content-type": "multipart/form-data" })
     .then(
       res => {
         if (res.status == 200) {
           // 上传成功后的处理
         } else {
           //上传失败
         }
       },
       err => {
         // 出现错误时的处理
         console.log(err);
       }
     );
 }
  1. 扩展
    扩展

12.有时在方法中不能获取全局变量

看看此时this的上下文是否发生了变化，因此this此时不再引用父对象。
要使用对主类的引用this，必须将此引用包装在另一个局部变量中

init(uid) {
      var self = this;
     ***省略
      //指定当从服务器接受到信息时的回调函数
      this.websocket.onmessage = function (msg) {
      //this..new_message_num获取不到变量，因为此时的this的上下文已经变了
        self.new_message_num[index]++;
      };
      ***省略
 },

13.子组件的样式在父组件中无效

不能在模板的第一个div中添加id/类选择器

  • 错误写法在这里插入图片描述
  • 正确写法
    在这里插入图片描述

14.获取视频音频的时长和播放当前的时间

vue2获取视频音频的时长和播放当前的时间

15.有些时候的ref拿不到dom

  1. 元素的ref是否存在（检查是否ref="名字"是否写对）
  2. 是否使用了v-if，使用了它是一开始是未创建的

css知识

1. 长宽

使用calc()获取当前可视屏幕高度

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/691074.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Elasticsearch 认证模拟题 - 14

Elasticsearch 认证模拟题 - 14

一、题目 在集群中输入以下指令&#xff1a; PUT phones/_doc/1 {"brand":"Samsumg","model":"Galaxy S9","features":[{"type":"os", "value":"Android"},{"type":&q…
阅读更多...
Edge怎么关闭快捷键

Edge怎么关闭快捷键

Edge怎么关闭快捷键 在Edge浏览器中&#xff0c;你可以通过以下步骤关闭快捷键&#xff1a; 打开Edge浏览器&#xff0c;输入&#xff1a;edge://flags 并按下回车键。 在Flags页面中&#xff0c;搜索“快捷键”(Keyboard shortcuts)选项。 将“快捷键”选项的状态设置为“…
阅读更多...
【SpringBoot】项目搭建基本步骤（整合 Mybatis）

【SpringBoot】项目搭建基本步骤（整合 Mybatis）

搭建 SpringBoot 项目有两种方式&#xff1a;使用 IDEA、或者在 Spring 官网下载。 1. IDEA 创建 打开 IDEA 后&#xff0c;英文版请点击 File -> New -> Project -> Spring Initialer。 中文版请点击 文件 -> 新建 -> 项目 -> Spring Initialer。 在打开的…
阅读更多...
老师如何制作高考后志愿填报信息采集系统？

老师如何制作高考后志愿填报信息采集系统？

高考结束后&#xff0c;志愿填报成为学生们的头等大事。面对众多选择&#xff0c;如何高效、准确地填报志愿&#xff0c;是每个学生和家长都关心的问题。作为老师&#xff0c;能否利用现有的技术工具&#xff0c;帮助学生更好地完成志愿填报呢&#xff1f; 老师们需要一个能够…
阅读更多...
机器学习作业6——svm支持向量机

机器学习作业6——svm支持向量机

目录 一、理论 概念&#xff1a; 线性可分&#xff1a; 支持向量&#xff1a; 间隔&#xff1a; 目标&#xff1a; 软间隔&#xff1a; 梯度下降法&#xff1a; 别的方法&#xff1a; 拉格朗日函数&#xff1a; SMO算法&#xff1a; 核函数&#xff1a; 二、代码 …
阅读更多...
Zemax中FFT PSF和惠更斯PSF的区别？

Zemax中FFT PSF和惠更斯PSF的区别？

在Zemax“分析”选项卡中&#xff0c;有PSF&#xff08;“点扩散函数”&#xff09;图&#xff0c;主要包括如下两种计算方式&#xff1a; 1. FFT PSF&#xff0c;快速傅里叶变换&#xff08;fast fourier transform&#xff0c;FFT&#xff09; 该方法可以看做是以下点扩散函…
阅读更多...
【录制，纯正人声】OBS录制软件，音频电流音，杂音解决办法，录制有噪声的解决办法

【录制，纯正人声】OBS录制软件，音频电流音，杂音解决办法，录制有噪声的解决办法

速度解决的方法 &#xff08;1&#xff09;用RNNoise去除噪声。RNNoise是一个开源的&#xff0c;效果不好的噪声去除器。使用方法就是点击滤镜&#xff0c;然后加噪声抑制RNNoise。【这方法不好用】 &#xff08;2&#xff09;用Krisp(https://krisp.ai/) 去除噪声。这个Kris…
阅读更多...
华为云服务器-云容器引擎 CCE环境构建及项目部署

华为云服务器-云容器引擎 CCE环境构建及项目部署

1、切换地区 2、搜索云容器引擎 CCE 3、购买集群 4、创建容器节点 通过漫长的等待(五分钟左右)&#xff0c;由创建中变为运行中&#xff0c;则表明容器已经搭建成功 购买成功后&#xff0c;返回容器控制台界面 5、节点容器管理 6、创建redis工作负载 7、创建mysql工作负载 8、…
阅读更多...
有效的括号（oj题）

有效的括号（oj题）

一、题目链接 https://leetcode.cn/problems/valid-parentheses/submissions/538110206 二、题目思路 利用栈的性质&#xff0c;后进先出 1.依次读取字符串&#xff0c;判断是否为左括号&#xff0c;如果是&#xff0c;就将其入栈。 2.如果读取的不是左括号&#xff0c;就说…
阅读更多...
c++编译器在什么情况下会提供类的默认构造函数等，与析构函数

c++编译器在什么情况下会提供类的默认构造函数等，与析构函数

我们都知道&#xff0c;在 c 里&#xff0c;编写的简单类&#xff0c;若没有自己编写构造析构函数与 copy 构造函数 与 赋值运算符函数&#xff0c;那么编译器会提供这些函数&#xff0c;并实现简单的语义&#xff0c;比如成员赋值。看 源码时&#xff0c;出现了下图类似的情形…
阅读更多...
如何使用Python的Turtle模块绘制小猪

如何使用Python的Turtle模块绘制小猪

一、前置条件 在开始学习如何使用Python的Turtle模块进行绘画之前&#xff0c;请确保你的电脑已安装Python环境。如果尚未安装Python&#xff0c;你可以从Python官网下载并安装最新版本。 Turtle模块是Python内置的一个用于绘图的库&#xff0c;通常不需要额外安装。如果你发…
阅读更多...
vivado DIAGRAM、HW_AXI

vivado DIAGRAM、HW_AXI

图表 描述 块设计&#xff08;.bd&#xff09;是在IP中创建的互连IP核的复杂系统 Vivado设计套件的集成商。Vivado IP集成器可让您创建复杂的 通过实例化和互连Vivado IP目录中的IP进行系统设计。一块 设计是一种分层设计&#xff0c;可以写入磁盘上的文件&#xff08;.bd&…
阅读更多...
【TB作品】MSP430F5529 单片机，数字时钟设计与实现，整点时通过蜂鸣器播放音乐进行报时

【TB作品】MSP430F5529 单片机，数字时钟设计与实现，整点时通过蜂鸣器播放音乐进行报时

基于单片机的数字时钟设计与实现 作品名称 基于MSP430单片机的OLED显示数字时钟 作品功能 本作品实现了一个具有时间显示和整点报时功能的数字时钟。通过OLED屏幕显示当前时间&#xff0c;用户可以通过按键设置时间&#xff0c;并在整点时通过蜂鸣器播放音乐进行报时。 作…
阅读更多...
vue处理json数据

vue处理json数据

背景&#xff1a;后端返回的数据不是我想要的&#xff0c;现在需要把 name 替换为title&#xff08;小声蛐蛐&#xff1a;又让我处理数据&#xff09; 后端返回数据格式 修改字段操作&#xff1a;&#xff08;使用递归遍历的方式将title属性赋了name的值&#xff09; renderT…
阅读更多...
八、【源码】细化XML语句构建器，完善静态SQL解析

八、【源码】细化XML语句构建器，完善静态SQL解析

源码地址&#xff1a;https://github.com/mybatis/mybatis-3/ 仓库地址&#xff1a;https://gitcode.net/qq_42665745/mybatis/-/tree/08-optimize-xml-parse 细化XML语句构建器&#xff0c;完善静态SQL解析 这一节主要是优化XML解析SQL部分&#xff0c;流程大概为&#xff…
阅读更多...
【Java】解决Java报错：NumberFormatException

【Java】解决Java报错：NumberFormatException

文章目录 引言1. 错误详解2. 常见的出错场景2.1 字符串包含非数字字符2.2 空字符串或 null 字符串2.3 数值超出范围 3. 解决方案3.1 验证字符串格式3.2 使用异常处理3.3 处理空字符串和 null 4. 预防措施4.1 数据验证4.2 编写防御性代码4.3 单元测试 结语 引言 在Java编程中&a…
阅读更多...
认识Java中的String类

认识Java中的String类

前言 大家好呀&#xff0c;本期将要带大家认识一下Java中的String类&#xff0c;本期注意带大家认识一些String类常用方法&#xff0c;和区分StringBuffer和StringBuilder感谢大家收看 一&#xff0c;String对象构造方法与原理 String类为我们提供了非常多的重载的构造方法让…
阅读更多...
通过抑制治疗上调的环氧化酶-2来改善光动力性能的肿瘤归巢嵌合肽菱形体

通过抑制治疗上调的环氧化酶-2来改善光动力性能的肿瘤归巢嵌合肽菱形体

引用信息 文 章&#xff1a;Tumor Homing Chimeric Peptide Rhomboids to Improve Photodynamic Performance by Inhibiting Therapy‐Upregulated Cyclooxygenase-2. 期 刊&#xff1a;Smal&#xff08;影响因子&#xff1a;13.3&#xff09; 发表时间&#xff1a…
阅读更多...
Point-LIO：鲁棒高带宽激光惯性里程计

Point-LIO：鲁棒高带宽激光惯性里程计

1. 动机 现有系统都是基于帧的&#xff0c;类似于VSLAM系统&#xff0c;频率固定&#xff08;例如10Hz)&#xff0c;但是实际上LiDAR是在不同时刻进行顺序采样&#xff0c;然后积累到一帧上&#xff0c;这不可避免地会引入运动畸变&#xff0c;从而影响建图和里程计精度。此外…
阅读更多...
Duilib多标签选项卡拖拽效果：添加动画特效！

Duilib多标签选项卡拖拽效果：添加动画特效！

动画是小型界面库的“难题”、“通病” 几年前就有人分享了如何用direct UI制作多标签选项卡界面的方法。还有人出了一个简易的浏览器demo。但是他们的标签栏都没有Chrome浏览器那样的动画特效。 如何给界面添加布局是的动画特效呢&#xff1f; 动画使界面看起来高大上&#…
阅读更多...
最新文章

Copyright @ 2022~2023