Vue
文章平均质量分 72
Vue学习之旅,记录一下学习过程。
zhengsweet
这个作者很懒,什么都没留下…
展开
-
重新启程之Vue——点击按钮,弹出弹窗组件
目录一、点击按钮,弹出弹窗组件二、用v-for渲染一堆按钮,给每个按钮绑定不同的事件,其中一个按钮,点击则显示弹窗组件一、点击按钮,弹出弹窗组件按钮:<el-button>弹窗:<log-dialog><el-button type="primary" size="small" @click="LogDialogVisible = true" plain .原创 2021-11-10 14:09:40 · 12152 阅读 · 0 评论 -
重新启程之Vue——文件
App.vue<template> <div id="app"> <router-view /> </div></template><script>export default { name: 'App'}</script>main.js:是入门文件,也是全局配置文件(意思就是在main.js中import了 某文件/东西/组件,此文件/东西/组件 在其他文件中也可以...原创 2021-11-10 11:49:47 · 258 阅读 · 0 评论 -
重新启程之Vue2:基础
使用脚手架与不使用脚手架创建的区别!特别是目录,(直接少了一堆分不太清的文件)原创 2021-11-04 16:54:00 · 102 阅读 · 0 评论 -
重新启程之Vue:安装
一、安装node由于这次使用的是windows7,所以node版本需要注意,最新版本的node在windows7里面安装不了Index of /download/release/v13.14.0/下载这个以msi结尾的安装包! (下载之后其实已经顺带帮你安装好npm了)安装好在cmd中测试node --vnpm --v参考:win7 安装最后一个支持的nodejs-13.14.0 - hy33 - 博客园二、安装淘宝镜像,安装脚手架npm install -g c..原创 2021-11-02 17:48:57 · 269 阅读 · 0 评论 -
学习Vue之旅:Day11——简单博客制作
点击下一页,上一页,如何自动跳转到顶部?//document.body.scrollTop=0;//使用这个,则点击下一页,会自动回到顶部。当然,返回上一页的函数中,也需要加上这个。原创 2021-09-13 16:11:59 · 173 阅读 · 0 评论 -
学习Vue之旅:Day10——网易云(歌单内部)
Vue中,如何实现点击,跳转到新的view?点击 歌单封面,跳转到新的views配置好路由:把原本的div 改成 router-link即可,加上 :to可是这样子,下面的span里面 的字体也变成链接了,则会有链接的默认样式,如图:解决方法:(即使不是a标签) a{ color: #333; text-decoration: none; }其实每个歌单都有自己的id:涉及到 query传值的问题:vue中路由跳...原创 2021-09-13 00:14:49 · 219 阅读 · 0 评论 -
学习Vue之旅:Day9——网易云(首页)
如何变成这种上下排版?设为flex,然后 把主轴设为竖直方向设置align-item,即可得到文字与图标居中的效果为什么改变font-size,无效?有些页面可能设置了最小字体,不能直接设置字号,比如chrome的最小字号是12px,如果需要更小就需要使用放缩属性小卡片左右滑动的实现 – 前端开发,JQUERY特效,全栈开发,vue开发VUE3.X使用最新版swiper小结_lynnpaul的博客-CSDN博客vue中swiper vue-aweso...原创 2021-09-11 16:09:28 · 405 阅读 · 1 评论 -
学习Vue之旅:Day8——网易云实战遇到的问题
先下载好api ,在power shell里输入:git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git可参考:https://neteasecloudmusicapi.vercel.app/#/如果自己的文件里 有了这个api,说明下载好了将下载好的api拖入vsc,然后打开终端:复制http://localhost:3000/到浏览器打开api有了之后,开始搞app...原创 2021-09-09 15:02:58 · 450 阅读 · 0 评论 -
学习Vue之旅:Day8——
一、全局的状态管理新建一个store文件夹,里面新建一个 index.js文件——设置一个 全局的状态管理①②在App.vue里 provide导出③在(全局)子组件中,通过inject导入vuex:全局状态管理在getter里计算属性。二、获取api,拿到数据,展示数据第二种: npm axios,然后 import 如何在html中展示数据?三、配置代理服务器...原创 2021-09-08 17:38:14 · 81 阅读 · 0 评论 -
学习Vue之旅:Day8——路由
目录一、使用路由第一步——安装二、动态路由匹配三、路由 结合 正则表达式四、嵌套路由五、使用js跳转页面六、命名视图:七、重定向八、别名九、HTML5 History 模式十、全局前置守卫一、使用路由第一步——安装在src下新建一个 router文件夹,里面建一个 index.js 。记得要import所有 路径要跳转到 的组件。安装(官网讲解)#直接下载 / CDNhttps://unpkg.com/vue-route...原创 2021-09-08 11:48:23 · 143 阅读 · 0 评论 -
学习Vue之旅:Day7——生命周期、合成API、ref、reactive、setup函数、父组件向子组件传递数据的方法
一、生命周期函数(不用写在methods里)初始化:beforeCreate(初始化数据之前) created(数据初始化之后)为挂载到页面做准备beforeMount (挂载渲染之前)挂载完毕,渲染在页面上,渲染完毕 mounted(挂载之后)更新 beforeUpdate(更新之前) updated(更新之后)卸载 beforeDestroy(销毁之前) destroyed(销毁之后) Vue 3.0中 beforeDestroy 被rename为...原创 2021-09-08 00:39:53 · 445 阅读 · 0 评论 -
学习Vue之旅:Day7——props、自定义事件
父组件和子组件之间的信息传递:props、自定义事件①父组件要传递数据给子组件通过props,传递属性以及属性值给子组件<News :content="newsContent"/>子组件要接收来自父组件的数据子组件:News.vue<h1>新闻内容是:{{content}}</h1>export default{ props:['content']}②子组件要传递数据给父组件,使用自定义事件子组件:Lo.原创 2021-09-07 13:58:40 · 103 阅读 · 0 评论 -
学习Vue之旅:Day7——事件绑定,表单数据绑定
一、事件绑定 以及 修饰符//绑定事件,不需要参数 v-on:的缩写为 @<button v-on:click="addEvent">点击增加</button>//绑定事件,传递参数<button @click="addEvent(传参)">点击增加</button> //也可以传 $event(事件对象)//绑定事件,直接写处理表达式<button @click="num+=1">点击增加</b...原创 2021-09-07 13:57:55 · 132 阅读 · 0 评论 -
学习Vue之旅:Day5——做一个todo-list
vue ui 可以启动vue项目的图形化管理界面,也就是你可以看到安装了什么依赖,下载了哪些包………………一、怎么从App.vue中拆分出各个组件,以达到复用效果?可以在App.vue中先写好整个页面 在把整个页面分成不同的组件 在component中新建vue文件,并命名为每个组件的名字,输入“vue”,点击“回车”就会自动创建好模板:即包含了<template><script><style>三部分 把App.vue中的html和css样式分别复制到组原创 2021-09-07 10:08:53 · 114 阅读 · 0 评论 -
学习Vue之旅:Day6——各种常用指令
一、模板语法常用指令:v-bind:如果一个属性的属性值是动态变化的,则属性名前加一个“v-bind:”,缩写为“:”eg: v-bind:id="myId" 缩写----> :id="myId"v-bind:class="red" 缩写----> :class="red" 不仅可以动态绑定属性值,也可以动态绑定属性<div :[attributeName]="d1" ></div>也可以动态绑定事件名称...原创 2021-09-07 10:09:58 · 75 阅读 · 0 评论 -
学习Vue之旅:Day4——axios、退出按钮
$refs的用法及作用参考:https://blog.csdn.net/xiaocuizao/article/details/99685302使用vue开发时经常会用到ref属性,ref属性有什么作用呢?用法①⭐:有时候我们想在父组件中调用子组件的方法或属性,这个时候该怎么做呢?可以通过为子组件设置ref,然后通过this.$refs.refName(refName为子组件的ref值)获取到子组件,然后就可以随意调用子组件的方法和属性了。用法②⭐:有时候我们想操作子组件或HTML标签的DO.原创 2021-09-04 18:34:10 · 178 阅读 · 0 评论 -
学习Vue之旅:Day4——Ajax
原创 2021-09-04 18:32:43 · 59 阅读 · 0 评论 -
学习Vue之旅:Day3——认识文件、引入组件库,写实例
一、组件 vs 框架组件 vs 框架 的区别,可以参考:https://zhuanlan.zhihu.com/p/98682826组件:就像一个个小的单位,多个组件可以组合成组件库,方便调用和复用,组件间也可以嵌套,小组件组合成大组件。模块:就像是独立的功能和项目(如淘宝:注册、登录、购物、直播...),可以调用组件来组成模块,多个模块可以组合成业务框架。二、webpack本质上,webpack是一个现代 JavaScript 应用程序的静态模块打包...原创 2021-09-04 13:21:37 · 412 阅读 · 0 评论 -
学习Vue之旅:Day2——插槽
目录一、插槽内容二、编译作用域三、后备内容四、具名插槽五、作用域插槽独占默认插槽的缩写语法解构插槽 Prop一、插槽内容官网的意思大概是:如果<navigation-link>的template中没有包含一个<slot>元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃。意思就是:如果<navigation-link>模板 没有插槽<slot></slot>,模板就...原创 2021-09-03 00:02:21 · 114 阅读 · 0 评论 -
学习Vue之旅:Day2——计算属性
计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量message的翻转字符串。当你想要在模板中的多处包含此翻转字符串时,就会更加难以处理。所以,对于任何复杂逻辑,你都应..原创 2021-09-02 22:18:17 · 181 阅读 · 0 评论 -
学习Vue之旅:Day2——双向绑定v-model、组件基础
一、表单输入绑定指令:v-model你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。<input v-model="message" placeholder="edit me"> <...原创 2021-09-02 19:55:16 · 152 阅读 · 0 评论 -
学习Vue之旅:Day2——条件渲染、列表渲染、事件处理、初始Axios
① 有实例就有生命周期。所以Vue实例的生命周期多长?下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA②条件渲染指令:v-if v-else-if v-else②列表渲染(其实就是for循环语句)指令:v-f...原创 2021-09-02 18:25:04 · 113 阅读 · 0 评论 -
学习Vue之旅:Day2
目录问题①:Vue报错:因为在此系统上禁止运行脚本问题②:Command vue init requires a global addon to be installed.Please run yarn global add @vue/cli-init and try again.问题③:如何创建Vue项目?问题①:vue : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本解决方法:h...原创 2021-09-02 13:11:01 · 71 阅读 · 0 评论 -
学习Vue之旅:Day1
一、关于Vue脚手架的安装 (①nrm ls一直报错/②脚手架安装得超级慢,则使用如下方法解决这两个问题)在http://nodejs.cn/download/ 安装 node.js(因为下载的node.js会顺带下载好npm) 测试nodejs 是否安装 ----在cmd中输入node -v 测试npm是否自动安装---- npm -v npm install -g cnpm 在这里我们使用国内镜像,提高下载速度,所以安装cnpm,后面需要用到npm命令的,不要交替使用,一律改...原创 2021-09-01 22:46:45 · 60 阅读 · 0 评论