查看“Vue Hello 小案例”的源代码

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>https://www.bilibili.com/video/BV1Zy4y1K7SH?p=6

=== 分析 Hello 案例 ===

==== Vue 实例和 Vue 容器一一对应 ====
<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="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>
</syntaxhighlight>注意区分：js表达式 和 js代码（语句）

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

（1）a

（2）a+b

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

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

2.js代码（语句）

（1）if(){}

（2）for(){}<syntaxhighlight lang="html">
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello，{{name.toUpperCase()}}</h1>
    </div>


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

        
    </script>
</syntaxhighlight>

==== 用 devtools 插件实时修改 vue 的值 ====
坑：devtools 对中文的值支持不好，如果是 data:{name:'张三'} 这样的值，大概率 devtools 的 Components 会扫描不出来，

所以最好改成 data:{name:'abc123'} 这样的值进行测试。
[[文件:Vue devtools 测试.png|无|缩略图|900x900像素]]Vue 实例和容器是一一对应的；

真实开发中只有一个 Vue 实例，并且会配合着组件一起使用；

<nowiki>{{xxx}}</nowiki> 中的 xxx 要写 js表达式，且 xxx 可以自动读取到 data 中的所有属性；

一旦 data 中的数据发生改变，那么模板中用到该数据的地方也会自动更新；