Vue3 起步简单示例

最新推荐文章于 2025-05-13 19:40:35 发布

thankseveryday

最新推荐文章于 2025-05-13 19:40:35 发布

阅读量757

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/thankseveryday/article/details/124741733

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了Vue3的起步使用，通过简洁的示例展示如何开始一个Vue3项目。包括基本的安装、模板语法和运行结果，适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下是最简单的使用语法：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible"
              content="IE=edge">
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0">
         
        <script src="https://unpkg.com/vue@next"></script>
        
        <title>Learn Vue3</title>
    </head>

    <body>
        <div id="app">
            <p>{{counter}}</p>
            <p>
                <span :title="message">{{message}}</span>
            </p>
            <p><button @click="reverseMessage">翻转文字</button></p>
            <p><input type="text"
                       v-model="message"></p>
            <p v-if="seen">你能看到我吗？</p>
            <p><button @click="seenYN">显示/隐藏</button></p>
            <h4>我爱吃的水果：</h4>
            <ul>
                <li v-for="fruit in fruits">{{fruit}}</li>
            </ul>
            <h4>周末计划：</h4>
            <ol>
                <todo-item v-for="todo in todos"
                           :todo="todo"
                           :key="todo"></todo-item>
            </ol>
        </div>
        <script>
            const TodoItem = {
                props: ['todo'],
                template: `<li>{{todo}}</li>`
            }
            const counter = {
                components: {
                    TodoItem
                },
                data() {
                    return {
                        counter: 0,
                        message: "hello vue",
                        seen: true,
                        fruits: ["apple", "orange", "bananas"],
                        todos: ["钢琴课", "绘画课", "看电影"]
                    }
                },
                mounted() {
                    setInterval(() => {
                        this.counter++
                    }, 1000);
                },
                methods: {
                    reverseMessage: function () {
                        this.message = this.message.split('').reverse().join('');
                    },
                    seenYN: function () {
                        this.seen = !this.seen;
                    }
                }
            }

            Vue.createApp(counter).mount('#app')
        </script>
    </body>

</html>