vue3 知识

vue3介绍

Vue3的变化:
    1、vue3完全兼容vue2,但是vue3不建议用vue2的写法
    2、拥抱TypeScript,ts完全兼容js
    3、组合式API和配置项API
                vue2 是配置项api
                vue3 组合式api

vue3项目创建和启动

# 创建vue3项目:
            vue-cli   官方不太建议用了
            vite      目前官方推荐:新一代前端构建工具

# vue-cli创建:
        命令行中:vue create vue3_demo001
        其他跟之前一样,只是选vue版本选3版本

# vue3的项目简单解释:

// main.js
import { createApp } from 'vue'  // 通过 createApp创建vue实例
import App from './App.vue'  // 根组件
import router from './router' // vue-router
import store from './store' // vuexvar vue = createApp(App) // 创建vue实例
vue.use(store)// 使用vuex
vue.use(router)// 使用vue-router
vue.mount('#app')// 挂在index.html中得div

# 其他写起来跟之前写vue2完全一致,vue3是兼容的

# vite创建vue3(速度快)
    不管是创建项目还是运行项目速度都很快,因为它按需编译,不再等待整个应用编译完成

cnpm create vite vue3_demo002  //创建项目cnpm install  // 打开项目,安装依赖npm run dev   // 运行项目

# 使用vite和vue3创建项目的文件简单解释:

// main.js    
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app') # 没有使用第三方插件
// HelloWorld.vue   组合式api写法,跟之前不一样了
<script setup>
import { ref } from 'vue'
defineProps({msg: String,
})
const count = ref(0)
</script>
<template><h1>{{ msg }}</h1><div class="card"><button type="button" @click="count++">count is {{ count }}</button></div>
</template>

# 实现:创建vue2一样,自由选择一些插件, 在vue3上,建议使用 pinia 做状态管理

# 常用的第三方插件,自己选即可:

                        npm create vue@latest    

setup函数

# vue3_demo001 :vue-cli创建的---写法跟之前vue2一样
   vue3_demo002 :vite创建,但是没有状态管理器和路由
   vue3_demo003:vite创建,有状态管理器和路由

# setup 函数,只有vue3中有:
            setup为Vue3.0中一个新的配置项,值为一个函数
            setup是所有Composition API(组合API)编写的位置
            组件中所用到的:数据、方法等等,均要配置在setup中
    setup函数的返回值:返回一个对象,对象中的属性、方法, 在模板中均可以直接使用
# 注意
    1、尽量不要与Vue2.x配置混用
    2、Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法
    3、但在setup中不能访问到Vue2.x配置(data、methos、computed...)。
    4、如果有重名, setup优先

