“Vue Hello 小案例”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
第38行： 第38行：
 
</body>
 
</body>
 
</html>
 
</html>
−
</syntaxhighlight>
+
</syntaxhighlight>[https://www.bilibili.com/video/BV1Zy4y1K7SH?p=5 https://www.bilibili.com/video/BV1Zy4y1K7SH?p=6]
 +
 
 +
=== 分析 Hello 案例 ===

2024年7月28日 (日) 02:28的版本

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始Vue</title>
    <!--引入Vue-->
    <script  type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <!--
        初识 Vue:
        1.想让 Vue 工作，就必须创建一个 Vue 实例，且要传入一个配置对象；
        2.root 容器里的代码依然符合 html 规范，只不过混入了一些特殊的 Vue 语法；
        3.root 容器里的代码被称为【Vue 模板】；
    -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello，{{name}}</h1>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

        //创建 Vue 实例
        const x = new Vue({
            //el:document.getElementById('root')
            el:'#root', //el 用于指定当前 Vue 实例为哪个容器服务，值通常为 css 选择器字符串。
            data:{ //data 中用于存储数据，数据供 el 所指定的容器去使用
                name:'大聪明'
            }
        })
    </script>
</body>
</html>

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=6

分析 Hello 案例

取自“https://www.jihongchang.top/index.php?title=Vue_Hello_小案例&oldid=7951”