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

来自姬鸿昌的知识库
跳到导航 跳到搜索
第1行： 第1行：
−
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=5
+
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=5<syntaxhighlight lang="html">
 +
<!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>
 +
</syntaxhighlight>

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

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.jihongchang.top/index.php?title=Vue_Hello_小案例&oldid=7950”