【Vue3.0 Beta】尝鲜
2020/4/19 8:58:42
本文主要是介绍【Vue3.0 Beta】尝鲜,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
官方资料包:GitHub地址 | Vue3.0文档 | vue-cli插件文档(用于试用Vue 3 alpha)
以下是一则充满焦虑的新闻
1、准备工作
Vue-cli版本:4.2.2
cli版本只要在3.x
以上即可。
2、创建项目
运行以下命令来创建一个新项目:
vue create projectName
projectName 是项目名,自行命名。
项目只用了Babel
创建出来是一个2.x版
本的项目。
要使用测试版的话,还需要在项目里装一个插件,使用以下命令:
vue add vue-next
升级完,vue的版本就变成^3.0.0-beta.1
。
运行 npm run serve
就能把项目跑起来了。
3、新语法
3.1 小变化
先看看3.0
的一些小变化~
- 在
main.js
的挂载方式不同了。 - 生命周期函数发生了一些变化(在3.2.3粗略提了一下)
3.2 尝鲜
3.2.1 目录结构
3.2.2 初始化组件
App.vue
在 App.vue
里只引入里 HelloWorld
组件。
我把 HelloWorld.vue
组件的内容清空掉,然后在script
里添加里下面这句代码。
个人觉得,从这一步开始往下的操作,和React开始有点像了。
import { reactive, computed } from "vue";
3.2.3 启动函数
组件的启动函数需要用到 setup()
,这个函数相当于2.x版
的beforeCreate()
和created()
这两个生命周期钩子函数。
以下是官方文档的介绍
在2.x版
的beforeCreate()
和created()
,个人觉得这两个生命周期的时间节点比较接近,而且很多项目用beforeCreate()
的概率比较低。所以有可能会把这两个函数合成一个使用~
从文档可以看出 3.0版
中 setup()
的重要性。要想使用变量绑定元素上的内容等操作,都要使用 setup()
这个钩子。
setup()
函数需要在最后把HTML模板
里用到的数据和方法返回在3.2.4会看到(也就是下一节)。
##### 3.2.4 state ``state``可以理解为在``2.x版``中的``data``。在使用``state``时,需要用到[3.2.2](#init)中引入的``reactive``。 ![](https://www.showdoc.cc/server/api/common/visitfile/sign/822cdcced17cbecbf3ff391a9690a53e?showdoc=.jpg)
3.2.5 添加事件
添加一个点击事件,每点击一下,狗林哥的年龄就加1。
效果图
不管狗林哥多大,都完全没有报错。
3.2.6 使用axios
场景描述:通过axios请求一段数据下来,并渲染在表格里。
根据这个需求,就需要使用另一个生命周期函数。这里使用里onMounted
首先使用以下代码在项目中安装 axios
。
npm install axios
在组件中引入axios
。
import axios from 'axios';
在组件中引入所需的钩子函数,这里使用了onMounted
import { reactive, computed, onMounted } from "vue";
最终效果
4、贴代码
App.vue
代码
<template> <div id="app"> <HelloWorld /> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> <style> </style>
HelloWorld.vue
代码
<template> <div class="hello"> <div>姓名:{{state.name}}</div> <div>年龄:{{state.age}}岁</div> <div>描述:{{state.secret}}</div> <button @click="growUp">年龄+1</button> <table border="1" cellpadding="0" cellspacing="0"> <tr> <th>用户名</th> <th>邮箱</th> <th>电话</th> </tr> <tr v-for="(user, index) in state.users" :key="index" > <td>{{user.name}}</td> <td>{{user.email}}</td> <td>{{user.phone}}</td> </tr> </table> </div> </template> <script> import { reactive, computed, onMounted } from "vue"; import axios from 'axios'; export default { setup() { const state = reactive({ name: "狗林哥", age: 45, secret: '头上其实是假发', users: [] }); function growUp() { state.age++; } function fetchUserInfo() { axios.get("http://jsonplaceholder.typicode.com/users") .then(res => { console.log(res); state.users = res.data; }) .catch(err => { console.log(err); }) } // 生命周期钩子函数 onMounted(() => { fetchUserInfo(); }); return { state, growUp } } } </script> <style scoped> </style>
这篇关于【Vue3.0 Beta】尝鲜的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南