vue详细教程

原创

MrFlySand 2022-11-28 12:34:11 ©著作权

文章标签 Vue html 公众号省略号 文章分类 运维

©著作权归作者所有：来自51CTO博客作者MrFlySand的原创作品，请联系作者获取转载授权，否则将追究法律责任

02vue的安装

程序说明

1、在body中有2个counter，一个是id，一个是class。
2、创建应用，分别用id和class将配置对象传入

语法：Vue.createApp(方法名).mount("标签");
id：counter前面是#，Vue.createApp(Counter).mount("#counter");
class：counter前面是.，Vue.createApp(Counter).mount(".counter");

3、vue通过2个{}获取变量

<!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">
    <title>Document</title>
    <script src="vue3.js"></script>
</head>
<body>
<!-- vue语法，告诉vue，这里放了一个变量，2个{}表示变量 -->
<div id="counter">
    <p>{{id}}</p>
    <p>{{name}}</p>
</div>

<div class="counter">
    <p>QQ</p>
    <P>{{num}}</P>
</div>
    <script>
        const Counter = { //配置方法
            data: function() {
                return {
                    id: "公众号",
                    name: "小知识酷",
                    num: ,
                }
            }
        }
        Vue.createApp(Counter).mount("#counter"); //创建应用，将配置对象传入
        Vue.createApp(Counter).mount(".counter");
    </script>
</body>

</html>

代码输出

公众号

小知识酷

03 使用vite安装项目

教程说明：为了文章更加简洁，教程中的所有代码进行了部分缩减，文章中的代码都是body中的内容。

<!-- vue语法，告诉vue，这里放了一个变量，2个{}表示变量 -->
<div id="counter">
    <p>{{id}}</p>
    <p>{{name}}</p>
</div>
<script>
    const Counter = { //配置方法
        data: function() {
            return {
                id: "公众号",
                name: "小知识酷",
                num: ,
            }
        }
    }
    app = Vue.createApp(Counter).mount("#counter"); //创建应用，将配置对象传入
    console.log(app)
</script>