![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js
G018_star sky♬
ᐕ)⁾⁾
展开
-
vue watch用法 使用说明
对象是个引用类型,虽然打印的是,两个数据,但是他们在内存中指向的是同一个地址,一个改变另一个也会改变。原创 2023-02-24 21:37:11 · 197 阅读 · 1 评论 -
完成三级联动的路由跳转与传递参数业务
三级联动如下图所示:给a标签添加自定义属性data-categoryName,保证这个节点带data-categoryName,一定是a标签可以通过节点的dataset属性获取相应节点的自定义属性,返回的是一个对象KV【自定义属性相关的】如果带有categoryname字段的一定是a标签解构赋值:let { categoryname, category1id, category2id, category3id } = nodeElement.dataset;两个对象如下原创 2022-05-01 21:07:10 · 224 阅读 · 0 评论 -
VUE中$refs和$el的使用详解
ref: 给元素或者子组件注册引用信息ref有三种用法:1.ref加在普通元素上,获取用this.$ref.xxx可以获取到dom元素。<div ref="system">测试</div>// 获取mounted() { console.log(this.$refs.system);}2.ref加在子组件上,用this.$ref.xxx可以获取到组件实例,可以使用子组件的所有方法。使用:// this.$ref.xxx.方法名()// 父组件<co原创 2022-04-17 16:50:34 · 2430 阅读 · 0 评论 -
Vue项目的常见报错问题解决
1、‘webpack-dev-server’ 不是内部或外部命令,也不是可运行的程序 或批处理文件解决办法:现在使用webpack要同时安装webpack-cli这个包,才可以调用webpack和webpack-dev-server这些命令。cnpm install webpack webpack-dev-server webpack-cli --save-dev2、"export 'default' (imported as 'ol') was not found in 'ol' (黄色警告,但原创 2022-04-16 23:46:06 · 8834 阅读 · 0 评论 -
vue实现简易购物车
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>vue综合练习</title> <style type="text/css"> td{ align-content: center; } </st原创 2022-04-05 21:17:58 · 882 阅读 · 0 评论 -
vue之camelCase vs kebab-case
Prop 的大小写 (camelCase vs kebab-case)HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名法) 命名:Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], tem原创 2022-02-09 23:08:29 · 349 阅读 · 0 评论 -
ref直接访问一个子组件
尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如:<base-input ref="usernameInput"></base-input>现在在你已经定义了这个 ref 的组件里,你可以使用:this.$refs.usernameInput来访问这个 <base-input> 实例,以便不时之需。比如程序化地从一个原创 2022-02-09 23:06:27 · 167 阅读 · 0 评论 -
vue兄弟组件传值的两种方式
本demo主要是为了演示vue项目中兄弟组件之间的传值,这里我演示了两种方式:a. bus总线传值;b. 我自己一般把它当成常规的传值(其实也就是子组件A传父组件,父组件再传子组 件B)下边开始本次demo的编写:一. bus总线传值的使用:在项目中创建一个单独的eventBus.js文件该js文件的内容很简单,就是暴露一个vue实例而已。有人喜欢在main.js全局引入该js文件,我一般在需要使用到组件中引入。创建相关组件:父组件中注册并使用子组件:分别在子组件one和two中原创 2022-02-09 21:44:04 · 3126 阅读 · 2 评论 -
v-on可以绑定多个方法吗?
v-on绑定多个方法:例子:<p v-on="{click:dbClick,mousemove:MouseClick}">v-on绑定多个方法</p>例:<input type="text" :value="name" @input="onInput"@focus="onFocus" @blur="onBlur" />可以简写为:<input type="text" v-on="{ input:onInput,原创 2022-02-09 20:47:26 · 250 阅读 · 0 评论 -
new Vue({ render: h => h(App), }).$mount(‘#app‘)是什么意思?
render函数的作用render函数是vue通过js渲染dom结构的函数createElement,约定可以简写为hrender: h => h(App);缩写前render:function(createElement){ return createElement(App);}继续缩写render(createElement){ return createElement(App);}继续缩写render(h){ return h(App);}箭头函原创 2021-11-29 23:09:36 · 513 阅读 · 0 评论 -
router-link 与 router-view是什么东西?
初学者理解了SPA(single page web application),就更容易理解vue中 router-link 与 router-view是什么东西?1、router-lin中//如导航代码 <router-link class="nav-link" to="ContactUs">联系我们</router-link>通过router-link可以使<router-view/>中的显示内容路由(跳转)到src/router/index.js文件中配置的原创 2021-11-29 22:54:19 · 1226 阅读 · 0 评论 -
vue中@符号表示什么意思?
./这是相对路径的意思。@/这是webpack设置的路径别名。这东西在vue标准模板里面的build/webpack.base.conf这个文件里面。resolve: { // 路径别名 alias: { '@': resolve('src'), 'vue$': 'vue/dist/vue.esm.js' }}就是说@这东西代表着到src这个文件夹的路径。...原创 2021-11-29 22:35:35 · 1563 阅读 · 0 评论 -
启用eslint 后会有 Failed to load config “standard“ to报错的问题
解决办法yarn add eslint-plugin-promiseyarn add eslint-plugin-nodeyarn add eslint-plugin -importyarn add eslint-plugin-standardyarn add eslint-config-standard或者使用 npm 也行原创 2021-05-30 20:26:53 · 1573 阅读 · 0 评论 -
如何使用vue-router
在vue-cli手脚架创建vue项目vue create usingrouter等待项目生成。在src的components创建三个文件About.vue<template> <div> <h2>我是关于</h2> <p>我是关于的内容,哈哈哈哈</p> </div></template><script>export default {原创 2021-03-25 21:16:18 · 77 阅读 · 0 评论 -
vue-组件化思想
vue-组件化思想注册组件的基本基础:父组件与子组件原创 2021-03-25 21:14:02 · 72 阅读 · 0 评论 -
vue子传父$emit
<!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-23 20:11:17 · 111 阅读 · 0 评论 -
Vue中props传递参数(父传子)
父组件要正向地向子组件传递数据或参数,子组件收到后,根据传递过来的数据不同,渲染不同的页面内容,或者执行操作。这个正向传递数据的过程是通过props来实现的。子组件使用props来声明需要从父组件接受的数据。注意的:在js中对象和数组是引用类型,指向同一个内存空间,所以props是对象和数组时,在子组件内改变是会影响父组件的。父组件中<template> <div> <HelloWorld :message1="messageToHelloW原创 2021-03-23 17:01:21 · 3328 阅读 · 0 评论 -
Vue 中非父子组件间的传值
总线机制非父子之间传值,可以采用发布/订阅模式,这种模式在 Vue 中被称为总线机制,或者叫做Bus / 发布订阅模式 / 观察者模式<div id="root"> <child content="Dell"></child> <child content="Lee"></child></div>Vue.prototype.bus = new Vue() //挂载 bus 属性Vue.c原创 2021-03-23 19:59:34 · 197 阅读 · 0 评论 -
vue-loader基础使用方法
vue-loader在main.js内加载在vue文件把:src改成v-lazy使用vue.use()Vue.use(VueLazyLoad,{error:'', //加载失败的图loading:'' //加载中的默认图})官方详细配置文件实现懒加载,使用v-lazy代替src属性<ul> <li v-for="img in list"> <img v-lazy="img.src" > </li></ul>.原创 2021-03-22 22:06:31 · 308 阅读 · 0 评论 -
vue中的:key是什么,有什么用?
vue中的:key是什么,有什么用?因为不理解 :key(v-bind:key),网上查了一些的资料,这篇写得非常不错,很简洁清楚。其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了。我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。vue和react的虚拟DOM的Diff算法大致相同,其核心是原创 2021-03-19 22:41:59 · 2134 阅读 · 0 评论 -
.v-if与v-show有什么区别?
共同点:v-if 和 v-show 都能实现元素的显示隐藏区别:v-show 只是简单的控制元素的 display 属性,而 v-if 才是条件渲染(条件为真,元素将会被渲染,条件为假,元素会被销毁);v-show 有更高的首次渲染开销,而 v-if 的首次渲染开销要小的多;v-if 有更高的切换开销,v-show 切换开销小;v-if 有配套的 v-else-if 和 v-else,而 v-show 没有v-if 可以搭配 template 使用,而 v-show 不行原创 2021-03-19 22:23:18 · 68 阅读 · 0 评论 -
axios和ajax区别
axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。axios是ajax ajax不止axios。axios代码示例如下:axios({ url: 'http://wwww.xxx.com/user', method: 'get', //method:'post' respon原创 2021-03-18 22:46:44 · 214 阅读 · 0 评论 -
computed与method的区别
computed调用是属性调用,不需要加括号methods是函数调用,需要加括号<div id="app"> <input type="text" v-model.number='a'> <input type="text" v-model.number='b'> <p v-cloak>结果:{{handle()}}</p> <p v-cloa原创 2021-03-18 22:26:58 · 109 阅读 · 0 评论 -
extend与component的区别
使用component的案例<!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">原创 2021-03-17 23:59:31 · 259 阅读 · 0 评论 -
slot插槽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--1.插槽的基本使用 <slot></slot>2.插槽的默认值 <slot>button</slot>3.如果有多个值, 同时放入到组件进行原创 2021-03-17 23:58:26 · 71 阅读 · 0 评论 -
vue条件渲染v-if,v-else简单应用
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head><body><div id="app">原创 2021-03-17 16:55:26 · 103 阅读 · 0 评论 -
前端存储主要有哪些方式,有什么区别(sessionStorage,localStorage,cookie)
前端在处理页面数据的时候有时候会存放一些数据在浏览器当中,一般存储在浏览器当中的缓存数据安全性比较低。主要的存储方式如下图:1.localStorage1.存储时间是永久存储。2.大小在5M左右。3.ie低版本或者一些使用无痕浏览器都是不支持的4.存储的是字符串,内容过多时,会消耗内存空间,让页面变卡5.本地存储,不会和服务器有交互代码:// 使用方法存储数据localStorage.setItem("name", "Srtian")// 使用属性存储数据localStorage.原创 2021-03-17 16:17:47 · 2442 阅读 · 2 评论 -
关于axios的应用
//最简单的aixos实例axios({ url:'http://123.207.32.32:8000/home/multidata', //不写method,默认传get 请求 method:'get'}).then(res=>{ console.log(res)})//另一种方式axios.get('http://123.207.32.32:8000/home/data') .then(res=>{ console.log(原创 2021-03-15 17:07:42 · 105 阅读 · 0 评论 -
父访问子组件 -children-refs的基本使用
<!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-15 17:00:42 · 104 阅读 · 0 评论 -
宏任务和微任务的区别
概念1: JS是单线程执行”JS是单线程的”指的是JS 引擎线程。在浏览器环境中,有JS 引擎线程和渲染线程,且两个线程互斥。Node环境中,只有JS 线程。概念2:宿主JS运行的环境。一般为浏览器或者Node。概念3:执行栈是一个存储函数调用的栈结构,遵循先进后出的原则。宏任务和微任务宏任务:script、setTimeOut、setInterval、setImmediate微任务:promise.then,process.nextTick、Object.observe、Mutati原创 2021-03-13 16:19:51 · 775 阅读 · 0 评论 -
MVVM与MVC的区别
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验,如Silverlight、音频、视频、3D、动画……,这导致了软件UI层更加细节化、可定制化。同时,在技术层面,WPF也带来了 诸如Binding、Depend原创 2021-03-13 15:49:16 · 279 阅读 · 0 评论 -
Vue.extend()与Vue.component
Vue.compont是Vue.extend()的语法糖<html lang="en"><head> <meta charset="UTF-8"> <title>05-父子组件的关系</title></head><body><div id="app"><div><h2>我是cpn2的标题</h2> <p>我是cpn2的内容,哈哈哈</原创 2021-03-12 21:34:52 · 90 阅读 · 0 评论 -
组件的分离写法
<html lang="en"><head> <meta charset="UTF-8"> <title>07-组件的模板分离写法</title></head><body><div id="app"><div><h2>cpn1标题</h2> <p>我是cpn1的内容</p></div> <div><原创 2021-03-12 21:34:36 · 109 阅读 · 0 评论 -
vue中的$on与$emit
们再项目中经常会遇到这么些情况,兄弟组件之间的传值。比如说一个组件内的按钮触发了兄弟组件的<audio>标签,从而播放背景音乐。另一个组件触发了暂停,从而暂停背景音乐。这个时候就会用到$on和$emit了。使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件$emit1、this.$emit(‘自定义事件名’,要传送的数据);2、触发当前实例上的事件,要传递的数据会传给监听器;$on1、VM.$on('事件名',callback) ---原创 2021-03-10 22:20:00 · 1158 阅读 · 0 评论 -
关于vue中的$ref的理解
访问子组件实例或子元素尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如:<base-input ref="usernameInput"></base-input>现在在你已经定义了这个 ref 的组件里,你可以使用:this.$refs.usernameInput来访问这个 <base-input> 实例,以便不时原创 2021-03-10 21:53:20 · 380 阅读 · 0 评论 -
vue-router keep-alive中的include和exclude
keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。它们有两个非常重要的属性在components有两个组件Profile和userinclude使用方法:1.include-字符串或正则表达式,只有匹配的组件会被缓存<keep-alive include='Profile,user'> <router-view></router-view></keep-alive>exclude使用方法:2.ex原创 2021-03-10 16:29:57 · 1549 阅读 · 0 评论 -
如何在VUE中使用自定义指令?
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。什么是自定义指令:自定义一些指令对底层DOM进行操作。自定义指令的钩子函数一个指令定义对象可以提供如下几个钩子函数 (均为可选):bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令原创 2021-03-09 22:36:22 · 154 阅读 · 0 评论 -
什么是VUE生命周期?
生命周期图示:VUE生命周期?Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这个时候,数据还没有挂载呢,只是一个空壳,无法访问到数据和真实的do原创 2021-03-09 16:03:11 · 279 阅读 · 0 评论 -
你如何看待前端模块化的?
你如何看待前端模块化的?是一种编程思想所谓的模块化开发就是封装细节,提供使用接口,彼此之间互不影响,每个模块都是实现某一特定的功能。模块化开发的基础就是函数模块化方式主要分为四种:CommonJS,AMD,CMD,ES6CommonJS规范主要用于服务端编程,加载模块是同步的,这并不适合在浏览器环境,因为同步意味着阻塞加载,浏览器资源是异步加载的,因此有了AMD CMD解决方案。AMD规范在浏览器环境中异步加载模块,而且可以并行加载多个模块。不过,AMD规范开发成本高,代码的阅读和书写比较困难,原创 2021-03-09 15:34:45 · 208 阅读 · 0 评论 -
vuex是做什么的?如何使用?
vuex是做什么的?vuex管理什么状态呢?多界面状态管理:vue状态管理图例使用Vuex的countState单一状态树原创 2021-03-07 18:11:19 · 144 阅读 · 0 评论