Vue 3.0 实例分享

刚开始学习 Vue,我们不推荐使用 vue-cli 命令行工具来创建项目,更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。
 
Vue3 中的应用是通过使用 createApp 函数来创建的,语法格式如下:
 
const app = Vue.createApp({ /* 选项 */ })
传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时,该组件被用作渲染的起点。
 
一个简单的实例:
 
Vue.createApp(HelloVueApp).mount(‘#hello-vue’)
createApp 的参数是根组件(HelloVueApp),在挂载应用时,该组件是渲染的起点。
 
一个应用需要被挂载到一个 DOM 元素中,以上代码使用 mount(‘#hello-vue’) 将 Vue 应用 HelloVueApp 挂载到 <div id=”hello-vue”></div> 中。
 
接下来我们从 Hello Vue!! 的代码开始学起。
 
Vue 3.0 实例
<div id=”hello-vue” class=”demo”>
  {{ message }}
</div>
 
<script>
const HelloVueApp = {
  data() {
    return {
      message: ‘Hello Vue!!’
    }
  }
}
?
Vue.createApp(HelloVueApp).mount(‘#hello-vue’)
</script>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64797.shtml

张贴在3