<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <h1>{{msg}}</h1>
            <h1>{{name}}</h1>
        </div>
    </div>
    <script>
        //Vue的全局配置选项
        //其中的productionTip可以设置是否生成生产提示信息
        //默认值是true,如果是false则表示组织生成
        Vue.config.productionTip = false;
        new Vue({
            //关于template模板项,这个模板项下只能有一个根节点
            //只要data中的数据发生变化,模板语句一定会重新编译,重新渲染
            //如果使用template配置项的话,指定挂载位置的元素是直接被替换的
            //如果直接将模板语句写到html标签内,指定位置的挂载元素就不会被替换了
            //.$mount("#app")也可以不需要了
            //在VUE中有一个配置项el
            //el配置项也可以实现挂载
            // template : `<div>
            //     <h1>{{msg}}</h1>
            //     <h1>{{name}}</h1>
            //    </div>`,
            data : {
                msg : "Hello Vue!",
                //如果我们的name是以中文开始的就会显示不了data
                name : "a老杜!"
            },
            //EL配置项是用来指定我们接管什么容器的
            //和挂载的mount一个效果
            el : "#app"
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="id"></div>
    <script>
        const myVue = new Vue({
            template : `<h1>最近大火的电视剧{{name}},上映时间是{{releaseTime}},主角叫{{lead.name}},年龄是{{lead.age}}
                        其他演员包括{{actors[0].name}},年龄是{{actors[0].age}},还有{{actors[1].name}}年龄是{{actors[1].age}}
                </h1>`,
            //谁可以给模板语句提供数据来源,data选项
            //data只能是object或者function两类
            //data配置项的专业叫法vue实例的数据对象
            //data实际上是给整个vue实例提供数据来源的
            //对象必须是纯粹的对象才行(含有零个或多个key和value对)
            //data数据的内容怎么插入到模板语句中?
            //{{}}是VUE框架自己定义的一套语法,别的框架或者浏览器都看不懂且不能识别
            //插值语法{{}}的中间不能有其他空格,这是vue框架自定义的语法标准,走了vue的编译器
            //所以一旦语法错误就识别不了了
            data : {
                name : "狂飙",
                releaseTime : "2023年1月1日",
                lead : {
                    name : "高启强",
                    age : 40
                },
                actors : [
                    {
                        name : "安欣",
                        age : 30
                    },
                    {
                        name : "高启兰",
                        age : 27
                    }
                ]
            }
        })
        myVue.$mount("#id")
    </script>
</body>
</html>