您现在的位置是:自如初>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与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)

文章评论

登录 注册

自如初--时间轴

站名:自如初

独白:向前走!向前走!

邮箱:457969743@qq.com

站点信息