Vue3开发教程（三、原生Vue程序）

最新推荐文章于 2024-08-04 00:03:48 发布

堕落小猪_zzy

最新推荐文章于 2024-08-04 00:03:48 发布

阅读量1.6k

点赞数 1

分类专栏： # Vue3开发教程文章标签： vue.js javascript 前端 html

本文链接：https://blog.csdn.net/weixin_39873136/article/details/123520450

版权

Vue3开发教程专栏收录该内容

5 篇文章 24 订阅

订阅专栏

三、原生Vue程序

提示：上一节我们使用vite体验了一下Vue的开发，这一节我们主要使用原生js的方式来学习vue。通过这两种方式的学习可以更好的理解vue的使用。

编写html文件

在dist中新建vue3-demo.html文件

提示：以下为内容，请读者对比上一节中的内容来理解。

<html>
<head>
    <title>原生vue3演示</title>
    
    <!-- 
        通过script标签加载vue的js文件
        相当于man.js 中的import { createApp } from 'vue'
    -->
    <script src="https://unpkg.com/vue@next"></script>
    
    <style>
        #app {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
            margin-top: 60px;
        }
    </style>
</head>
<!-- 对比上一节中的index.html -->
<div id="app">
    <HelloWorld msg="Hello Vue 3 + Vite" />
</div>
<script>
    //对比上一节里的HelloWorld.vue
    var HelloWorld_vue = {
        props: {
            msg: String
        },
        data() {
            return {
                count: 0
            }
        },
        template: `
                <h1>{{ msg }}</h1>
                <button type="button" @click="count++">count is: {{ count }}</button>
        `
    };

    //对比上一节里的App.vue
    var App_vue = {
        template: `
            <HelloWorld msg="Hello Vue 3 + Vite" />
        `
    }

    //对比上一节中的main.js
    //创建一个Vue 应用
    var createApp = Vue.createApp(App_vue)
    //注册HelloWorld组件
    createApp.component('HelloWorld', HelloWorld_vue)
    //挂载App到div#id
    var vm = createApp.mount('#app')
</script>

</html>