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

来自姬鸿昌的知识库
跳到导航 跳到搜索
第94行： 第94行：
 
</body>
 
</body>
 
</html>
 
</html>
−
</syntaxhighlight>
+
</syntaxhighlight>注意区分：js表达式 和 js代码（语句）
 +
 
 +
1.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方：
 +
 
 +
（1）a
 +
 
 +
（2）a+b
 +
 
 +
（3）demo(1)【对带入参的函数调用】
 +
 
 +
（4）x === y ? 'a' : 'b'【三元运算表达式】
 +
 
 +
2.js代码（语句）
 +
 
 +
（1）if(){}
 +
 
 +
（2）for(){}

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

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 案例

Vue 实例和 Vue 容器一一对应

<!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="root1">
        <h1>Hello，{{name}}</h1>
    </div>

    <div id="root2">
        <h1>Hello，{{name}}</h1>
    </div>


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

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

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

注意区分：js表达式 和 js代码（语句）

1.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方：

（1）a

（2）a+b

（3）demo(1)【对带入参的函数调用】

（4）x === y ? 'a' : 'b'【三元运算表达式】

2.js代码（语句）

（1）if(){}

（2）for(){}

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