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