初始Vue

Vue框架是一个基于JavaScript实现的框架,要想使用它就必须拿到vue.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个vue程序</title>
    <!-- 当你使用一个script引入vue,就相当于注册了一个全局变量 -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="num"></div>
    <script>
        const myvue = new Vue({
            template:'<h1>你好!!!!!</h1>'
        })

        myvue.$mount(document.getElementById('num'))

    </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>模板语句的数据来源</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        new Vue({
            template : `<h1>最近爆火的电视剧是{{name}},它的上映时间是{{releaseTime}},主角是{{lead.name}},年龄是{{lead.age}},
                其他演员有{{actors[0].name}},年龄是{{actors[0].age}},还有{{actors[1].name}},年龄是{{actors[1].age}}
                </h1>`,
            data : {
                name : '狂飙',
                releaseTime : '2023年1月1日',
                lead : {
                    name : '高启强',
                    age : 40
                },
                actors : [
                    {
                        name : '安欣',
                        age  : 40
                    },
                    {
                        name : '高启兰',
                        age : 30
                    }
                ]
            }
        }).$mount('#app')

    </script>
</body>
</html>

1.为什么要new Vue()? 直接调用不可以吗?

不可以因为源码规定了必须实例,不是实例会报错误

2.Vue构造函数options 翻译为多个选项,指存入{ }中的数据,可以编写大量的键值对 k : v

3.关于template 翻译为模板用来指定模板语句,必须遵守Vue的框架语法规范,可以是一个HTML代码,也可以是Vue中的特殊规则,也可以是HTML代码+Vue的特殊规则

4.将Vue挂载到id='app'的元素位置

使用$mount方法,将Vue实例挂载到指定位置

5.模板语句的数据来源data 可以是object也可以是function,data是给整个Vue实例提供数据源的

如果是对象的话必须是纯粹的对象,0或者多个kv键值对

Vue 模板（template）核心规则与特性

根节点限制
模板语句必须有且仅有一个根节点，否则会编译报错（如template: '<h1>...</h1><h1>...</h1>'因多个根节点不合法）。
数据驱动更新
只要 data 中的数据发生变化，模板语句会自动重新编译、重新渲染，实现视图响应式更新。
挂载元素替换性
若使用 template 配置项，Vue 会用 template 内容替换页面中指定挂载位置（如#app对应的 DOM 元素）；若直接在 HTML 标签写模板语句（无 template 配置），挂载位置元素会被保留，仅渲染内部动态内容。
模板编写方式

可通过 template 配置项写模板（需遵循单根节点规则）；
也可直接把模板语句写在 HTML 标签里（挂载位置元素不被替换），Vue 能自动找到并编译渲染。

HTML 部分
通过 id="app" 定义 Vue 挂载容器，内部直接写模板语句（{{msg}}、{{name}} ），利用 Vue 插值语法渲染 data 中数据。
Vue 实例部分

data 定义响应式数据 msg、name；
演示了 template 配置的正确（单根节点，如含 div 包裹）与错误（多根节点）写法；
最终用 .$mount('#app') 手动挂载 Vue 实例到 #app 元素，也可通过 el: '#app' 自动挂载。

开发中可灵活选择模板编写方式：追求简洁可直接在 HTML 写模板（保留挂载容器结构）；需更复杂、复用性高的模板逻辑，用 template 配置（注意单根节点约束），均能借助 Vue 响应式机制实现数据驱动视图更新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template配置项详解</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
    </div>
    <script>
        new Vue({
            data : {
                msg : 'hello Vue',
            }
        }).$mount('#app')
    </script>
</body>
</html>

Vue 实例挂载方式

el 配置项挂载
在 new Vue({}) 选项中，通过 el: '#app' 配置，作用是指定 Vue 实例要接管的 DOM 容器（即让 Vue 管理 id="app" 的元素及其内部内容），与 $mount('#app') 效果等价。
$mount() 手动挂载
可在 Vue 实例创建后，调用 . $mount('#app') 方法手动挂载，功能和 el 配置一致，灵活度更高（比如延迟挂载、动态指定挂载目标）。

单根节点约束：template 中的模板内容必须有且只有一个根节点，否则编译报错（如template: '<h1>...</h1><h1>...</h1>'因多根节点不合法），正确写法需用 div 等标签包裹成单根结构。
数据响应式：data 中数据变化时，template 会自动重新编译、渲染，实现视图更新。

Vue 实例挂载有两种等效方式：el 配置项声明式挂载，或 $mount() 方法手动挂载，均可让 Vue 接管指定 DOM 容器。
编写 template 需遵循单根节点规则，配合 data 实现数据驱动视图的响应式更新，是 Vue 基础且核心的使用逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template配置项详解</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
    </div>
    <script>
        new Vue({
            data : {
                msg : 'hello Vue',
            },
            el : '#app'
        })
    </script>
</body>
</html>

// Vue.config是Vue的全局配置对象。

// productionTip属性可以设置是否生成生产提示信息。

// 默认值：true。如果是false则表示阻止生成提示信息。

// Vue.config.productionTip = false

一个vue实例只能绑定一个容器

不管是多实例绑定一个容器,还是一个实例绑定多个容器,都不允许