Vue3整站开发前置知识

最新推荐文章于 2024-09-10 12:10:42 发布
weixin_59806289
最新推荐文章于 2024-09-10 12:10:42 发布
阅读量348
点赞数 5
文章标签： vue 前端
本文链接：https://blog.csdn.net/weixin_59806289/article/details/140431535
版权
## Vue3整站开发前置知识

Vue3的学习门槛：html、css、javascript、ES6基础。

#### 一、安装vscode

官网下载：https://code.visualstudio.com/Download

##### 1、安装插件

Chinese (Simplified) Language 中文简体

Vetur 为Vue.js文件提供了语法高亮，让代码更易于阅读和理解，还能识别Vue.js的特定语法，如Vue组件、指令和插值表达式，不同代码有颜色的差异。

Prettier   是javascript代码格式化插件

Open in browser  web的服务器 

Live Server 模拟tomcat服务器

##### 2、创建工作区

前端代码都写在工作区里面

第一步：在本地硬盘中创建一个空文件夹work

第二步：使用vscode打开创建的空文件夹

第三步：把文件夹保存成工作区

#### 二、ES6基础知识

##### 1、ECMAScript与JavaScript的关系

ECMAScript 不是一种编程语言，仅仅是一种脚本语言规范，由欧洲计算机协会制定和发布，任何基于此规范实现的脚本语言都要遵守它的约定。

JavaScript 是一种基于 ECMAScript 规范的脚本语言，并在此基础上进行了自己的封装。

ECMAScript 6.0 简称为ES6，是JavaScript语言的下一代标准，已经在2015年正式发布了。它的目标是，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。



~~~
一、pc端浏览器对ES的支持情况
1.chrome：51版起，可支持97%的ES6新特性
2.firefox：53版起，可支持97%的ES6新特性
3.safari：10版起，可支持99%的ES6新特性
4.ie：Edge 15可支持96%的ES6新特性。Edge14可支持93%。（IE7~11基本不支持ES6）

二、移动端浏览器对ES的支持情况
1.ios：10.0版起，可支持99%的ES6新特性
2.android：基本不支持ES6新特性（5.1仅支持25%）
~~~

如果遇到浏览器不支持的情况，可以使用babel转码器可以把ES6的代码转为ES5的代码



##### 2、let声明变量

shift+alt+f 是格式化快捷键

~~~javascript
{
    var num=10; //全局变量
    let num1=10;//局部变量  定义更严格
}
console.log(num)
console.log(num1)
//区别：{}代表代码块，let定义的变量有作用范围,let只能被定义一次。var可以申明多次
//var：声明的变量没有作用域   
//let：声明的变量有作用域
~~~



~~~json
//传统变量赋值
let a=1,b=2,c=3
console.log(a,b,c)
~~~

创建一个html页面，引入js代码，右键 Open With Live Server以服务器的方式部署打开页面，打开控制台，查看最终效果



##### 3、const声明常量

~~~javascript
const PI=3.1415926;
PI=3;
~~~

常量值一旦定义，就不能被改变。



##### 4、解构赋值

解构是 JavaScript 中一种强大的语法特性，它允许你从数组或对象中提取值并赋值给变量，使代码更加简洁和易读。

是赋值运算符的扩展，他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了，也方便了复杂对象中数据字段获取。

~~~javascript
//1、数组解构
//ES6
let [x,y,z]=[1,2,3]
console.log(x,y,z)
~~~



~~~javascript
//2、对象解构
let user={name:"wsk",age:20}
//传统
let name1=user.name
let age1=user.age
//ES6
let {name,age}=user  //注意结构的变量必须是对象中的属性
console.log(name,age)
~~~







##### 5、模板字符串

