您现在的位置是:自如初>Vue.jsVue.js
一、Vue3初体验
小白
2021-01-31 19:59:34
【Vue.js】
93人已围观
简介Vue3初体验。Vue3与Vue有什么区别?Vue2.x到Vue3这个过程及结果,中间发生了巨大的变化。Vue2.x可以升级到Vue3.0,很遗憾,不能升级。如同 ThinkPHP3到ThinkPHP5发生了翻天覆地的变化,无法直接升级。因此,只有重新学习。不过有Vue2.x的基础之后,学习起来还是很容易。
未来开发中选择版本必然是Vue3,但是当下该选择使用Vue2.x还是继续使用。但是作为即将投入生产环境中的Vue3,学习它刻不容缓。
今天做一个Vue的初体验。Vue3 Go。
Vue3案例
<!DOCTYPE html>
<html>
<head>
<title>Vue3初体验</title>
<meta charset="utf-8">
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
webName:{{ webName}}
</div>
<script>
Vue.createApp({
data () {
return {
webName:'自如初'
}
}
}).mount('#app')
</script>
</body>
</html>
Vue3通过createApp
函数创建一个新的应用实例;通过mount
函数挂载Vue实例接管区。
Vue2.x案例
<!DOCTYPE html>
<html>
<head>
<title>Vue2.x</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
网站名:{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: "自如初博客"
}
})
</script>
</body>
</html>
体验对比
关于Vue2.x的案例就不在多说了。
Vue3是一个全新的Vue,Vue2.x中的一些方法在Vue中已被抛弃。
从这两个案例中可以看出,Vue3与Vue2.x创建实例的方法截然不同了。习惯了Vue2.x后再来看Vue3会觉得有些陌生但又有些似曾相识。
Vue3的优点是非常明显的,从这两个案例中来看,Vue3的调用更加简洁更加美观。
Vue2.x提供18个月维护,现在开始一起来学习Vue3并使用它吧。
很赞哦!(1)
相关文章
文章评论
点击排行

- CentOS8编译安装(升级)php7.4.1及问题解决
- 全网最细且手把手一起学CentOS8.0源码编译安装LAMP环境之apache2源码安装(一)
- ThinkPHP6使用Base公共控制器redirect()不起作用的解决方法
- 全网最细且手把手一起学CentOS8.0源码编译安装LNMP环境之nginx源码安装(一)
- WSL安装Linux报错WslRegisterDistribution failed with error: 0x80370102
- 快速上手Laravel6 Eloquent ORM 增删改查
- 超级详细的CentOS8安装composer
- ThinkPHP6上传图片至七牛云