vue
vue
栗栗子~
这个人很懒,什么也没写。
展开
-
http://registry.cnpmjs.org/vue-router failed,
http://registry.cnpmjs.org/vue-router failed,原创 2023-05-12 16:20:15 · 876 阅读 · 0 评论 -
uniapp Request请求封装的方法
封装方法一1.新建request.js封装const baseUrl = "http://localhost:6645"const request = (url = '', date = {}, type = 'POST', header = { 'content-type': 'application/x-www-form-urlencoded'}) => { return new Promise((resolve, reject) => { uni.reques原创 2022-03-21 14:21:18 · 1488 阅读 · 0 评论 -
this.$emit
this.$emit原创 2022-01-15 16:14:39 · 486 阅读 · 0 评论 -
vue 使用iconfont图库
项目中如何使用iconfont(阿里图标库)一. 登陆iconfont官网:https://www.iconfont.cn/二. 创建一个图标项目1.点击“图标管理”子目录中的子目录“我的项目”,进入个人图标项目2. 点击创建一个图标项目三. 将需要的项目加入到购物车中搜索需要的图标选择图标,点击加入至购物车四. 将购物车中的图标加入至所创建的图标项目中点击购物车,进入查看所添加的图标2.点击添加至项目...原创 2022-01-13 18:02:44 · 3314 阅读 · 2 评论 -
vue 的 watch监听
<body><div id="app"> <input type="button" value="更改名字" @click="change"></div><script src="vue.js"></script><script> new Vue({ el: '#app', data: { food: { id:.原创 2022-01-12 15:52:12 · 148 阅读 · 0 评论 -
路由变化,页面不刷新问题
给app.vue 加个key,用watch监听$route变化<template> <div id="app" :key="key"> <keep-alive> <router-view /> </keep-alive> </div></template><script>export default { name: "app", components.原创 2022-01-11 21:33:13 · 414 阅读 · 0 评论 -
vue带参数路由跳转并获取参数
方法一:router-link<div class="view-item" > <router-link :to="{ name: 'detail', path: `/detail`, query: { id: 1 } }"> <div class="img"> <!-- <img :src="movie_info.src" alt="" /> --> <img :src="movie原创 2022-01-11 18:59:02 · 1150 阅读 · 0 评论 -
自定义自适应display.css代码
调用element-ui的display.css出现bug,索性自己写一个 ,留档保存/* hidden-xs-only - 当视口在 xs 尺寸时隐藏hidden-sm-only - 当视口在 sm 尺寸时隐藏hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏hidden-md-only - 当视口在 md 尺寸时隐藏hidden-md-and-down - 当视口在 m...原创 2022-01-05 16:30:48 · 923 阅读 · 0 评论 -
vue插槽的使用
<template> <div> <div class="header"> <h1>我是页头标题</h1> <div> <slot name="header"></slot> </div> </div> <div class.原创 2022-01-03 23:41:19 · 68 阅读 · 0 评论 -
Vue : 动态绑定class
<view class="cu-item" v-for="(item,index) in list" @click="itemClick(item.url)"> <view class=" text-purple" :class="'cuIcon-'+item.icon_name"> </view> <text> {{item.text}}</text> </view>export default {原创 2021-06-22 15:04:23 · 225 阅读 · 0 评论 -
uni-search-bar简单搜索效果
预期思路:input框内容变化,调用@input方法 拿到输入框的值发送到后端,接收到后端的数据,再利用this保存,但是input方法里没有this指向uni-search-app组件很不错,样式好看,功能齐全,但是事件里面没有this指向,百度了也没有什么发现,后来想到一个一个办法,利用watch监听。vuevue2–watch时间不够 贴个代码<template> <view class="margin-top"> <uni-search-bar @原创 2021-06-18 15:27:38 · 3154 阅读 · 0 评论 -
在vue3 中安装使用bootstrap
在 vue 项目中引入 bootstrap,首先要引入两个依赖:jQuery 和 popper第一步、安装1、npm安装安装命令如下:cnpm install bootstrap --save-devcnpm install jquery --save-devcnpm install popper.js --save-dev默认安装最新版本,如果想要安装 bootstrap 的 V3 版本(依赖 less),可以:或者,采用可视化窗口安装2、可视化窗口安装1、找.原创 2020-11-17 17:06:10 · 6211 阅读 · 1 评论 -
animate.css 没有反应的总结
前言:animate.css没反应多半的版本问题昨天 在vue3中正常的安装使用animate.css,cnpm install animate.css --save引入import animated from 'animate.css'Vue.use(animated)使用<transition name="fade" enter-active-class="animated bounce"原创 2020-11-15 11:34:13 · 5102 阅读 · 0 评论 -
vue3中animate.css+ wow.js的使用
animate.cssanimate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。animate.css中文网wow.js滚动时显示动画。wow.js官网1、通过cnpm安装wow.js和animate.csscnpm install wowjs --save-devcnpm install animate.css --save2.在main.js里配置animateimport animated from 'ani原创 2020-11-14 12:00:28 · 2311 阅读 · 8 评论 -
vue3 sass的使用
删除之前安装失败的包(第一次安装请跳过此步)npm uninstall node-sass安装了sass需要的安装包!npm install node-sass --savenpm install sass-loader --save//sass-loader的版本过高导致的编译错误npm install [email protected] --savenpm install style-loader --save或者npm install node-sass sass-loader s原创 2020-11-14 11:56:20 · 4176 阅读 · 0 评论 -
为组件添加单击事件click监听, 点击事情没有效果的解决方法(vuejs 修饰符.native解析)
封装了一个按钮组件,点击没有反应,这里涉及到v-on的修饰符.native官方对.native修饰符的解释为:有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。 html <div class="sub"><light-btn @click.native="logSubClick" text="登入"/></div>script methods: { logSubClick(){ a原创 2020-11-10 16:56:35 · 718 阅读 · 0 评论 -
vue3 安装和配置vue全家桶
一、Vue-CLI3新建项目1.新建项目vue create project-name二、配置全家桶2.安装路由npm install vue-router --save-dev3.安装 axios httpcnpm install axios --save参考官网:http://www.axios-js.com/zh-cn/docs/4.安装vuexnpm install vuex --save参考官网:https://vuex.vuejs.org/zh/ins.原创 2020-11-08 17:23:32 · 2007 阅读 · 0 评论 -
VUE2 2.9.6 无法卸载问题的解决办法
1、删除硬盘中的vue cli使用where vue查看 vue的安装位置使用vue -V查看vue是否被卸载2、安装新版vue使用命令npm install -g @vue/cli查看vue版本原创 2020-11-07 18:01:19 · 940 阅读 · 1 评论 -
完整的vue开发环境搭建教程
一、安装node.js(https://nodejs.org/en/)下载完毕后,可以安装node,建议不要安装在系统盘(如C:)。输出版本号则安装成功node -v//输出版本号则安装成功二、设置nodejs prefix(全局)和cache(缓存)路径查看npm安装目录:npm root -g查看npm的prefix和cache路径配置信息npm config get cachenpm config get prefix修改全局和缓存路径1). 先在设置路径目录原创 2020-10-12 18:56:00 · 1969 阅读 · 0 评论 -
安装引入axios
安装axiosnpm install axios$ bower install axioscdn引入:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>main.js中全局引入import axios from "axios" //导入axios例子const axios = require('axios');// Make a request for a user with原创 2020-09-21 09:51:16 · 10237 阅读 · 0 评论 -
vue学习笔记--vue cli3 初始化项目
1. 安装vue-clinpm install -g @vue/cli-service-global2. 创建项目vue create 项目名称选择手动配置(如果喜欢使用eslint可以选择默认)创建完成启动npm run serve原创 2020-09-21 09:28:32 · 124 阅读 · 0 评论 -
vue +vue cli3 + tinymce 封装tinymce组件
前言给公安做了个项目,后台编辑文章 前台展示,一开始用的markdown编辑器,markdown不能段落缩进,格式也有些许问题,不是公安想要的效果,今天想换一个编辑器,选择了tinymac,好像达到了预期的效果,百度查找资料,做了一下午,从0开始封装,做个笔记。vue +vue cli3 + tinymac1.安装tinymce-vuenpm install @tinymce/tinymce-vue -S1.安装安装tinymcenpm install tinymce -S若无法完成安装,原创 2020-09-16 20:30:14 · 1344 阅读 · 0 评论 -
vue v-for 同时遍历两个组数
需求:v-for 同时遍历两个数组应用场景:服务器请求到文章信息,对于最近一个七天发表的文章需要显示new图标 ,服务器请求的信息中有文章发表信息,不过需要自己判断是否为最近七天内发表的文章。1.判断是否为七天内,结果用数组保存computed: { newIconIsShow: function() { let _this = this let item = this.itemInfo.articleList let arr = [] for (let i原创 2020-08-21 17:44:56 · 17797 阅读 · 6 评论 -
vue 路由变了 但是没有重新加载组件
问题描述前段时间遇到一个问题 然后查了资料解决了 今天又遇到 忘记了 重新找到以前代码 所以做个笔记:点击文章列表跳转到文章详情, 在列表页跳转路由, 路由携带id 跳转到详情页, 在详情页通过导航守卫获取路由里的id ,获取的id到文章通过访问后端获取数据再渲染具体某篇文章的内容 。1.文章列表携带文章id跳转路由//文章列表携带文章id跳转路由this.$router.push(`/${categoryId}/article`)2.在文章详情页获取idcreated() { t原创 2020-08-07 17:35:53 · 1505 阅读 · 0 评论