vue.js
文章平均质量分 69
Sandy_Star
day day up
展开
-
TypeError: Cannot read property ‘clientX’ of undefined
用vue+Three.js开发时遇到控制台报TypeError: Cannot read property ‘clientX’ of undefined的错误。完整错误截图如下:解决方法:原因:我在mounted里面调用了onclick方法,同时又在mounted里面监听了onclick,产生了矛盾。解决:不在mounted里面调用onclick方法。代码示例:methods:{ onclick(){ ... //Raycaster实现点击事件原创 2021-03-28 16:40:31 · 1294 阅读 · 0 评论 -
vue+three.js导入obj模型不显示问题
前言:最近用vue+threre.js实现3d页面的时候,发现导入obj模型时模型在页面中显示不出来的问题。也纠结了好几天,换了好几种方式去试,到底是模型有问题还是代码有问题?真是个令人头痛的问题啊!一、关于obj模型存放的目录这里我用的vue是4.x版本的。在vue中存放obj模型必须要放在静态资源(static)文件下,否则会出错。由于4.x版本的vue没有static这个文件夹,但是他的静态资源文件夹是叫public,这样我在public下面创建一个文件夹叫static,再在static.原创 2021-03-19 09:59:22 · 7065 阅读 · 25 评论 -
axios的具体使用、跨域问题
前言:这几天都在搞对接,突然对axios又有了新的了解。上一篇写axios只是基于一个框架来写,这次写来点实战的。axios还是很有趣的,如果不报错的话!一、引入axios在用每一个东西之前,总是要去引入它。具体怎么引入可以去看官方的文档,这里就不细说了。在每个要使用axios的组件中记得去导入axios,如下:import axios from 'axios';import Qs from 'qs';这里还引入了Qs,其实qs是一个增加了一些安全性的查询字符串解析和序列化字符串的库。有时.原创 2020-12-05 08:55:51 · 3563 阅读 · 5 评论 -
vue中音乐播放控件播放不了音乐
前言:在vue中使用HTML中的<audio>标签去实现音乐播放的过程中,出现找不到文件源的问题。详情如下:在浏览器控制台中出现如下报错: NotSupportedError: The element has no supported sources.代码如下:<template> <audio :src="currentSrc" controls="" @ended="nextSong"></audio> <ul v-for=".原创 2020-10-26 19:59:19 · 4057 阅读 · 0 评论 -
Vuex-modules的使用
一、什么是modules?modules是模块的意思。为什么要在vuex中使用模块呢?Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理。当应用变得非常复杂时,store对象就有可能变得相当臃肿。所以vuex允许我们将store分割成模块(modules),而每个模块拥有自己的state、mutations、actions、getters等就像下面这个意思:modules:{ moduA:{ state:{}, mutations:{}原创 2020-10-16 16:25:55 · 546 阅读 · 0 评论 -
html自适应
前言:做项目的时候发现自适应是个很重要的事情!!!所以了解了很多怎么去做自适应。找到了一种比较好的方法。下面是基于vue框架的自适应在App.vue中写入<style scoped>html,body{ font-size: calc(100vw/80);}<style>接着在其他的页面以rem作为单位即可。注:1、上面的calc只是做项目时试的合适尺寸,不合适可以再改2、在页面中应用时,最外面的盒子最好不要使用%作为单位,否则页面会随着屏幕缩放,最.原创 2020-10-13 21:31:03 · 860 阅读 · 0 评论 -
vuex--Getters的使用
vuex里的getters(好像最新版本的vuecli没有给出vuex里的getters)这里的getters相当于vue里的computed计算属性就是如果在state里定义的属性需要变化时,就在getters里去做变化。state:{ }getters:{ power(state){ return state.counter*state.counter }, more20student(state){ return state.原创 2020-10-12 11:23:59 · 363 阅读 · 0 评论 -
vue实现滚榜效果
前言:基于vue做一个类似于比赛滚榜的榜单要实现这个效果需要用到vue里面的一个组件–vue-seamless-scroll使用这个插件相对而言实现起来比较容易。想要了解更多可点击https://github.com/chenxuan0000/vue-seamless-scroll安装和导入vue-seamless-scrollNPM安装:npm install vue-seamless-scroll --saveCDN安装:https://cdn.jsdelivr.net/npm.原创 2020-10-12 10:04:04 · 3067 阅读 · 0 评论 -
Vuex概念及作用解释
一、Vuex是什么?vuex是一个专门为vue.js应用程序开发的状态管理模式。简单来说,可以把vuex看成把需要多个组件共享的变量全部储存在一个对象里面,然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用。(响应式真好!)二、Vuex管理什么状态呢?(使用)多个状态,在多个页面间的共享问题比如用户的登录状态、用户名称、头像、地理位置等等比如商品收藏、购物车中的物品等等这些状态信息,我们可以统一放在一个地方,对它进行保存和管理,而且他们还是响应式的。注:在创建vuecil时若没有原创 2020-10-03 17:16:29 · 594 阅读 · 0 评论 -
axios
axios请求方式支持多种请求方式axios(config)axios.request(config)axios.get(url[,config])axios.delete(url[,config])axios.head(url[,config])axios.post(url[,data[,config]])axios.put(url[,data[,config]])axios.patch(url[,data[,config]])config是一些配置axios安装axios也是原创 2020-08-02 22:57:46 · 141 阅读 · 0 评论 -
router路由的懒加载和路由嵌套
什么是路由的懒加载?当打包构建应用时,js包(只有一个)会变得非常大,影响页面加载如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了简单来说,就是不同的路由对应的那些组件打包到不同的js文件中。只有在这个路由被访问的时候,才加载对应的组件。打包的命令:npm run build路由懒加载的实现懒加载的方式方式一结合Vue的异步组件和webpack的代码分析。(不常用)const Home = resolve => {requ原创 2020-07-31 21:17:09 · 345 阅读 · 0 评论 -
router-link其他的属性
router-link的属性to:用于指定跳转的路径tag:可以指定之后渲染成什么标签replace:不会留下history记录,所以指定replace的情况下,后退键返回不能返回到上一个页面中active-class:当对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称。在进行高亮显示的导航菜单或者底部tabbar时,会使用到该类。但是通常不会修改类的属性,会直接使用默认的router-link-ac原创 2020-07-30 11:18:25 · 305 阅读 · 0 评论 -
箭头函数的使用的this指向
前言:箭头函数也是一种创建函数的方法。这是ES6中一种创建函数的方法ES6中的箭头函数什么时候使用箭头函数最多?当我们准备把一个函数作为参数传到另外一个函数里面的时候用的最多创建const 函数名 = (参数列表)=> {}参数问题无参数const aaa = () => { return hhhh}放入两个参数const sum = (num1,num2) =>{ return num1 + num2}放入一个参数const chen.原创 2020-07-29 20:51:46 · 292 阅读 · 0 评论 -
关于Vue的一些小笔记(九)路由的安装和配置
前言:这次的笔记主要内容是vue-router的安装和配置,路由在vue里很重要!!一、什么是Vue-routervue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用vue-router是基于路由和组件的路由用于设定访问路径,将路径和组件映射起来在vue-router的单页面应用中,页面的路径的改变就是组件的切换二、安装和使用vue-router安装如果是用webpack来配置的,则我们可以直接使用npm来安装路由> n.原创 2020-07-28 21:16:07 · 285 阅读 · 0 评论 -
ES模块化的导入和导出
一、为什么要使用模块化的导入和导出?假如我们在开发项目时,会写很多个js文件,我们需要把这些js文件引用到一个html文件中去,但此时这些文件是没有联系的。如果我们需要在一个js文件中引用另一个js文件的变量或者函数等,就需要使用模块化的导入和导出。总的来说,就是跨域调用。<body> <!--这里使用type="module"就可以把他们分成独立模块 ,即使这些js文件里有相同名的变量也不会相互影响--> <script src="one.js"原创 2020-07-27 11:49:09 · 471 阅读 · 0 评论 -
关于Vue的一些小笔记(八)组件插槽slot
前言:这次的笔记主要内容是组件里插槽slot的使用。一、什么是组件的插槽?(slot)简单来说,即我们在一个组件模板里定义的东西不是死的,而是可以根据需要来改动的。若我们想要改动那一部分,就需要使用slot来展示不一样的东西。就像上面这些图片所示,他们整体可以看作是一个组件,组件里可以分为三个部分。但组件里面有相同的部分,也有不同的部分,而我们就想使用一个组件就可以完成上面三张图所示的那样,故插槽为我们提供了便捷。slot!二、组件插槽的意义组件的插槽是为了让我们封装的组件更加具有扩展.原创 2020-07-26 21:26:56 · 983 阅读 · 0 评论 -
关于Vue的一些小笔记(七)组件通信
前言:这次的笔记主要记下组件的父子通信父子组件的通信我们知道,子组件是不能引用父组件或者vue实例里的数据的。但是,在开发中,如果我们从服务器上请求了很多的数据,且想要一部分数据在子组件里进行展示,这个时候,并不会让子组件再发送一个请求到服务器,而是直接让大组件(父组件)将数据传递给小组件(子组件)。所以vue给我们提供了父子组件之间数据传递的方法。一、父组件向子组件传递数据通过 props 向子组件传递数据。在组件中,使用props选项来声明需要从父级接收到的数据(关键:在使用时用v-b.原创 2020-07-25 20:29:23 · 155 阅读 · 0 评论 -
关于Vue的一些小笔记(六)组件基础
前言:这次的笔记主要记下组件的一些相关内容。怎样创建、注册和使用组件。以及组件与组件之间的联系。还有组件那些简化写法哦!什么叫组件化?简单来说,组件化就是把一个大的东西拆分成很多个小的东西。放到页面上来说,就是把页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能。利于整个页面的管理和维护。一、Vue的组件化思想给我们提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何应该都会被抽象成一颗组件树。在应用中,要尽可能的将页面拆分成一个个小的、可复用.原创 2020-07-24 17:35:29 · 125 阅读 · 0 评论 -
关于Vue的一些小笔记(五)表单--v-model的使用
前言:这次笔记的主要内容为:v-model的具体使用方法。一、表单绑定v-modelVue中使用v-model指令来实现表单元素和数据的双向绑定。(1)双向绑定的原理我们在输入框中输入内容input中的v-model绑定了message,所以会实时将输入的内容传给message,message发生改变message发生改变时,因为我们使用了Mustache语法,将message的值插入到DOM中,所以DOM会发生响应的改变故通过v-model实现了双向绑定<div id="ap.原创 2020-07-23 17:26:51 · 439 阅读 · 0 评论 -
关于Vue的一些小笔记(四)事件处理器
前言:这次的笔记主要记下v-on对事件的监听、事件修饰符、按键修饰符、系统修饰符,以及了解什么是事件冒泡和事件捕获。一起来看看吧!事件处理一、监听事件使用v-on指令来达到事件监听。使用v-on的几种方法:直接用v-on监听DOM事件接收一个定义在methods里的方法来调用使用内联的js语句用特殊变量$event 把它传入方法<div id="app"> <!--1、这里直接使用v-on监听DOM事件--> <button v-on:.原创 2020-07-22 17:49:29 · 947 阅读 · 0 评论 -
关于Vue的一些小笔记(三)计算、监听、样式绑定
前言:这个笔记主要内容为vue的计算属性、监听属性和样式绑定。让我们一起来看看吧!一、Vue的计算属性关键词:computed。用来处理一些复杂的逻辑,类似于在computed里面建立一个函数或方法。(1)一个例子假如需要反转一个字符串,我们会这么做:<div id="app"> {{message.split('').reverse().join('')}}</div>但是如果我们要在多处反转字符串,这样写反而麻烦,不利于多次调用,也不容易看懂理解。.原创 2020-07-21 17:32:23 · 1583 阅读 · 0 评论 -
关于Vue的一些小笔记(二)条件判断、循环语句、图片切换
前言:这篇主要记下Vue的条件与循环语句,语法类似于c语言,比较好理解。另外加一个小例子。一、条件判断1、v-if在元素和template中使用v-if指令<div id="app"> <p v-if="seen">我爱学习</p> <template v-if="look"> <h1>好好学习</h1> <p>天天向上</p> </templ原创 2020-07-20 18:02:57 · 635 阅读 · 0 评论 -
关于Vue的一些小笔记(一)创建、指令
一、什么是Vue?Vue.js是一套构建用户界面的渐进式框架。其目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组。简单来说,就是框架。二、Vue的那些目录结构这里以npm安装为例,结构如下:目录解释 | 目录 | 说明 || ------------ | --------------------------------------------------原创 2020-07-19 15:57:15 · 2254 阅读 · 0 评论