Vue3 学习
学习路线大概是这样：
- Vue3的基础语法
- 组件化开发
- 全家桶相关内容(vuex vue-router)
- 底层原理
- 项目(axios ajax http)
1.用 Vue3 写一个hello world
首先呢，建一个html文件，写一个基本的<div id='app'>，引入官网给的CDN。创建一个Vue实例：
<!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>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script>
//Vue.createApp创建一个vue的实例，里面定义它的功能
//Vue2的话使用 new Vue()
Vue.createApp({}).mount("#app")//mount方法，可以挂载一个dom节点
</script>
</body>
</html>
接着我们绑定数据，在<div>中加入<h1>来展示数据：
<!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>Document</title>
</head>
<body>
<div id="app">
<!-- vue想实现绑定数据的话用{{}}，变量在createApp内定义data() -->
<h1>{{msg}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data(){ //data是一个函数，真正的数据是data()的返回值
return {
msg:'hello world'
}
}
}).mount("#app")
</script>
</body>
</html>
ok！进去浏览器看一下，没什么问题。那么小结一下：
- vue2中是用
new Vue创建实例，而vue3使用Vue.createApp创建实例。 - vue2中挂载节点除了mount 还可以
new Vue({el:'#app'})，但vue3就只用mount了。 - 像这个示例，我们通过引用js来使用vue
<script src="https://unpkg.com/vue@next"></script>，vue2的data直接是一个对象：data:{}，而vue3直接是一个函数了：data(){}
2.学习基本操作
学习vue首先最关注的3点：
- 如何操作html文本
- 如何操作html属性(href,src)
- 如何绑定事件
解决这三点的话，就能做很多案例了。比如：轮播图、计时器等等
ok，在上一个案例的基础上学习。我们知道在<h1>标签中绑定文本我们用到了两个花括号<h1>{{msg}}</h1>，那么除了这种方式，我们可以用指令来绑定文本。
指令：vue提供的一些特殊属性*，以 "v-" 开头，所谓 属性 就是写在标签内部的嘛*
这里我们绑定文本用的是 v-text
指令：vue提供的一些特殊 属性，以 "v-" 开头
<h1 v-text="msg"></h1>
那么这样之后我们可以看到效果跟原来是一样的，这样就绑定文本了。那么第一个点解决了如何操作html文本。
接下来第二点，操作属性。还是用<h1>标签来举例，它有一个属性 title，用处是当你鼠标悬浮在它上面的时候，会弹出一个框展示你 title 的内容。通常来说是这样写
<h1 title='hello vue3' v-text='msg'></h1>
那么我们想实现用vue来绑定它可以这样：
先在Vue中声明个变量 tit 给它
data(){
return {
msg:'hello world', //别忘了写逗号
tit:'hello vue3'
}
}
接下来介绍另一个指令v-bind绑定属性，用法是 需要在冒号后面写上要绑定的属性像这里是
<h1 v-bind:title='tit' v-text='msg'></h1>
<!-- 而且可以直接简写为只有冒号 : 像下面这样-->
<h1 :title='tit' v-text='msg'></h1>
ok，那么绑定属性也完成了，接下来是绑定事件。用到的是v-on:
事件触发会执行函数嘛，所以我们要先去定义函数：
<script>
Vue.createApp({
data(){
return ......
},
methods:{ //跟data()同级，有一个methods，是一个对象，里面我们放函数
showData(){ //这里定义一个showData()
alert("hello Vue3")
}
}
}).mount('#app')
</script>
然后绑定事件我们用到的指令是v-on: ，这里我们用点击事件：
<h1 :title='tit'
v-text='msg'
v-on:click="showData"></h1>
<!-- v-on同样可以简写，简写为 @ -->
<h1 @click="showData"></h1>
这样点击我们的 hello world 就可以触发showData()了，会有一个提示框出来。
2.1 计数器案例
ok。趁热打铁，做一个计数器 左边减号 中间数字 右边加号，我们要实现效果是点击按钮会触发响应效果。
铁子们最好自己先敲一遍，然后再来瞅瞅我的，应该是不会有什么差别。非常简便。
<div id="app">
<button @click="minus">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data(){
return {
num:0
}
},
methods:{
add(){
this.num++
},
minus(){
this.num--
}
}
}).mount('#app')
</script>
2.2 图片切换功能
接着训练，我们现在同一个目录下建一个images文件夹，里面存上我们自己喜欢的三张图片，这里我就分别叫1.jpg,2.jpg,3.jpg 了。
好那先说一下我们要实现的效果吧，简单地把图片展示出来就可以了，然后后面跟着三个按钮1，2，3，点击不同的按钮分别展示不同的图片。先实现一下图片和按钮。
<div id="app">
<!-- img就是用来展示图片的了，src写图片的路径 -->
<img src="images/1.jpg" />
<button @click="">1</button>
<button @click="">2</button>
<button @click="">3</button>
</div>
当然想实现这个效果可以有很多种写法，我这里写的是用数组来存储三张图片的地址，然后按按钮的时候呢分别读取数组中的对应元素。因为这样代码可以写得比较少一些，只写一个函数通过传参的方式就可以分别传出三张图片地址了。
<div id="app">
<!-- 为了切换起来不会太怪，我给它们设置了宽高 -->
<img :src="src" width="700" height="400" />
<button @click="changePic(0)">1</button>
<button @click="changePic(1)">2</button>
<button @click="changePic(2)">3</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data(){
return {
//想要实现这种切换效果，肯定得绑定数据吧，如果写死数据那就变不了了
//所以先定义一个src属性，来放到img里面，默认是第一张图片
src:'images/1.jpg',
list:[
"images/1.jpg",
"images/2.jpg",
"images/3.jpg"
]
}
},
methods:{
changePic(index){ //这里传参index，表示数组的下标
//触发这个函数，应该 改变src的值
this.src = this.list[index]
}
}
}).mount('#app')
</script>
这样就可以实现一个，点击按钮改变图片的效果啦。
那我们就这个案例，来思考问题，像我这样写，如果说要加一张图片，首先得在list里面加图片，然后又得加一个按钮，按钮又是非常重复的，那么怎么做才能更简洁呢，接下来这个知识点就可以帮助到。
2.3渲染列表
我们这里呢写一个英雄联盟列表，大家可以根据自己喜欢的写啊哈哈哈哈没差的。
<div id="app">
<ul>
<li>亚索</li>
<li>永恩</li>
<li>劫</li>
</ul>
</div>
这里代码可以用快捷键写 ul>li*3就可以在div里自动生成这样一个框架了。
这里呢介绍一个新的指令：v-for 有点像是我们的for循环的意思，看我使用：
<div id="app">
<ul>
<!-- 只留一个<li>在里面用v-for，item就表示list中的每一个元素 -->
<li v-for="item in list">
{{item}}
</li>
</ul>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data(){
return {
list:["亚索","永恩","劫"] //记得双引号哝，是字符串才能展示
}
}
}).mount('#app')
</script>
我们加上一个按钮，通过点击按钮来往 list 中加元素。
<div id="app">
<!-- 加一个按钮，触发事件 -->
<button @click="add">添加</button>
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data(){
return {
list:["亚索","永恩","劫"]
}
},
methods:{
add(){
this.list.push("卡特琳娜")//点击按钮，往list中push
}
}
}).mount('#app')
</script>
这样呢，就实现了点击按钮之后 列表中添加元素。
这个时候我们发现，操作列表的时候根本不用去管dom，我们只需要去操作列表list，就能够自动实现数据在列表的渲染，这就是vue的作用了。那么我们回到刚刚2.2的图片切换的例子。
原本我们是这样写：
<div id="app">
<img :src="src" width="700" height="400" />
<button @click="changePic(0)">1</button>
<button @click="changePic(1)">2</button>
<button @click="changePic(2)">3</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data(){
return {
src:'images/1.jpg',
list:[
"images/1.jpg",
"images/2.jpg",
"images/3.jpg"
]
}
},
methods:{
changePic(index){
this.src = this.list[index]
}
}
}).mount('#app')
</script>
那通过上面的学习之后，我们进行修改：
一个一个来，首先是button的展示
<button v-for='item,index in list'>{index + 1}</button>
<!-- index呢，是数组的下标，从0开始，所以我们展示的部分用 index+1 就是从1开始了 -->
接着，原来button里面有什么呢，有@click点击事件对吧，但现在我们可以得到item了，item直接就是图片的地址，所以不需要再 list[index] 了：
changePic(src){
this.src = src
}
接着往button里面加点击事件：
<!-- 这里我们传参是item，也就是图片地址了 -->
<button
v-for='item,index in list'
@click="changePic(item)"
>{index + 1}</button>
把整个代码展示一下：
<div id="app">
<img :src="src" width="700" height="400" />
<button
v-for='item,index in list'
@click="changePic(item)"
>{index + 1}</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data(){
return {
src:'images/1.jpg',
list:[
"images/1.jpg",
"images/2.jpg",
"images/3.jpg"
]
}
},
methods:{
changePic(src){
this.src = src
}
}
}).mount('#app')
</script>
这样子，再往list里面加图片的话，就不需要去碰button了自动会多加按钮，嘿嘿。
