vuejs
lala_shine
1111
展开
-
vue3搭建项目的两种方式@vue/cli和vite
vue3搭建项目有两种方式:vite和@vue/cli1、@vue/cli搭建方式见文章:https://blog.csdn.net/qq_40015826/article/details/89249086PS: 使用cli版本需要高于4.5.x//全局安装npm install -g @vue/cli# ORyarn global add @vue/cli//全局卸载npm uninstall -g vue-cli# ORyarn global remove vue-cli//升级原创 2022-04-02 14:44:12 · 3565 阅读 · 0 评论 -
vue-cli4配置标题title和图标favicon.ico
1、配置全局默认标题(1)首先,在index.html页面增加配置<title><%= htmlWebpackPlugin.options.title %></title>(2)vue.config.js文件配置module.exports = { //配置主路径 publicPath: '/web', chainWebpack: config => { //设置标题 默认不设置的话是项目名字 co原创 2021-12-27 10:26:20 · 1765 阅读 · 0 评论 -
vue3.0使用ref获取dom元素
1、Vue 2.x获取DOM<div ref="myRef"></div>this.$refs.myRef2、Vue 3.0获取单个DOM<template> <div ref="myRef">获取单个DOM元素</div></template><script>import { ref, onMounted } from 'vue';export default { setup() {原创 2021-12-09 16:21:10 · 1034 阅读 · 0 评论 -
VueRouter中query与params传参区别
在Vue中提供了两种方法来进行路由传参:query 和 params ,下面来看看它们两个的区别在哪里1、query语法:this.$router.push({path:"地址",query:{id:"123"}}); 这是传递参数this.$route.query.id; 这是接受参数2、params语法:this.$router.push({name:"地址",params:{id:"123"}}); 这是传递参数this.$route.params.id; 这是接受参数以上就是这原创 2021-12-01 16:56:56 · 785 阅读 · 0 评论 -
route与router当前与全局路由
vue-router中经常会操作的两个对象route和route和router两个。1、$route对象$route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。1.$route.path** 字符串,对应当前路由的路径,总是解析为绝对路径,如"/foo/bar"。2.$route.params** 一个 key/value 对象,包含了 动态片段 和 全匹配片段, 如果没有路由参数,就是一个空对象。3.rout转载 2021-12-01 16:52:59 · 1107 阅读 · 0 评论 -
vue3中watch与watchEffect区别
watch和watchEffect都是监听器,但在写法和使用上有所区别。watch在监听 ref 类型时和监听reactive类型时watch函数的写法不一样。1、watch在监听 ref 类型时,代码如下:<script>import {ref, watch} from 'vue'export default { setup() { const state = ref(0) watch(state, (newValue, oldValue)转载 2021-11-26 20:12:23 · 562 阅读 · 0 评论 -
vue3中toRaw使用
1、toRaw使用场景ref/reactive数据类型每次修改都会被追踪,都会更新UI界面,但是这样是非常消耗性能的,所以如果我们有一些操作不需要追踪,不需要更新UI界面,那么这个时候我们就可以通过toRaw方法拿到它的原始数据,对原始数据进行修改,这样就不会被追踪,这样就不会更新UI界面,这样性能就好了。reactive:<template> <p>{{state}}</p> <button @click="myFn">按钮点击<转载 2021-11-26 18:09:13 · 4501 阅读 · 0 评论 -
vue3中的shallowReactive
1、shallowReactive监听了第一层属性的值,一旦发生改变,则更新视图;其他层,虽然值发生了改变,但是视图不会进行更新<template> <h3>shadowReactive:</h3> <p class="state1">{{state}}</p> <button class="btn1" @click="change1">change1</button> <button原创 2021-11-26 17:19:23 · 1206 阅读 · 0 评论 -
vue3中ref与toRef的区别
1、ref是复制,视图会更新如果利用ref将某一个对象中的某一个属性值变成响应式数据我们修改响应式数据是不会影响原始数据的;同时视图会更新。ref就是复制 复制是不会影响原始数据的<template> <div> <div> <div>{{stateObj}}</div> <button @click="func1">按钮</button> </div> &转载 2021-11-25 20:24:15 · 929 阅读 · 0 评论 -
如何运行单个.vue文件
1、全局安装vuecnpm install -g @vue/cli2、查看vue版本vue -V //version--4.5.153、全局安装下面的扩展cnpm install -g @vue/cli-service-global4、在 .vue 文件所在的目录下运行vue serve About.vue发现报错,提示错误信息如下:5、使用全局命令安装@vue/compiler-sfccnpm install -g @vue/compiler-sfc接着运行v原创 2021-11-24 20:55:31 · 6067 阅读 · 1 评论 -
vue中父组件调用子组件方法
父组件调用子组件方法,使用ref获取,代码如下://父组件<template> <div class="home"> <HelloWorld ref="mychild"></HelloWorld> <div @click="clickParent">click me</div> </div></template><script> import HelloWorld原创 2021-11-24 11:32:20 · 300 阅读 · 0 评论 -
Vue slot-scope
鉴于还是有不少的同学搜到这篇文章,而这篇文章又是笔者早期写的,现在回过头来看发现有太多的不足,为避免误人子弟,重新撰写了一篇Vue slot 详解 ,有需要的同学可以去浏览一下。 百度上已经有很多的关于slot-scope的文章,但我感觉都是那些以前没学好,又回头学的人,他们都使用了.Vue文件,我觉得有点不适合初学者,所以我...转载 2021-08-19 10:39:52 · 698 阅读 · 0 评论 -
nvm安装及配置(vite+vue3构建项目报错 zlib_1.brotliCompressSync is not a function)
nvm安装及环境配置1、背景说明使用vite+vue3构建前端项目的时候,必须要求node版本原创 2021-08-03 11:27:25 · 758 阅读 · 0 评论 -
Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的。放大之,对vue的生命周期不甚了解。只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的。因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚。于是我开始先去搜索,发现vue2.0的生命周期没啥文章。大多是1.0的版本...转载 2018-03-29 14:19:01 · 147 阅读 · 0 评论 -
vuejs实践todolist列表
前言:刚学习vue的小伙伴不知道从哪入手,很多网上的教程一来就搭建脚手架环境,可以新手更本看不懂,建议还是用引入script的方式引入vue.js,然后看官网的教程,再拿那这个demo练练手,也可以看看官网的demo,然后再 去熟悉安装,搭建单页面应用。效果:功能...转载 2018-03-29 15:27:43 · 865 阅读 · 0 评论 -
vue中的watch监听事件机制
问题:想通过路由id的变化来改变组件的加载数据时,遇到了一个问题,就是,组件不会重新渲染。一脸懵逼了,,, 找到了watch的监控方法时,又用不好。通过自己的摸索实践,终于有点收获,于是赶紧记录下来。。首先确认 watch是一个对象,一定要当成对象来用。 对象就有键,有值。 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量...转载 2018-03-29 17:14:20 · 5872 阅读 · 1 评论 -
Vue.js小例子--tab选项卡切换
Vue是一个小巧轻便的JavaScript库。它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷。实际上,一直让Vue引以为豪的是它的便捷性、执行力、灵活性。 目前在学习Vue.js。在学习的时候需要把手动操作DOM的思维去掉,因为Vue是数据驱动,不需要手动操作DOM。他通过一些特殊的hmtl语法,将DOM和数据绑定起来。一旦创建了绑定,DOM就会和数据保持同步,每当变更...转载 2018-06-07 17:25:03 · 1612 阅读 · 0 评论 -
vue中的template标签
1.template标签,HTML5提供的新标签,更加规范和语义化 ;可以把列表项放入template标签中,然后进行批量渲染&lt;template id="tem"&gt; &lt;div id="app"&gt; &lt;h1 id="title"&原创 2018-06-22 15:32:32 · 130451 阅读 · 8 评论 -
vue实例化template参数的介绍
经常发现这样的代码在一些实例中:new Vue({ el:"#app", data:{ message:"message1 hello!" }, components:{ App:{template:"&lt;div&gt;This is template!&lt;/div&原创 2018-12-05 16:29:36 · 3151 阅读 · 2 评论 -
vue入门之vue-cli安装步骤详解
vue2入门之vue-cli vue-clivue在web前端可谓是大放异彩,尤其在国内与angular、react有三足鼎立之势。很多人想入门vue2而又苦于不知从何下手。因为vue2是以组件化开发的,最好要搭配webpack构建工具开发,而webpack很多人还不能独立配置。而vue-cli脚手架就能很好解决这一问题。即使你对webpack还不...转载 2018-12-07 15:10:43 · 257 阅读 · 0 评论 -
vue2.0与vue1.0中的过滤器
先介绍下vue1与vue2的filter区别,也就是vue2更新的地方:a- 2.0将1.0所有自带的过滤器都删除了,也就是说,在2.0中,要使用过滤器,则需要我们自己编写。b- 2.0过滤器的传参方式不是以前的方式,是以函数传参的方式,下面示例(后面有具体示例):vue2.0传参方式实现过滤器:而在1.0版本之前却是这样使用过滤器的,不是哈数传参的方式,而是以空格隔开,实例...原创 2019-01-28 17:24:40 · 365 阅读 · 0 评论 -
vue-resource和axios的区别
VUE-RESOURCE1.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为...原创 2019-02-26 17:15:34 · 1282 阅读 · 0 评论 -
axios发送请求,全局处理异常
之前用ajax的时候,jquery中的ajax处理全局异常,通过设置ajaxSetup方法:$.ajaxSetup({ headers: {'Authorization': header}, //添加请求头 complete:function(xhr,data){ //执行完success或者error方法后均要执行这个complete函数,可以用来捕获...原创 2019-05-30 20:25:59 · 2458 阅读 · 1 评论 -
vue-router路由导航钩子
导航钩子vue-router提供的导航钩子主要用来拦截导航,让它完成跳转或者取消。有多种方式:全局的守卫,路由独享的守卫,或者组件级的守卫。 全局的钩子const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // do something next();});...原创 2018-04-16 13:37:13 · 1085 阅读 · 0 评论