<template><div class="home"><h1>setup函数的使用</h1>{{ name }}--{{ age }}<button @click="add">点我年龄+1</button></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'HomeView',setup() {let age = 19let add = () => {// 默认不是响应式的age++}return {name, age, add}},
}
</script>

vue3之ref

# 1、ref 用来做 基础变量 [数字,字符串,布尔] 的响应式
         reactive 用来做对象 [数组,字典] 的响应式

<script>
import { ref,reactive } from "vue";
export default {name: 'HomeView',setup(){let name = ref('zjq')let age = ref('21')let add = () => {age.value++console.log(age.value)}let handleChange = (newname) => {name.value = newname}return {name,age,add,handleChange}}}
</script>

# 2、在子组件中暴露

<script setup>import {ref, reactive,} from "vue";const helloworld = ref()   // 变量名必须跟 在组件上定义的名字一致function handleClick() {console.log(helloworld.value) // helloworld.value拿到组件对象// 使用组件对象的属性和方法,需要子组件暴露---》只能用子组件暴露的helloworld.value.add()console.log(helloworld.value.person.name)}
</script><template><HelloWorld ref="helloworld"></HelloWorld><button @click="handleClick">点我看控制台</button>  
</template>

vue3之toRefs

响应式

        toRefs 可以把对象内部的所有值,都做成响应式
        改这些变量会影响到原来对象中得值

const person = reactive({name: 'lqz', age: 19})
let {name, age:nl} = toRefs(person)  // 等同于: name=ref(lqz)   age=ref(19)
// let {name, age} = person  // 等同于: name=lqz   age=19
function add() {nl.value++console.log(nl.value)
}

# 结构赋值

let person = {name: 'lqz', age: 19}
let {name, age} = person //  普通解构赋值,name=person.name   age=person.age
let {name:a, age} = person // 重命名解构赋值:a=person.name   age=person.age
console.log(a)
console.log(age)

# 对象解压

<script>
import {toRefs, reactive,} from 'vue'
export default {name: 'HomeView',setup() {let data = reactive({name: 'lqz',age: 19,hobby: '篮球'})let xx = {...toRefs(data)}  // {name:lqz,age:19,bobby:篮球}// 可以把对象解压return {...toRefs(data), count}   // {name:lqz,age:19,bobby:篮球,count:0}},}
</script>

toRef的使用:

const person = reactive({name: 'lqz', age: 19})
// const name=toRefs(person)  //{name:ref(name),age:ref(age)}
const name = toRef(person, 'name')  //name=ref(person.name)
function change() {name.value = 'xxx'
}

vue3之reactive

<template><div class="home"><h1>setup函数的使用</h1><p>用户名:{{ userInfo.name }}</p><p>年龄:{{ userInfo.age }}</p><p>爱好:{{ userInfo.hobby }}</p><button @click="handleAdd">点我年龄+1</button></div>
</template><script>
import {ref, reactive} from 'vue'export default {name: 'HomeView',setup() {let userInfo = reactive({name: 'lqz',age: 19,hobby: '篮球'})let handleAdd = () => {userInfo.age++console.log(userInfo)}return {userInfo, handleAdd}},
}
</script>

# ref和reactive总结:

 ref函数:
    作用: 定义一个响应式的数据
    语法: let xxx = ref(initValue)
    创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。
    JS中操作数据: xxx.value
    模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div>
reactive函数:
    作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)
    语法:let 代理对象= reactive(接收一个对象,返回一个代理对象
    reactive定义的响应式数据是“深层次的”,对象无论多少层,都可以

vue3之axio

# 安装:

cnpm install axios

# 在 setup 中直接发送请求

import axios from 'axios'
const filmList = reactive({result:[]})
axios.get('http://127.0.0.1:8000/film/').then(res => {console.log(res.data)filmList.result = res.data.results
})

# async await 的使用

const filmList = reactive({result: []})
async function load() {// await必须写在被async修饰的函数中,也可以写在setup函数中let response = await axios.get('http://127.0.0.1:8000/film/')filmList.result = response.data.results
}
load()

# axios 的拦截器
    请求发出之前的拦截器
    请求响应回来的拦截器
        判断状态码是不是100,如果是100,继续走,不是100,直接弹错误

计算属性computed

  let person=reactive({name:lqz,age:19})# 1 只取值person.hobby=computed(()=>{return person.name+person.age})# 2 取值和赋值person.hobby=computed({get(){return 'xxxx'},set(newValue){}})

<template><div class="home"><h1>计算属性:computed</h1><p>姓:<input type="text" v-model="person.firstName"></p><p>名:<input type="text" v-model="person.lastName"></p><p>全名:{{ person.fullName }}</p><p>全名修改:<input type="text" v-model="person.fullName"></p></div>
</template><script>
import {ref, reactive, computed} from 'vue'
export default {name: 'HomeView',setup() {let person = reactive({firstName: '',lastName: ''})// 计算属性---》修改值person.fullName = computed({get() {return person.firstName +person.lastName},set(newValue) {console.log(newValue)person.firstName=newValue.substring(0,1)person.lastName=newValue.slice(1)}})return {person}},
}
</script>

监听属性watch

<template><div class="home"><h1>监听属性:watch</h1>{{ age }} ====<button @click="handleClick">点我+1</button><hr><p>用户名:{{ userInfo.name }}</p><button @click="handleChange">点我变长名字</button></div>
</template><script>
import {ref, reactive, watch, computed} from 'vue'export default {name: 'HomeView',setup() {let age = ref(0)let handleClick = () => {age.value++}// 1 监听基本类型watch(age, (newValue, oldValue) => {console.log(oldValue)console.log(newValue)})// 2 监听对象let userInfo = reactive({name: 'zjq',age: 19})let handleChange = () => {userInfo.name = '谢谢谢谢谢寻寻寻寻'}watch(() => userInfo.name, (newValue, oldValue) => {console.log('名字变了:' + userInfo.name)})// 3 同时监听多个变量变化watch([age,], (newValue, oldValue) => {console.log('age或msg变化了', newValue, oldValue)})return {age, handleClick, userInfo, handleChange}},
}
</script>

生命周期

vue2 : 8个生命周期钩子
      beforeCreate:组件创建之前实现这个:组件html,js--》html和js都是空的
      created:组件创建完成后:js就有值了,html还是空的  (向后端发送ajax请求)
      beforeMount:挂载模板之前,js有值,模板(html) 还是空的(向后端发送ajax请求)
      mounted:挂载完成:js有值,模板有值
      beforeUpdate:只要页面发送变化或js变量发生变化,就会触发它的执行
      updated:刷新之后执行
      beforeDestroy:被销毁之前执行  (资源清理性工作)
      destroyed:被销毁之后执行
vue3 中变成:
    beforeDestroy改名为 beforeUnmount
    destroyed改名为 unmounted
 Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下:
        beforeCreate===>setup()
        created=======>setup()
        beforeMount ===>onBeforeMount
        mounted=======>onMounted
        beforeUpdate===>onBeforeUpdate
        updated =======>onUpdated
        beforeDestroy==>onBeforeUnmount
        destroyed=====>onUnmounted

<template><div class="home"><h1>生命周期</h1>{{ name }}<br><button @click="handleClick">点我变名字</button></div>
</template><script>
import {ref,reactive,watch,computed,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
import axios from 'axios'export default {name: 'HomeView',setup() {//1 这里写的代码,就是 beforeCreate,没有数据[变量没定义],没挂载console.log('beforeCreate')// 2 这里写代码,就是created,有数据,变量定义了,没挂载let name = ref('lqz')axios.get('http://127.0.0.1:8000/film/').then(res => {name.value = res.data.msg})// 3 onMountedonMounted(() => {console.log('挂载完了')})// 4 onUpdatedonUpdated(() => {console.log('页面更新')})// 5 onUnmountedonUnmounted(() => {console.log('组件销毁')})let handleClick = () => {name.value = 'afdasdfasdfasdf'}return {name, handleClick}},}
</script>

setup写法

# 以后都使用组合式api
# 典型写法:
        <script setup lang="js" name="组件名字">
        </script>

不需要return,它会自动return
如果注册局部组件,只需要导入组件即可,在template中就可以使用了
# 以后只需要在 setup 内,写变量,写函数即可

    const age=ref(0)function add(){age.value++}

# vue-router的使用
路由跳转:

    import {useRouter, useRoute} from 'vue-router'const router = useRouter() // 就是以前的this.$routerconst route = useRoute()  // 就是以前的this.$route

路由注册---跟之前一模一样
路由的api---跟之前一样:
            router.push({name:'home'})

路由嵌套,跟之前一样

路由守卫跟之前一样:
                router.beforeEach()

<template><h1>我是首页</h1><div>{{ name }}</div><button @click="handleChange">点我变名字</button><button @click="load">点我加载</button><div v-for="film in filmList"><p>{{ film.name }}</p></div><HelloWorld msg="lqz is handsome"></HelloWorld><RouterLink to="/about"><button>点我跳转到about</button></RouterLink><button @click="handleGo">点我跳转到about</button>{{ store.count }}<button @click="handleAdd">点击+1</button>
</template><script setup lang="js">
//1  以后这里面写的,就相当于 写在setup函数中,现在不需要返回,在template都能用到
import {ref,reactive} from 'vue'
let name = ref('lqz')
let handleChange = () => {name.value = 'sadfasdfafs'console.log(name)
}// 2  加载电影数据
import {ref, reactive} from 'vue'
import axios from 'axios'let filmList = reactive([])
//发送ajax
let load = () => {axios.get('http://127.0.0.1:8000/film/').then(res => {filmList = res.data.resultsconsole.log(filmList)})
}// 3 注册组件
import HelloWorld from '@/components/HelloWorld.vue'// 4 路由跳转  setup中没有this了---》想用谁,就是导入谁
this.$router.push()  // 用不了了
import {useRouter, useRoute} from 'vue-router'
const router = useRouter()
const route = useRoute()let handleGo = () => {router.push('/about?name=lqz')
}
</script>

pinia和elementui-plus

# 之前用vuex,vue3上还可以用,但是使用 pinia 更好

import {useCounterStore} from '@/stores/counter'
const store = useCounterStore()
console.log(store.count)

# elementui-plus

npm install element-plus --save
// main.js中:
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

登录练习

使用setup写法
elmentui 登录 显示电影
没登录不允许访问首页--->重定向到登录

今日思维导图: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/412445.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flink的KeyedProcessFunction基于Event Time和Process Time的定时器用法实例分析

FLink处理函数简介 在Flink底层&#xff0c;我们可以不定义任何具体的算子&#xff08;比如 map&#xff0c;filter&#xff0c;或者 window&#xff09;&#xff0c;而只是提炼出一个统一的【处理】&#xff08;process&#xff09;操作——它是所有转换算子的一个概括性的表…

docker:Java通过nginx获取客户端的真实ip地址

问题现象 我们的平台使用Spring Cloud微服务架构&#xff0c;使用Spring Boot构建Java服务&#xff0c;使用google的jib插件打成docker镜像包我们使用docker虚拟化部署&#xff0c;使用docker-compose统一管理所有服务&#xff0c;包括Java服务和nginx等组件我们前后端分离&am…

ONLYOFFICE:开源、免费、安全,打造定制化办公平台的最佳选择

文章目录 写在前面ONLYOFFICE是什么&#xff1f;ONLYOFFICE的惊艳之处齐全的插件&#xff0c;助你锦上添花部署一款自己的安全可靠的办公平台写在最后 写在前面 说起 Office 办公软件&#xff0c;我想大家最常用的应该就是微软的 Microsoft Office 以及国产的 WPS Office。两款…

关于微信小程序 “扫普通链接二维码打开小程序”动态传递多个参数开发过程记录与总结

前言&#xff1a;项目中需要线下 扫描二维码 进入到小程序指定的页面&#xff0c;二维码中 要动态传递多个参数&#xff0c;接下来看看具体怎么实现&#xff0c;整个过程还比较顺利&#xff0c;特把整个过程中遇到的坑点做以总结。 快速跳转官网文档介绍&#xff1a;扫码打开小…

基于深度学习的实例分割的Web应用

基于深度学习的实例分割的Web应用 1. 项目简介1.1 模型部署1.2 Web应用 2. Web前端开发3. Web后端开发4. 总结 1. 项目简介 这是一个基于深度学习的实例分割Web应用的项目介绍。该项目使用PaddlePaddle框架&#xff0c;并以PaddleSeg训练的图像分割模型为例。 1.1 模型部署 …

shopee选品案例分析:如何在Shopee平台上进行选品并取得成功

在Shopee平台上进行选品是卖家们开设店铺的重要步骤之一。通过分析成功案例&#xff0c;卖家们可以获取灵感和策略&#xff0c;从而更好地进行选品。本文将以一个女装店铺为例&#xff0c;介绍如何在Shopee平台上进行选品并取得成功。 先给大家推荐一款shopee知虾数据运营工具…

Oracle21C + PLSQL Developer 15 + Oracle客户端21安装配置完整图文版

一、Oracle21C PLSQL Developer 15 Oracle客户端文件下载 1、Oracl21C下载地址&#xff1a;Database Software Downloads | Oracle 中国 2、 PLSQL Developer 15下载地址&#xff1a;Registered download PL/SQL Developer - Allround Automations 3、 Oracle 客户端下载地址…

使用composer生成的DMG和PKG格式软件包有何区别

在使用Composer从包源构建软件包时候&#xff0c;有两种不同类型的包&#xff1a;PKG和DMG。你知道两者之间的区别吗? 以及如何选取吗&#xff1f; 每种格式都有各自的优势具体取决于软件包的预期用途以及用于部署软件包的工具。下面我们来了解一下PKG和DMG格式的区别和用途。…

vscode连接远程服务器(傻瓜式教学)

**如何在远程服务器上进行编码呢&#xff1f;vscode&#xff01;&#xff01;&#xff01;**当然&#xff0c;还有很多其他选择&#xff0c;例如sublime、ultraedit等等&#xff0c;这里我们用非常流行的vscode来连接ubuntu服务器做讲解&#xff01;1、下载vscode 百度搜索vsc…

怎样实现安全便捷的网间数据安全交换?

数据安全交换是指在数据传输过程中采取一系列措施来保护数据的完整性、机密性和可用性。网间数据安全交换&#xff0c;则是需要进行跨网络、跨网段甚至跨组织地进行数据交互&#xff0c;对于数据的传输要求会更高。 大部分企业都是通过网闸、DMZ区、VLAN、双网云桌面等方式实现…

Oracle 实战手册 工作实战经验总结

目录 一、基本的数据库管理 1、数据库的启动和关闭 ​编辑2、如何确定Oracle的版本&#xff1f; 3、如何修改数据库的内存参数 4、修改用户名密码 5、如何查看最大会话数 6、如何修改oracle数据库的用户连接数 7、解锁用户 8、如何获取被锁定的数据库对象 9、如何确定…

如何使用Synology Drive作为文件同步服务器实现云同步Obsidian笔记

文章目录 一、简介软件特色演示&#xff1a; 二、使用免费群晖虚拟机搭建群晖Synology Drive服务&#xff0c;实现局域网同步1 安装并设置Synology Drive套件2 局域网内同步文件测试 三、内网穿透群晖Synology Drive&#xff0c;实现异地多端同步Windows 安装 Cpolar步骤&#…