![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue学习笔记
子非余不知渔之乐
唯PC相伴,以CODE解优,怎奈BUG长相随,欲将心事付瑶琴,知音少,弦断有谁听。本是青灯不归客,却因浊酒留风尘。
展开
-
vue 组件的生命周期
vue 组件的生命周期原创 2022-09-07 17:07:37 · 251 阅读 · 1 评论 -
vue学习笔记:使用vant的list和PullRefresh组件实现上拉刷新和下拉加载
先看效果:再上代码<template> <div class="pageRoot"> <van-nav-bar title="威哥头条" fixed /> <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <van-list v-model="loading" .原创 2022-05-11 15:21:55 · 1997 阅读 · 1 评论 -
vue学习笔记:修改第三方组件样式
为了提高开发效率,我们经常会使用第三方组件库,例如Ant Design,Vant,Element等。一般组件库会为我们提供比较美观的样式供开发者选择,但是当提供的组件样式不满足需求时,我们需要能够自己来修改组件的样式。 例如下面这个例子,我用到了Vant组件库中的Navbar组件,这是一个标题组件,默认的样式是这样的: 现在我需要将组件的背景改为淡蓝色,文字改为白色。 首先利用谷歌浏览器的元素选择工具,查找到决定组件背景样式的clas...原创 2022-05-10 21:32:32 · 2654 阅读 · 0 评论 -
安装第三方组件时报unable to resolve dependency tree的错误
今天尝试着在Vue的项目中引用Vant,实用管网上的命令:npm i vant@latest,但是运行了很多次,一直提示下面这个错误,开始没仔细看错误信息,复制了第一行错误:unable to resolve dependency tree就开始百度,找了很久也没找到合适的解决方案。后来在不经意间看到页面中有这么一句话:“Fix the upstream dependency conflict,or retry this scommand with --force,or --legacy-peer-原创 2022-05-10 10:37:00 · 1949 阅读 · 0 评论 -
Vue学习笔记:路由详解
路由:Hash地址与页面的对应关系。1、vue-router的基本使用(1)安装vue-roouter包npm i vue-roouter@3.5.2 -S(2)创建路由模块在src源代码目录下,新建roouter/index.js路由模块,并初始化如下代码:import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)) //调用Vue.use()函数,把VueRoouter安装为V原创 2022-05-08 23:30:18 · 763 阅读 · 0 评论 -
VUE学习笔记:插槽详解
刚开始看Vue官方文档的时候对插槽不是很理解,其实通俗点来讲,插槽就是在自定义组件中预留一个位置,这个位置的内容可以由使用组件的人来定义,具有高度的灵活性。1、使用场景先来看看插槽的使用场景,否则可能连学习的欲望都没有了。插槽还是很重要的,即使不去定义,也要学会使用。下面这个图中使用了Vant中的NavBar组件,该组件用于手机端标题展示,默认的组件展示的只有标题和返回按钮,但是在有些情况下,我们可能需要在标题栏中放一个增加或查询按钮,这个时候就需要利用插槽来让用户自己定义区域中的内...原创 2022-05-08 17:15:45 · 3730 阅读 · 0 评论 -
vue学习笔记:Vue组件
每个.vue组件都由3部分构成,分别是:(1)template:组件的模板结构(2)script:组件的javascript代码(3)style:组件的样式1、组件中的data不能是一个对象。必须是一个函数,通过return 返回一个数据对象:<script>export default{ data(){ return { userName:"张三丰" } }}</script>原创 2022-05-05 00:29:06 · 554 阅读 · 0 评论 -
vue学习笔记:在vscode中使用@提示路径
在vscode中输入“@/"后如果可以智能提示路径,可以有效防止路径名称输入错误,减少不必要的麻烦。效果如下图所示:安装"Path Autocomplete"插件后可以实现路径的智能提示,步骤如下:1、在vscode中查找Path Autocomplete插件2、安装插件3、在vscode中选择“文件-首选项-设置”,在设置页面右上角点击图标打开settings.json配置文件4、在配置文件中添加如下代码在 //导入文件时是否携带文件扩展..原创 2022-05-03 10:50:41 · 3286 阅读 · 3 评论 -
vue学习笔记:v-model指令的修饰符
v-model指令的修饰符有三个,分别是:1.number作用:自动将用户的输入值转为数值类型。示例:<input type="text" v-model.number="age">2.trim作用:自动忽略输入内容的首尾空白字符示例:<input type="text" v-model.trim="userName">3.lazy作用:双向绑定时,当光标离开时才更新对应的变量示例:<input type="text" v=model.laz原创 2022-04-29 23:11:16 · 1742 阅读 · 0 评论 -
vue学习笔记-侦听器
1、侦听器用于监听变量值是否发生变化,从而针对数据的变化而做特定的操作。基本语法:watch:{ userName(newVal,oldVal)//方法名必须跟监听的变量名称一致。 { //数据发生变化后执行的代码段,newVal和oldVal分别代表变化 前的值和变化后的值。 } }2、默认情况下,组件在初次加载完毕后不会调用watch侦听器。如果想让watch侦听器在页面渲染完成原创 2022-05-02 22:05:55 · 673 阅读 · 0 评论