Vue
关注
分享
扫一扫
一起来学Vue
本地是好的
我不懒,但我什么都没有写
展开
-
Nuxt3 在服务端渲染时就设置rem响应式布局
【代码】Nuxt3 在服务端渲染时就设置rem响应式布局。原创 2025-03-10 15:50:08 · 197 阅读 · 0 评论 -
Vue框架引入swiper--在数据渲染时--不能滑动问题
created() { const id = this.$route.query.id; getDesignData(id).then(res => { console.log(res.properties.xbim.ads); this.adverts = res.properties.xbim.ads; // 解决seiper请求...原创 2020-01-02 10:30:51 · 536 阅读 · 0 评论 -
vue/js单击其他任意地方进行关闭窗口的操作
$("body").on("click", function(e) { // setTimeout(function() { // console.log(e.target); e.preventDefault(); // console.log(e.target); // 触发该事件的直接元素 var type = e....原创 2019-12-19 17:35:12 · 1610 阅读 · 0 评论 -
vue input输入框输入延时请求以过滤/筛选数据（时时搜索）
<input type="text" @focus="searchFocus" class="inputfocus" v-model="searchValue" @input="changeInput()"//数据监听效果 ...原创 2019-12-18 16:51:22 · 2512 阅读 · 0 评论 -
在vue中使用moment.js格式化时间
一： 安装npm install moment --save二：在main.js中 导入组件import moment from ‘moment’三：在main.js定义全局过滤器Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {return moment(dataStr)...原创 2019-12-17 17:08:30 · 360 阅读 · 0 评论 -
vue路由query参数的绑定（跳转任何路由都携带参数）
写在vue-router里面即可router.beforeEach((to, from, next) => { if (to.query.id && to.query.hallid) { next(); return; }; if (from.query.id) { let toQuery = JSON.parse(JSON.stri...原创 2019-12-17 09:25:39 · 1444 阅读 · 0 评论 -
vue过滤器实现过滤日期格式的用法
<p class="time"> <span>时间:</span> <i>{{browse.data}}</i> <i>{{browse.startTime | dateFormat('YYYY/MM/DD/hh/ss')}}~{{browse.endTime}}</i> &...原创 2019-12-15 19:49:38 · 443 阅读 · 0 评论 -
vue本地存储实现选中取消选中，刷新后选中不消失
<template> <div class="hotList"> <!-- <Floors></Floors> <Compass></Compass> <ChangeLang></ChangeLang> <div class="collectImg">...原创 2019-12-12 23:11:02 · 524 阅读 · 0 评论 -
vue路由导航守卫实现进入页面后一直携带多个参数
此处携带三个参数id.hallid.jobId.const router = new Router({ mode: 'hash', routes})router.beforeEach((to, from, next) => { if (to.query.id && to.query.hallid && to.query.jobId) ...原创 2019-12-11 19:40:45 · 1420 阅读 · 1 评论 -
vue+swiper4+js实现滑动的筋斗云效果
原理简单，细心看还是能看懂的<template> <div class="collectsLists"> <Shade></Shade> <!-- <keep-alive> --> <div class="collectsContents"> <div class...原创 2019-11-28 11:14:08 · 424 阅读 · 0 评论 -
移动端 input获取焦点不弹出键盘
<input type="text" placeholder="搜索展位或是公共设施" onfocus="this.blur()" />/> var _this = this; $("#searchfixed input").focus(function(e) { e.preventD...原创 2019-11-20 14:15:55 · 4642 阅读 · 0 评论 -
vue-cli项目中使用mui配置（自测成功）
之前些项目一直引入不成功，自从看了之后，成功了！！！点击跳转转载 2019-10-31 11:58:39 · 203 阅读 · 0 评论 -
在vue-cli中搭建router环境
环境搭建创建项目设置router-view找到App.vue 删除App.vue中关于HelloWorld组件的多余部分，并且删除样式。在div#app中添加router-view<template> <div id="app"> <router-view></router-view> </div></te...原创 2019-10-14 07:51:36 · 234 阅读 · 0 评论 -
ES6模块操作
ES6模块操作默认导出export default 值导入时使用以下方式import 自定义名字 from '模块地址'vue在创建vue组件时，我们会经常使用到这种方式export default {}import Demo from 'xxx.vue'导出多个模块export const num = 1export const num2 = 2// 先创建变...原创 2019-10-14 07:50:00 · 119 阅读 · 0 评论 -
vue请求拦截&响应拦截
import axios from 'axios'import router from '../router'import bus from '@/bus'const newAxios = axios.create({ baseURL: 'http://localhost:3000/api', timeout: 5000})/* 我们平时在组件中使用的this.$rou...原创 2019-08-27 23:19:57 · 667 阅读 · 0 评论 -
vue-router路由
路由路由基本结构创建创建路由组件const 组件配置对象 = { template: ` <div></div> `}创建路由配置const routes = [ { path: '/page', // url地址通过path进行 component: Page }]将路由配置放在路由对象const router...原创 2019-08-20 10:17:45 · 104 阅读 · 0 评论 -
在Vue-cli中搭建router环境
环境搭建创建项目设置router-view找到App.vue 删除App.vue中关于HelloWorld组件的多余部分，并且删除样式。在div#app中添加router-view<template> <div id="app"> <router-view></router-view> </div></te...原创 2019-08-20 10:16:43 · 370 阅读 · 0 评论 -
Vue_路由配置&路由数据获取
const routes = [ { path: '/a/b/c/d/e/f', // 这个匹配到的就是 host#/a/b/c/d/e/f }, { path: '/', // / }, { path: '/demo' // /demo }, { path: '/demo/:id' // /demo/任意值 }, { path: ...原创 2019-08-20 10:15:54 · 3517 阅读 · 0 评论 -
使用vue+transition实现简单的轮播图效果
效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-07-24 10:05:53 · 2290 阅读 · 0 评论 -
vue_过滤格式化日期&显示几天前、几小时前···
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...原创 2019-07-29 11:04:47 · 2198 阅读 · 0 评论 -
vue实现简单tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-07-19 18:49:18 · 192 阅读 · 0 评论 -
vuecli环境搭建
环境搭建安装@vue/cli vue-cli全局安装@vue/cli只需要安装1次即可npm i -g @vue/cli 课程使用的npm i -g vue-cli 只需要装一个建议: 建议安装yarnnpm i -g yarn创建项目安装完@vue/cli后会拥有一个命令叫vue,在创建文件的地方打开命令窗口vue create 项目名# 可以试试这个命令...原创 2019-07-30 11:23:55 · 186 阅读 · 0 评论 -
vuecli中的技巧
vuecli中的技巧组件的使用所有的组件都在components文件夹，根据需求可以在components中新建文件夹创建组件在comments上右键，新建文件，起名为组件名.vue引入组件在父组件中，引入想要使用的子组件。尽量将起的名字和组件名保持一致import 组件配置对象名 from 'xxx.vue的路径'注册组件在父组件的组件配置对象中，进行组件的注册...原创 2019-07-30 11:26:16 · 215 阅读 · 0 评论 -
vue-router路由_根据url的不同，请求不同的列表数据
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...原创 2019-07-30 20:02:09 · 2158 阅读 · 0 评论 -
vue_通信组件
组件通信父子通信父子通信的核心属性是props，给子组件配置加props 给子组件标签加属性父组件在父组件中找到子组件标签，给子组件标签上添加想要传递数据 <组件名 自定义的props名字="要传递的数据">const parent = { template: ` <div> {{msg}} <child :msg...原创 2019-07-25 18:47:39 · 157 阅读 · 0 评论 -
vue_transition仿小米移动端底部滑出菜单选项
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...原创 2019-07-30 20:04:57 · 682 阅读 · 0 评论 -
Vuex的组成
Vuexstore实例的创建const store = new Vuex.Store({ state: {}, mutations: {}, actions: {}, getters: {}, modules: {}})const app = new Vue({ store})// 在各个组件中我们都可以获取到this.$store/* 有了thi...原创 2019-08-20 10:00:02 · 1420 阅读 · 0 评论 -
Vue_axios请求&响应拦截
axios拦截器请求拦截器想要给所有的请求中都添加相关参数时，可以使用请求拦截器axios.interceptors.request(config => { // 在return前对config进行处理 // 统一在config中添加token const token = localStorage.getItem('token') if (token) { ...原创 2019-08-20 10:01:39 · 537 阅读 · 0 评论 -
Vue_router路由拦截-导航守卫&路由拦截后的判断是否已登录
路由拦截导航守卫全局前置守卫可以在路由跳转时对所有的路由进行拦截，拦截后根据条件对路由进行next() 或者next到其他路由操作const router = new VueRouter()router.beforeEach((to, from, next) => { // to表示要去的路由地址 // from表示来自哪个路由地址 // next可以进行路由跳转})...原创 2019-08-20 10:04:16 · 4823 阅读 · 0 评论 -
axios配置-axios.js_数据请求统一配置
axios配置配置创建一个src/service，并且在service中创建axios.jsaxios.jsimport axios from 'axios'export default axios.create({ baseURL: '接口地址', timeout: 5000})使用在需要调用axios请求的地方，引入对应的axiosimport axios from...原创 2019-08-20 10:06:02 · 743 阅读 · 0 评论 -
vue_项目完成之后项目构建
项目构建当项目完成后，我们需要将项目build以生成静态内容，脱离nodejsnpm run build # 或者yarn build执行build命令后我们将拥有一个dist文件夹。将dist文件夹中的内容部署到对应的服务器即可。如果使用了history模式，那么需要另外的对web服务器进行相关的设置静态资源路径设置如果我们想要改变构建后的项目中引入的静态资源路径，我们需要创...原创 2019-08-20 10:09:00 · 712 阅读 · 0 评论 -
vue_声明式导航&编程式导航
导航声明式导航和编程时导航中的路由跳转的写法是一致的声明式导航声明式导航就是router-link<router-link to="path"></router-link><router-link :to="'path?id=' + id"></router-link><router-link :to="{path: 'path...原创 2019-08-20 10:11:47 · 2019 阅读 · 0 评论 -
vue_嵌套路由
嵌套路由对应路由的嵌套路由中的组件会被渲染到这个路由的组件中的router-view Demo会被渲染到Index router-viewconst routes = [ { path: '/', component: Index children: [ { path: 'demo', component: Demo...原创 2019-08-20 10:13:41 · 179 阅读 · 0 评论 -
使用vue&axios请求的get方式实现留言评论的添加，删除功能
实现样式axios请求axios.get(url, { params: { key: value }}).then( res => { console.log(res.data)})axios.post(url, { key: value, key2: value2}).then(res => { console.log(res.da...原创 2019-07-23 19:50:04 · 2070 阅读 · 0 评论