0
点赞
收藏
分享

微信扫一扫

Vue03-HelloWord

有点d伤 2024-06-06 阅读 6
vue.js前端

一、Hello World

1-1、示例1

 

把容器中变化的数据,交给Vue实例去保管:

1-2、示例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--VUEde 引入 cdn方式-->
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

    <!-- view层 模板 视图层 -->
    <div class="app">
        {{message}}
    </div>

    <script>
        // 创建一个Vue的实例
        var vm = new Vue({
            el: ".app",
            // model层:数据模型
            data:{
                message: "hello world!"
            }
        });
    </script>

</body>
</html>

浏览器展示:

双向绑定:ViewModel层

 

1-3、小结

二、Hello 案例分析

2-1、一个Vue实例,不能同时接管两个实例

页面展示:

2-2、多个实例不能对应一个容器

2-3、一个Vue实例对应一个容器

三、注意

3-1、Vue的组件简介

3-2、JS表达式 VS JS代码

HTML容器中,并不是Vue实例有什么,容器才能放什么。

页面展示:

 

 

页面展示:

3-3、小结

举报

相关推荐

java Helloword程序总结

spring之HelloWord版

HarmonyOs 4 (二) HelloWord

Vue-03

vue-03

vue03

Vue day 03

0 条评论