热门标签
热门文章
- 1PNPM 批量检查和更新项目依赖_pnpm 全部升级最新版本
- 2Android10 设置默认Launcher_android设置默认launcher
- 3安卓常用第三方框架
- 4复现XSS漏洞及分析_xss漏洞修复
- 5Java代码为什么要在虚拟机中运行？_java为什么要用虚拟机
- 6Cache数据库SQL拼接列_cache 数据库行列,字符连接
- 7机器视觉——硬件选型
- 8Unity3D项目Plugins目录组织_unity plugins
- 9【git】idea撤销commit
- 10failure: repodata/repomd.xml 和 Loaded plugins: fastestmirror 问题解决_loaded plugins: fastestmirror, langpacks file cont
当前位置: article > 正文
vue学习大总结[待优化]_深入学习vue
作者：从前慢现在也慢 | 2024-02-19 12:22:47
赞
踩
深入学习vue
看前须知
这篇文章你可以只看深入了解–vue实例中的属性搭配指令使用，我觉得这篇博客我写的不太好，唯一的作用可能就是来好好捋一下各个属性以及如何与指令搭配使用。等到下次优化的时候，我会重新换一下目录:
- Vue项目的创建
- Vue常用属性如何与指令搭配使用
- Vue组件化
- Vue组件的组装
- Vue路由的使用
- ElementUI的使用
前言
自己想做项目的时候吧，没有页面，只能用postman就很难受，以前虽然学过一点点vue的皮毛，但是还是用不好，所以打算写下这篇博客，一方面可以帮到有需要的人，一方面也可以记录下来，帮助自己！
建议可以先去看一位up主的讲解再来看我的这篇blog,链接放在这里 https://www.bilibili.com/video/BV1er4y1P7UN?p=1&vd_source=06a5ae232746ef6be3fe7b194e82355d 你可以看完这个视频后再来把我这篇当作总结
始于足下–创建Vue项目
创建前提：你需要安装nodejs和Vue脚手架
- 以我为例，首先在下面这个目录下创建一个myapp文件夹
D:\Study\practice
- 1
- 以管理员身份打开cmd，依次输入以下命令
- 因为我们只需要一个简单的Vue项目，所以我们可以一直无脑敲电脑上的Enter键
- 第一次创建的时间较长，我们需要耐心等待，创建完成后出现如下界面
然后我们直接依次执行蓝色的两个命令，如果能成功启动项目就算完成创建了
初探Vue–看Vue项目的目录结构
- 我们将刚刚创建好的myapp使用vscode打开，看到有一大堆文件。
又是.gitgnore,又是jsconfig.jon，又是.js文件，可把人愁死了，但是我们暂时只需要重点关注src目录下的文件，其它的一律先不管(不管归不管的，你可别删了嗷！) - 打开src目录，你可以看到以下结构
- /assets:asset是资产的意思，顾名思义，里面放的是做页面需要的图片，音乐等资产
- /components:这是存放各式各样自定义组件的地方
- App.vue:这个是直接渲染到html页面上的Vue组件，你可以直接把它当成index页面，在这里调用你自己的组件和写页面
- main.js:可以在里面引入外来模块或者引入全局变量
渐入佳境–了解vue文件
- vue文件是什么？
一句话：一个.vue文件就是一个组件
相信大家都知道组件是什么东西吧，看下面这张图：
这个页面就是由四个组件（我觉得可能是）组成的，不同于原生的前端三剑客，Vue不是讲究把所有的代码都写在一个页面上，而是把代码分成几个组件，写完后再一点点去拼在页面上
- 如何编写一个vue文件？
- 首先，我们在components下创建一个Hello.vue,来向我们的世界打个招呼！(注意，组件文件的每个单词首字母要大写)
- 打开Hello.vue后，进行如下编写
<template> <h1>hello,world!</h1> </template> <script> export default{ data(){ return { } }, methods:{ }, computed:{ }, watch:{ }, created(){ }, mounted(){ }, components:{ }, filters:{ }, props:[] } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
这就是最简单的一个.vue文件
- 对.vue文件的解读
-
template标签里面可以编写这个组件的html
-
script标签中的export default{}是一个vue实例，里面存放着这个组件需要的数据、函数等等
深入了解–vue实例中的属性搭配指令使用
- data:它的返回值是一个对象，这个对象中包含着这个组件所需要的数据
data的绝佳使用:
{{}}：解析被双括号所包围的变量，从下面的data中找寻这个键的值
v-bind：此指令用于修饰标签的属性
v-if：此指令用于控制标签是否被创建
v-show：此指令用于控制标签是否展示于页面
v-for：此指令用于在列表中渲染数组
v-model：此指令用于数据在表单中的双向绑定
<template> <!-- 重点开始 --> <div v-if="isLogin"> <h1>hello,{{name}}</h1> <img v-bind:src="photo"/> 这是我们新进的水果:<br/> <ul> <li v-for="(fruit,index) of fruits" :key = "index"> {{fruit}} </li> </ul> </div> <div v-show="!isLogin"> <h1>抱歉，您还未登录，请登录:</h1> <div> 用户：<input v-model="userName"/><br/> 密码：<input v-model="password"/> </div> </div> <!-- 重点结束 --> </template> <script> export default{ //重点开始 data(){ return { name:"南极茄", photo:"https://img2.woyaogexing.com/2020/02/27/bfe02b7d49ce48998a7068f82bc64a1c!400x400.jpeg", isLogin:true, userName:"", password:"", fruits:["苹果","橘子","香蕉"] } }, //重点结束 methods:{ }, computed:{ }, watch:{ }, created(){ }, mounted(){ }, components:{ }, filters:{ }, props:[] } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- methods:它里面放有很多的方法，包含着这个组件每一个事件触发后所执行的方法
methods的绝佳使用:
v-on：用于给事件绑定方法
<template> <div v-if="isLogin"> <h1>hello,{{name}}</h1> <img v-bind:src="photo"/> </div> <div v-show="!isLogin"> <h1>抱歉，您还未登录，请登录:</h1> <div> 用户：<input v-model="userName"/><br/> 密码：<input v-model="password"/> </div> </div> <!-- 重点开始 --> <button v-on:click="changeState">点我切换形态！</button> <!-- 重点结束 --> </template> <script> export default{ data(){ return { name:"南极茄", photo:"https://img2.woyaogexing.com/2020/02/27/bfe02b7d49ce48998a7068f82bc64a1c!400x400.jpeg", isLogin:true, userName:"", password:"" } }, //重点开始 methods:{ changeState(){ this.isLogin = !this.isLogin; } }, //重点结束 computed:{ }, watch:{ }, created(){ }, mounted(){ }, components:{ }, filters:{ }, props:[] } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- computed：它里面的每一个函数都有一个返回值，就相当于每一个函数名都是一个键，这个函数的返回值就是这个键的值
computed的绝佳实现：
computed其实和data的用处都差不多，computed主要是用于计算属性之间的关系，当然你说了，在data中计算不也行吗。你说的也对，但是计算属性放在computed中这是规矩，一种约定，看起来更方便，就比如你看我下面，把data中的name删了，放到computed中了吧，为啥呢，名字是通过计算得出的啊。
<template> <div v-if="isLogin"> <h1>hello,{{name}}</h1> <img v-bind:src="photo"/> </div> <div v-show="!isLogin"> <h1>抱歉，您还未登录，请登录:</h1> <div> 用户：<input v-model="userName"/><br/> 密码：<input v-model="password"/><br/> <!-- 重点开始 --> 请输入你的姓和名来确定你的用户名:<br/> <input v-model="lastName"/><br/> <input v-model="firstName"> <h1>就决定了,你的名字是{{name}}</h1> <!-- 重点结束 --> </div> </div> <button v-on:click="changeState">点我切换形态！</button> </template> <script> export default{ data(){ return { photo:"https://img2.woyaogexing.com/2020/02/27/bfe02b7d49ce48998a7068f82bc64a1c!400x400.jpeg", isLogin:true, userName:"", password:"", lastName:"南极", firstName:"茄", } }, methods:{ changeState(){ this.isLogin = !this.isLogin; } }, //重点开始 computed:{ name(){ return this.lastName+this.firstName; } }, //重点结束 watch:{ }, created(){ }, mounted(){ }, components:{ }, filters:{ }, props:[] } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- watch:这是个对象，里面放有很多函数，函数名和data和computed中的键的名字一模一样，当哪个键的值改变了，就会自动执行函数名等于该键名的函数
watch的绝佳实现:
主要用于监听哪个数据是否发生变化(数据包括data和computed中的数据)以及对某些数据可以进行处理
<template> <div v-if="isLogin"> <h1>hello,{{name}}</h1> <img v-bind:src="photo"/> </div> <div v-show="!isLogin"> <h1>抱歉，您还未登录，请登录:</h1> <div> 用户：<input v-model="userName"/><br/> 密码：<input v-model="password"/><br/> 请输入你的姓和名来确定你的用户名:<br/> <input v-model="lastName"/><br/> <input v-model="firstName"> <h1>就决定了,你的名字是{{name}}</h1> </div> </div> <button v-on:click="changeState">点我切换形态！</button> </template> <script> import { createStructuralDirectiveTransform } from '@vue/compiler-core'; export default{ data(){ return { photo:"https://img2.woyaogexing.com/2020/02/27/bfe02b7d49ce48998a7068f82bc64a1c!400x400.jpeg", isLogin:true, userName:"", password:"", lastName:"南极", firstName:"茄", } }, methods:{ changeState(){ this.isLogin = !this.isLogin; } }, computed:{ name(){ return this.lastName+this.firstName; } }, //重点开始 watch:{ name(newVal,oldVal){ alert("由于名字更改，请重新输入密码") console.log("你的新名字是"+newVal); console.log("你的老名字是"+oldVal); this.password = ""; } }, //重点结束 created(){ }, mounted(){ }, components:{ }, filters:{ }, props:[] } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- created：在该组件被使用并打开页面的一瞬间调用该函数
- mounted：在页面渲染完成后调用该函数
其实这两个函数调用都是特别快，都是在页面打开的一瞬间就调用，只不过created调用的比mounted早一点点
created和mounted的绝佳使用：
<template> <div v-if="isLogin"> <h1>hello,{{name}}</h1> <img v-bind:src="photo"/> </div> <div v-show="!isLogin"> <h1>抱歉，您还未登录，请登录:</h1> <div> 用户：<input v-model="userName"/><br/> 密码：<input v-model="password"/><br/> 请输入你的姓和名来确定你的用户名:<br/> <input v-model="lastName"/><br/> <input v-model="firstName"> <h1>就决定了,你的名字是{{name}}</h1> </div> </div> <button v-on:click="changeState">点我切换形态！</button> </template> <script> import { createStructuralDirectiveTransform } from '@vue/compiler-core'; export default{ data(){ return { photo:"https://img2.woyaogexing.com/2020/02/27/bfe02b7d49ce48998a7068f82bc64a1c!400x400.jpeg", isLogin:true, userName:"", password:"", lastName:"南极", firstName:"茄", } }, methods:{ changeState(){ this.isLogin = !this.isLogin; } }, computed:{ name(){ return this.lastName+this.firstName; } }, watch:{ name(newVal,oldVal){ alert("由于名字更改，请重新输入密码") console.log("你的新名字是"+newVal); console.log("你的老名字是"+oldVal); this.password = ""; } }, created(){ alert("我被创建了"); }, mounted(){ alert("页面渲染完成"); }, components:{ }, filters:{ }, props:[] } </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- components：这是一个对象，可以引入外部的组件并将其注册为标签
- props：子组件用来接收父组件传过来的值
刚才我们说过，App.vue其实就相当于html页面，那我们肯定要在这个文件中引入Hello.vue组件，那我们就在App.vue中可以这么写
<script>
import Hello from "./components/Hello.vue";
export default {
components: {
HelloWorld,
Hello: Hello,
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
这样我们就可以在App.vue的template标签中使用Hello标签了
这个父子传值呢，就会用到props，具体可以去看 https://www.bilibili.com/video/BV1er4y1P7UN?p=4&vd_source=06a5ae232746ef6be3fe7b194e82355d 这个链接下的视频，当然我也总结了一点：
1.父向子传值(App.vue向Son.vue传值)
<!-- 在App.vue中 -->
<Son :msg = "message"></Son>
- 1
- 2
// 在Son.vue中
export default{
props:["msg"]
}
- 1
- 2
- 3
- 4
2.子向父传值(使用事件)
<!-- 在App.vue中 -->
<Son :msg = "message" @myEvent="changeData"></Son>
<!-- changeData(childData){
this.childData = changeData;
} -->
- 1
- 2
- 3
- 4
- 5
// 在Son.vue中
//这是上面的html:<button @click = "sendData"></button>
//...............开始js代码
export default{
methods:{
changeData(){
this.$emit("myEvent",childData)//执行父级的"myEvent",并传值
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
3.兄弟传值(1+2混合使用)
- filters：这里面是一些方法，用于把放进来的信息过滤成想要格式的信息(vue3不再支持过滤器，而是建议使用computed，所以这里不再介绍了)
完结撒花–插槽和路由
这两个可以去看视频，毕竟这两个一看就会用，也不和别的属性一样一大堆用着乱还需要捋一遍，或者等我日后有时间，再来补充相关知识，并且好好优化下这篇博客。
结语
写的乱得很啊我吐了，以后一定会来优化的
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/114679
推荐阅读
相关标签
