前端
晓倾城
这个作者很懒,什么都没留下…
展开
-
基于SpringBoot和Vue2.0的轻量级博客开发
基于SpringBoot和Vue2.0的轻量级博客开发原创 2022-10-20 11:36:27 · 405 阅读 · 0 评论 -
vue中使用element的上传组件
1 前端页面我把上传文件组件放在了一个抽屉组件里面 <el-drawer title="上传文件" :visible.sync="drawer" :direction="direction" :before-close="handleClose"> <el-upload class="upload-demo" drag action="http://原创 2022-04-17 20:19:13 · 935 阅读 · 0 评论 -
Vue自定义组件属性传值
定义一个组件,其中props表示调用方通过属性绑定传入的参数<template> <div> {{ imgList }} </div></template><script>export default { name: "MyCarousel", props: { imgList: String }}</script>调用方通过**:属性名**进行属性绑定<template&原创 2022-04-17 14:55:46 · 1205 阅读 · 0 评论 -
vue项目集成element ui
在上一个文章里面我们创建了一个初始化vue项目,使用第三方ui框架来搭建项目对后端开发人员是十分友好的。1 引入依赖指定版本将依赖添加到package.json里面的合适位置"element-ui": "^2.0.10"2 引入组件在main.js引入组件import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI)3 安装npm install原创 2022-04-16 22:09:13 · 1169 阅读 · 0 评论 -
一个vue ui初始化的vue项目有多少知识点?
一个vue ui初始话的vue项目有多少个知识点?原创 2022-04-16 21:49:39 · 1588 阅读 · 0 评论 -
前端练习案例001
index.html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2022-04-09 22:31:11 · 3040 阅读 · 1 评论 -
Vant组件库学习-环境搭建
1官网地址https://vant-contrib.gitee.io/vant/#/zh-CN/action-bar2初始化项目a 在cmd输入命令vue ui启动可视化界面vue ui输入后浏览器会自动打开可视化界面b点击创建创建项目手动创建预设是很美丽的选择组件选择vue版本创建,这里看个人需要是否创建模板c 启动项目d 安装vant组件,起始就是引入依赖使用npm安装# Vue 3 项目,安装最新版 Vantnpm i vante 第一个原创 2022-02-12 18:19:35 · 1090 阅读 · 0 评论 -
码可拨锣项目总结
vuex、axiso、拦截器、导航守卫原创 2022-02-12 15:44:47 · 575 阅读 · 0 评论 -
Vue项目中定义组件注意事项
基本步骤1.定义组件2.导入组件3.注册组件4.使用组件步骤一需要注意组件中的数据,需要使用函数形式定义步骤二导入时@相当于从src开始目录步骤三导入时候不要拼错单词componentsexport default { // 2.注册组件 components: { TextInput }}...原创 2021-08-29 16:57:29 · 171 阅读 · 0 评论 -
vue关闭严格语法检查
恶心原创 2021-08-29 13:29:27 · 996 阅读 · 0 评论 -
2021-08-25
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.路由没有正确引入,导致标签找不到import VueRouter from 'vue-router'import Home from '../views/home/Home.vue'import Login from '../view.原创 2021-08-25 00:18:08 · 58 阅读 · 0 评论 -
Vue工程目录结构
new Vue({ render: h => h(App)}).$mount('#app')$mount(’#app’)用于只定vue挂载区和el作用完全一样new Vue({ el:'#app', render: h => h(App)})如果出现下面的错误可以加一个配置文件Expected space or tab after ‘//‘ in comment.(spaced-comment)module.exports = { lintOnSave.原创 2021-08-22 19:17:30 · 112 阅读 · 0 评论 -
安装vue调试工具
点击获取 Microsoft Edge 扩展搜索vue,点击获取打开vue页面,在控制台中选择vue面板原创 2021-08-22 13:01:29 · 203 阅读 · 0 评论 -
Vue自定义组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hel原创 2021-08-22 12:20:47 · 218 阅读 · 2 评论 -
VUE事件绑定
v-on<style> [v-cloak]{ /* 元素隐藏 */ display: none; }</style><body> <div id="app" v-cloak> {{msg}} <input type="button" v-on:click="pp" value="点我"> </div></body><script原创 2021-08-21 23:03:39 · 80 阅读 · 0 评论 -
VUE双向数据绑定
双向绑定使用v-model指令双向即模型数据改变页面数据改变,或者页面数据改变则模型数据随之改变。1.模型数据改变页面数据改变在实例化VUE对象的时候定义一个来接受对象值<body> <div id="app" v-cloak> {{msg}} <span v-model="msg"></span> </div></body><script> var vm原创 2021-08-21 22:55:30 · 90 阅读 · 0 评论 -
VUE指令
1.v-text可以向挂在区中通过该指令进行纯文本插值<body> <div id="app" v-cloak> {{msg}} <span v-text="msg"></span> </div></body><script> new Vue({ el:"#app", data:{ msg:"Hello V原创 2021-08-21 22:38:48 · 86 阅读 · 0 评论 -
Vue入门程序
1.引入vue.js2.创建数据容器3.创建vue对象3.1指定挂载区3.2指定数据模型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-原创 2021-08-21 22:19:43 · 131 阅读 · 0 评论 -
vue按钮绑定事件获取行值
<el-table-column label="为它加油" :span="4"> <template slot-scope="scope"> <el-button type="success" @click="open1(scope.row)">加油</el-button> </template> </el-table-column>open1(...原创 2021-08-01 12:51:36 · 428 阅读 · 0 评论 -
获取element-ui表格中的一行信息
1.在table上绑定一个函数 @row-click="handleEdit" <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @row-click="handleEdit">2.定义这个函数handleEdit(row){ console.log(row) }3.效果...原创 2021-08-01 12:37:11 · 1764 阅读 · 0 评论 -
axiso响应数据赋值给data中的变量
<script> new Vue({ // 3.绑定视图 el: "#div", // 4.传递数据 data: { msg: "Hello Vue", tableData: [] }, methods: { getTableData() { var that=this axios.get('http://mkgo.xyz:8080/medalsInfo')原创 2021-08-01 00:30:41 · 568 阅读 · 0 评论 -
在浏览器中如何调试前端代码
原创 2021-06-19 12:20:27 · 764 阅读 · 0 评论 -
mpvue 微信请求获取参数并取出
<script>//注意:创建页面的时候必须 暴露 、 不然可能会卡死 export default{ data(){ return{ list:[] } }, methods:{ requestData(){ var that=this; .原创 2021-05-21 18:05:28 · 171 阅读 · 0 评论 -
Jackson简单使用---Json解析
1.导入三个包添加引用库2.准备实验2.1实体类模型public class Student { private String name; private int age; public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() {原创 2021-04-04 23:37:17 · 359 阅读 · 0 评论 -
Ajax 的get请求post请求的简单应用
一、失去焦点事件的绑定jsp <input id="username" name="username"><span id="msg"></span>script1.ajax 不匿名函数方式 $("#username").blur(hei) function hei (){ alert("11111") }2.ajax 匿名函数方式 $("#username").blur(function (){ alert("11111"原创 2021-04-04 23:08:18 · 123 阅读 · 0 评论 -
VSCode快速对齐代码
刚使用vscode发现代码容易写着容易乱,之前用IDEA是CTRL+L进行代码的格式化对齐,vscode自带也有快捷键,需要先选中需要格式化的代码,然后使用组合键shift + alt +f 进行格式化shift + alt +f原创 2021-04-01 15:53:58 · 13770 阅读 · 1 评论 -
021自己造的错误之JS setInterval 注意事项
function getTime(){ let elem=document.getElementById("logtime") let today=new Date(); let y=today.getFullYear().toString() let m=(today.getMonth()+1).toString() let d=today.getDate().toString() let h=today.getHours().toString() let min=to...原创 2021-04-01 15:47:25 · 124 阅读 · 0 评论 -
原生JS实现日期格式化
let today=new Date();let y=today.getFullYear().toString()let m=(today.getMonth()+1).toString()let d=today.getDate().toString()let h=today.getHours().toString()let min=today.getMinutes().toString()let timeString=y+"年"+m+"月"+d+"日"+h+"时"+min+"分"console原创 2021-04-01 15:36:23 · 268 阅读 · 0 评论 -
使用原生JS实现动态表格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-03-31 18:26:31 · 503 阅读 · 0 评论 -
类选择器
1.id选择器# id{属性值}2.标签选择器元素选择器标签名{属性设置}3.类选择器.类名{属性设置}thead标签是语义化标签没有实际意义,不能替代head标签H5兼容之前H4下浏览器原创 2021-03-30 15:12:09 · 113 阅读 · 0 评论 -
动态下拉分类框的实现
1.首先后台使用fastJson将集合变成json字符串resp.getWriter().print(JSON.toJSONString(fSorts));2.前台html <select name="classify" lay-filter="area" id="classify"> <option value=""></option> </select>3.前台JS<script src="${path原创 2021-03-25 09:49:14 · 163 阅读 · 0 评论 -
在同一个页面动态内嵌不同页面
实现原理通过iframe和js配合使用实现iframe动态跟新要显示的内容iframe标签使用方法案例:创建三个静态页面test1.htmltest2.html第三个页面用于写动态显示的逻辑和展示自己随便造一个就行测试1测试2页面用于动态显示到刚刚的第三个页面,里面的内容可以区分开是哪一个页面的数据就行。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-03-22 14:10:12 · 904 阅读 · 1 评论 -
02BootStrap写一个导航栏
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!-- 导航头--> <div class="navbar-header"> <!--设置手机按钮(小屏幕时候会出现) 设置logo--> <button class="navbar-toggle " data-toggl.原创 2021-03-11 22:01:58 · 162 阅读 · 0 评论 -
01BootStrap 环境搭建
<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1,,user-scalable=no"> .原创 2021-03-11 21:11:37 · 184 阅读 · 0 评论