模板字符串相当于加强版的字符串，用反引号`，除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

~~~javascript
//1、行字符串
let str1=`hell,
es6`
console.log(str1) //可以实现换行
~~~



~~~javascript
//2、字符串插入变量和表达式，变量名写在${}中，${}中可以放入JavaScript表达式
let name='zhangsan'
let age=21
let info=`我的名字叫${name}，年龄${age}`
console.log(info)
~~~



~~~javascript
//3、字符串中调用函数
function h(){
    return "es6"
}
let str='hello,${h()}'
console.log(str)
~~~

##### 6、声明对象简写

~~~javascript
const name="wsk"
const age=21

//传统
const person1={name:name,age:age}
console.log(person1)
//ES6
const person2={age,name}
console.log(person2)
~~~

##### 7、定义方法的简写方式

~~~javascript
//传统方式方法定义
const person1={
    sayHi:function(){
        console.log("hi")
    },
    //可以定义多个方法
}

//传统方式调用
person1.sayHi();

//ES6定义
const person2={
    sayHi(){
        console.log("hi")
    },
    //可以定义多个方法
}
//调用
person2.sayHi();
~~~



##### 8、对象扩展运算符

拓展运算符（...）用于取出参数对象所有可遍历属性，然后拷贝到当前对象

前后台传参的时候，经常会用到

~~~javascript
//拷贝对象
let person1={name:"wangshuke",age:21}
let person2={...person1}
console.log(person2)
~~~



~~~javascript
//合并计算
let age={age:15}
let name={name:"wangshuke"}
let person2={...age,...name}
console.log(person2)
~~~

##### 9、箭头函数

箭头函数提供了一种更加简洁的函数书写方式，基本语法是：

参数 => 函数体

~~~javascript
//传统
var f1=function(a){
    return a
}
console.log(f1(100))

//ES6
var f2 = a =>a
console.log(f2(200))
~~~

当箭头函数没有参数或存在多个参数时，要用（）括起来

当箭头函数函数体有多行语句，用{ }包裹起来，表示代码块

当只有一行语句，并且需要返回结果时，可以省略 {  }，结果会自动返回

只有一个参数的时候，可以省略小括号，如果有多个参数，则不可以省略，如果没有参数，也不可以省略

~~~javascript
//多个参数的情况
var f3 = (a,b) =>{
    let result= a+b
    return result
}
console.log(f3(5,4))

//这种写法可以进一步简化
var f4= (a,b)=>a+b

//没有参数的情况
var f5=()=>1+2
console.log(f5())
~~~

箭头函数多用于匿名函数的定义



##### 10、js导入导出

创建showMessage.js，加入export关键字并导出

~~~javascript
//1、第一种导出
export function complexMessage(msg){
    console.log(msg)
}
export function printMessage(msg){
    console.log(msg)
}
//2、第二种导出方式   可实现批量导出，可以使用 as 进行重命名
export {complexMessage as cm,printMessage as pm}
//3、第三种导出方式，默认导出
export default {complexMessage, printMessage}
~~~



第1种导入：

~~~html
<!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>

</body>
<!--模块化开发-->
<script type="module">
    //导入
    import { complexMessage, printMessage } from './js/showMessage.js'
    complexMessage("very good!")
    printMessage("ok")
</script>

</html>
~~~



第2种导入：

~~~html
<!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>

</body>
<!--模块化开发-->
<script type="module">
    //导入
    import { cm, pm } from './js/showMessage.js'
    cm("very good!xxxx")
    pm("ok,yyyyy")
</script>

</html>
~~~



第3种导入：

~~~html
<!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>

</body>
<!--模块化开发-->
<script type="module">
    //导入
    import p1 from './js/showMessage.js'
    p1.complexMessage("yes")
    p1.printMessage("no")
</script>

</html>
~~~





#### 三、局部使用Vue

> 打开官网：https://cn.vuejs.org/guide/quick-start.html，快速上手

##### 1、插值表达式

准备工作

- 准备html页面，并引入Vue模块（官方提供）

- 创建Vue程序的应用实例

- 准备元素(div)，被Vue控制

构建用户界面：1、准备数据 2、通过插值表达式渲染页面



CDN形式：

~~~html
<!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">
        {{message}}
    </div>
</body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const { createApp, ref } = Vue

    //通过createApp构建了数据模型
    //ref：响应式数据函数
    createApp({
        setup(){
            const message=ref("你好,vue3") 
            return{
                message
            }
        }
    }).mount("#app")
</script>
</html>
~~~

ES 模块化：

~~~html
<!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">
        {{message}}
    </div>
</body>

<script type="module">
  
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    //通过createApp构建了数据模型
    //ref：响应式数据函数
    createApp({
        setup(){
            const message=ref("你好,vue3。。。。") 
            return{
                message
            }
        }
    }).mount("#app")
</script>
</html>
~~~

##### 2、 v-for

作用：列表渲染，遍历容器的元素或对象的属性

> newsList所使用的数据必须在data中进行定义

v-for="item in newsList"，可以循环操作一些数组，集合。

~~~html
<!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">
        <table border="1" cellspacing="0" cellpadding="0" width="700">
            <tr>
                <th>标题</th>
                <th>分类</th>
                <th>发布时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(news, index) in newsList" :key="news.id">
                <td>{{ news.title }}</td>
                <td>{{ news.category }}</td>
                <td>{{ news.time }}</td>
                <td>{{ news.state }}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
</body>
<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    createApp({
        setup(){
            return {
                newsList:[
                    {
                        title:"aaaaa",
                        category:"军事",
                        time:"2024-5-5 23:58:32",
                        state:"草稿"
                    },
                    {
                        title:"bbbbbb",
                        category:"体育",
                        time:"2024-5-5 23:58:32",
                        state:"草稿"
                    }
                ]
            }
        }
    }).mount("#app");
</script>
</html>
~~~

##### 3、 v-bind

v-bind一般作用于html的标签属性前，v-bind后面是冒号。

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等

~~~html
<!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">
        <a :href="url">百度</a>
    </div>
</body>
<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    createApp({
        setup() {
            return {
                url: 'https://www.baidu.com'
            }
        }
    }).mount("#app")
</script>

</html>
~~~

 v-bind 简写 " : "

##### 4、v-if

~~~html
<!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 v-if="isLogin">
              登录
          </div>
          <div v-else>
              注册
          </div>
    </div>
</body>
<script type="module">
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        setup(){
            return{
                isLogin:true
            }
        }
    }).mount("#app")
</script>
</html>
~~~



##### 5、v-show

~~~html
<!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 v-show="isLogin">
              登录
          </div>
          
    </div>
</body>
<script type="module">
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        setup(){
            return{
                isLogin:false
            }
        }
    }).mount("#app")
</script>
</html>
~~~



##### 6、v-model

~~~html
<!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">
          <form>
              账号:<input type="text" v-model="user.username"><br/>
              密码:<input type="text" v-model="user.password"><br/>
          </form>
         {{user.username}}
          
    </div>
</body>
<script type="module">
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        setup(){
            let user=ref({
                   username:'',
                   password:''
            })
            return{
               user
            }
        }
    }).mount("#app")
</script>
</html>
~~~



##### 7、v-on

vue中的事件，简写：v-on:click 可以简写为@click

~~~html
<!--单击事件-->
<button v-on:click="show">点击</button>  
<!--鼠标滑过-->
<button v-on:mouseover="show()">点击</button>
~~~

~~~html
<!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">
    
         <button @click="btn">点击:{{count}}</button>
          
    </div>
</body>
<script type="module">
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        setup(){
            var count=ref(0)
            return{
                count
            }
        },
        methods:{
            btn(){
                this.count++
            }
        }
    }).mount("#app")
</script>
</html>
~~~

##### 8、生命周期函数

setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method

onBeforeMount() : 组件挂载到节点上之前执行的函数。

onMounted() : 组件挂载完成后执行的函数。

onBeforeUpdate(): 组件更新之前执行的函数。

onUpdated(): 组件更新完成之后执行的函数。

onBeforeUnmount(): 组件卸载之前执行的函数。

onUnmounted(): 组件卸载完成后执行的函数

onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。

onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。

onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

![a2](vue2/a2.png)

~~~
Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured
~~~

应用：选项式API，组合式API

~~~html
<!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>
</body>
<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    createApp({
        setup() {
            return {
              
            }
        },
        mounted() {
            alert("Vue挂载完毕，发送请求获取数据")
        }
    }).mount("#app")
</script>

</html>
~~~



#### 四、使用Axios进行异步通信 

Axios 是对原生的Ajax进行了封装，简化书写，快速开发

官网：https://www.axios-http.cn/docs/intro

await：同步等待异步返回结果，与async同时出现，一个方法中如果出现await，方法体上必须标识为async 异步方法。

使用步骤：

- 引入Axios的js文件 （参考官网）
- 使用Axios发送请求，并获取相应结果

查询案例

使用 unpkg CDN方式引入axios文件

~~~html
<!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">
        <table border="1" cellspacing="0" cellpadding="0" width="700">
            <tr>
                <th>标题</th>
                <th>分类</th>
                <th>发布时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(news, index) in newsList" :key="news.id">
                <td>{{ news.title }}</td>
                <td>{{ news.category }}</td>
                <td>{{ news.time }}</td>
                <td>{{ news.state }}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">
    
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    createApp({
        data() {
            return {
                newsList:[]
            }
        },
        mounted() {
            axios
				.get('./stuList.json')
				.then(response=>{
				      this.newsList=response.data;
				})
				.catch(function(err){
					console.log(err)
				})	
        },
    }).mount("#app")
</script>

</html>
~~~

stuList.json数据

~~~json
[
    {
        "title":"aaaaa",
        "category":"军事",
        "time":"2024-5-5 23:58:32",
        "state":"草稿"
    },
    {
        "title":"bbbbb",
        "category":"军事",
        "time":"2024-5-5 23:58:32",
        "state":"草稿"
    },
    {
        "title":"ccccccc",
        "category":"军事",
        "time":"2024-5-5 23:58:32",
        "state":"草稿"
    }
]
~~~