所见即所得-Vue
关注
分享
扫一扫
文章平均质量分 59
Vue学习, Vue全家桶
蓝小白1024
总有一天你会长大,一个人抵得上千军万马.
展开
-
Markdown编辑器插件tui.editor的使用CDN与Modules
本篇主要记录我使用cdn方式时, 遇到的一些小问题, 而这个小问题让我想了半天没弄明白(当然现在已经解决了,机智如我), 可能是我太菜(总不能是官方文档写的不清楚吧), 这点小问题都可以琢磨半天, 在看到官方文档时, 我使用模块化导入(就是在vue项目中使用)没有遇到问题, 但我就是突然想试一下cdn方式, 好了这个时候问题就出现了原创 2021-04-25 10:22:32 · 1790 阅读 · 1 评论 -
解决移动端click事件的300毫秒延迟
方案一: 加一个meta标签此方案可以解决安卓手机, 没有解决ios手机上面的问题<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">方案二: js引入一个 fastclickfastclick: https://github.com/ftlabs/fastclick下载下来, 手动导入// fastclick.js 是下载到本地的<script t原创 2021-02-11 21:53:29 · 3148 阅读 · 8 评论 -
vue项目中使用vuex管理公共状态4-持久化vuex-persistedstate
持久化不是vuex自带的, 需要安装一个插件来完成(vuex-persistedstate)vuex-persistedstateGithub: https://github.com/robinvdvleuten/vuex-persistedstate安装npm install --save vuex-persistedstate简单使用在 项目目录中的 store 目录下的index.js 文件中就是在创建 Store对象时, 在里面配置import Vue from 'vue'i.原创 2021-02-11 21:52:36 · 755 阅读 · 0 评论 -
vue项目中使用vuex管理公共状态3-vuex模块拆分(modules)
模块拆分, 就是解决当项目的公共状态太多, 或者多人开发时, 吧部分公共状态拆开, 放到各个模块内,拆分吧store目录下的 index.js文件进行拆分创建 cinemaModule.js 文件内容为import http from '@/util/http'const module = { namespaced: true, // 命名空间 // 公共全局状态 state: { cinemaList: [] }, // 集中式修改状态的方法 mutati.原创 2021-02-11 21:51:37 · 1530 阅读 · 0 评论 -
vue项目中使用vuex管理公共状态2-vuex异步(actions)
当多个页面使用同一个异步请求得到的数据, 就可以使用actions可以理解为缓存, 减少ajax请求次数, 减少使用流量定义 actions定义一个叫 getCinemaList 的异步方法store目录下的index.js中:import Vue from 'vue'import Vuex from 'vuex'import http from '@/util/http'Vue.use(Vuex)export default new Vuex.Store({ state:.原创 2021-02-08 13:06:49 · 372 阅读 · 0 评论 -
vue项目中使用vuex管理公共状态1-vuex同步(state和mutations)
vuex 网站: https://vuex.vuejs.org/zh/guide/在使用vue-cli创建项目时选中Vuex的话就不用在进行安装了项目目录里的 store 目录就是编写vuex的地方state定义store目录下的index.js中:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ // stire 定义 '全局 状态' state:原创 2021-02-08 13:05:32 · 414 阅读 · 0 评论 -
better-scroll在vue项目中使用以及部分问题解决如在pc端鼠标滚轮无法滚动问题
better-scrollbetter-scroll的GitHub地址: https://github.com/ustbhuangyi/better-scroll安装npm install better-scroll -S使用dom结构, 这个就是一个ul标签 列表结构 注意这个div的class名为 cinema 等会要把 better-scroll `挂载`到这个dom上 <div class="cinema"> <ul class="cinema-l原创 2021-02-04 23:05:19 · 1083 阅读 · 0 评论 -
vue项目中axios模块封装和axios拦截器interceptors使用
axiosGitHub地址: https://github.com/axios/axios中文网: http://www.axios-js.com/zh-cn/docs/axios 封装在项目代码中创建一个 util 文件夹, 在创建一个http.js文件用来封装axiosimport axios from 'axios'// 把axios 封装为一个叫 http 的对象, 把请求的公共部分写入const http = axios.create({ baseURL: 'https:原创 2021-02-04 23:04:16 · 1601 阅读 · 0 评论 -
vue项目中使用axios请求数据遇到跨域和请求头
安装npm install --save axios在项目内安装包时, 如果使用npm就一直使用, 不要cnpm和npm进行混用情况一: 无阻拦直接拿到数据<script>import axios from 'axios'export default { mounted () { // ajax 请求 情况一: 某力惠 // 没有跨域, 没有请求头 都可以访问 axios.get('http://www.mei.com/appapi/home/eve原创 2021-02-03 11:13:14 · 2693 阅读 · 0 评论 -
vue计算属性computed与过滤器filter
computed使用计算属性的方法和使用状态是一样的优点(特点): 逻辑计算, 防止模板过重, 有缓存(就是在同一个页面使用多次时, 只需计算一次)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2021-02-03 11:08:03 · 1479 阅读 · 1 评论 -
vue-中路由router使用3-路由拦截beforeEach和路由懒加载
路由拦截在一些页面需要验证是否登录的时候, 就可以使用路由拦截beforeEach创建一个Login.vue组件用来拦截后跳转到login页面Login.vue 内容如下<template> <div> login <!-- localStorage.setItem('token',JSON.stringify({username:"lanxiaobai"})) 向浏览器内添加一个token --> <button>原创 2021-01-31 21:44:33 · 2767 阅读 · 2 评论 -
vue中路由router使用2编程式导航和两种路由模式
编程式导航声明式导航是通过a链接的herf属性进行跳转,在vue中使用<router-link>进行跳转而编程式导航是通过js进行跳转,在vue中是this.$router进行跳转在开发中有一种情况是从列表到详情, 这之间需要传递数据, 这时就可使用编程式导航创建一个列表页的组件Comingsoon.vue和详情页的组件Detail.vueDetail.vue中用来接收列表页的传过来的数据方式一: 路径传参–动态路由Comingsoon.vue 列表组件<tem原创 2021-01-31 21:43:51 · 467 阅读 · 0 评论 -
vue中路由router使用1-路由容器router-view-声明式导航router-link-重定向-路由嵌套
在项目目录下, router文件夹下的index.js是编写路由配置的一级路由在views文件夹下创建好单文件组件然后在router文件夹下的index.js中进行配置先导入单文件组件 import Film from '../views/Film.vue' // Film.vue是自己创建的然后在数组routes中加入路由import Film from '../views/Film.vue' // 路由数组 coutesconst coutes = [ { //原创 2021-01-31 21:43:15 · 746 阅读 · 0 评论 -
vue-cli创建的项目目录结构以及单文件组件的基本使用
初始项目结构在pubic文件里存在入口文件, pubic是这个项目的静态资源存放的地方,在src文件夹下, main.js 实例了这个项目的最大的根组件APP.vue,当写一个单文件组件时, 如果这个组件会被复用, 可以吧它放在components 文件夹中, 没有复用的放在views文件夹中, 当然放在哪里都可, 只要使用的时候导对路径就可以.单文件组件在components文件下创建一个 Sidebar.vue 文件,template标签里面只允许存在一个父节点, 这个就是和之前创建原创 2021-01-27 10:05:27 · 332 阅读 · 0 评论 -
使用vue-cli脚手架创建一个项目
安装npm install @vue/cli查看成功安装后的版本vue --version创建一个项目并定制vue create 项目名创建项目的时候可以自定义需要的东西选择自己需要的东西 空格进行选中选择vue的版本选择存放配置文件的位置保存这次 diy 并取一个名字,方便下次直接使用...原创 2021-01-26 15:43:38 · 225 阅读 · 0 评论 -
vue中使用transition加入过度动画(载入enter-active离开leave-active)
使用<transition></transition>给vue中dom原始加入css过渡动画enter-active和leave-activeenter-active是控制载入时的样式名的后缀leave-active 是控制消失时的样式名的后缀 <style> .animation-enter-active{ animation: aaa 1.5s; } /* 动画样式 animati原创 2021-01-14 14:19:10 · 4777 阅读 · 0 评论 -
vue生命周期
在vue实例中共有8个生命周期函数beforeCreate组件创建之前,初始化之前,在这里访问不到组件的状态(数据)created初始化完成, 这里已经可以访问状态(数据)beforeMount组件挂载之前, 这里还没挂载到dom标签,在这里是最后一次修改状态的机会, 在这里可以操作ajax 但是会因为一些原因会操作两次, 所以在这里不建议mounteddom挂载完成了, 访问dom-swiper","监听事件, ajax, 设置定时器beforeUpdateupda.原创 2020-12-31 17:37:31 · 132 阅读 · 0 评论 -
vue.js:634 [Vue warn]: Duplicate keys detected: ‘1‘. This may cause an update error.问题所在
vue.js:634 [Vue warn]: Duplicate keys detected: ‘1’. This may cause an update error.上面报错信息是由于使用v-for时, key值出现一样的, 上面报错的'1'就是重复的key值原创 2020-12-31 17:36:25 · 1179 阅读 · 0 评论 -
组件通信的黑魔法v-model和动态组件component以及组件插槽slot
组件通信 v-modelv-model 是form表单dom专用的, 用来实现双向绑定数据, 可以分成一个@input和一个:value在组件中使用v-model 然后在组件的props中定义一个value属性用来接收,传递出去的时候, 就是一个 子传父的案例, 使用this.$emit分发给一个叫input的, 这个input是与value配对的, 这样组件上的v-model就可以接收到input中的值代码示例:<body> <div id="box">原创 2020-12-29 14:51:20 · 1270 阅读 · 0 评论 -
组件通信中间人模式、bus模式及组件的属性和状态
中间人模式在vue中 , 每一个vue实例就是一个根组件,在根组件中创建的全局组件都是属于这个根组件中的子组件.中间人模式就是两个组件通过子传父, 把数据传送给根组件, 然后根组件在把数据通过父传子传送给需要的子组件就是 组件A和组件B通信, 组件A把数据对象data传送给根组件, 根组件接收到后, 再把数据data 传送给组件B, 根组件在这个通信过程中就叫中间人.这种方式主要就是用来熟悉组件的父传子和子传父bus 模式跟中间人模式类似, 不过比较方便, 这种模式的中间人bus, 不用刻原创 2020-12-27 14:39:28 · 637 阅读 · 0 评论 -
vue中全局组件、局部组件、组件通信父传子和子传父以及ref
全局组件使用使用 Vue.component('组件名称', { 组件模板对象 }) <div id="app"> <!-- 在vue中, 每一个vue实例都是一个根组件, 在根组件中使用自定义的全局组件 --> <navbar></navbar> <!-- 使用全局组件navbar--> </div> <script> // 全局组件定义原创 2020-12-21 14:38:45 · 515 阅读 · 0 评论 -
vue中引入fetch和axios
fetch是不需要导入其它包, 就可以直接使用的GET发送get请求代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fetch</title>原创 2020-12-19 17:47:42 · 1273 阅读 · 1 评论 -
vue学习之事件修饰符.stop|.prevent|.self|.once
v-on绑定事件使用v-on已经进行一些事件绑定, 最常用的比如click点击事件事件修饰符.stop阻止冒泡当多对标签进行重叠的时候, 你点击最上面的一层标签的时候, 会自动的冒泡到他下面的所有标签上面而.stop就是阻止冒泡使用的.prevent阻止默认事件在form表单提交时候或者在点击a标签的时候, 会阻止提交或跳转.self只当事件在该元素本身（比如不是子元素）触发时触发回调这个修饰符跟.stop目的差不多,.stop 是阻止点击到自己身上的点击事件冒泡到其原创 2020-12-18 09:44:58 · 8321 阅读 · 1 评论 -
vue学习之表单修饰符.lazy|.number|.trim
v-model的修饰符在Vue的语法糖中v-model是用来绑定表单dom的,v-model是双向绑定的,当检测到数据有改变会立即把数据同步.lazy 懒惰执行v-model.lazy就可以吧这个同步事情变得懒惰, 只会在失去焦点的时候进行数据同步下面为代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo原创 2020-12-17 16:33:55 · 589 阅读 · 2 评论 -
vue基本使用和常用指令
vue基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue初识</title></head><body> <div原创 2020-12-14 22:08:47 · 933 阅读 · 3 评论 -
HTML中常用的单标签和双标签及form表单
双标签<h1>...</h1><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><p>...</p><p>段落标签</p><i>...</i&原创 2020-12-13 19:21:42 · 2011 阅读 · 3 评论