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

2024年7月28日 (日) 03:20的最新版本

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(){}

    <!-- 准备好一个容器 -->
    <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>

用 devtools 插件实时修改 vue 的值

坑：devtools 对中文的值支持不好，如果是 data:{name:'张三'} 这样的值，大概率 devtools 的 Components 会扫描不出来，

所以最好改成 data:{name:'abc123'} 这样的值进行测试。

Vue 实例和容器是一一对应的；

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

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

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

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

2024年7月28日 (日) 03:20的最新版本

分析 Hello 案例

Vue 实例和 Vue 容器一一对应

用 devtools 插件实时修改 vue 的值

导航菜单

搜索