创建 Vue 实例

引入 Vue 注意在 Head 中

另一个 javascript 中创建 Vue 实例，注意在 Body 尾部

配置对象

Vue 实例和 div 容器建立关系，把变化的内容给 Vue 实例

参数说明

• el: element，用于指定为哪个容器服务，值通常为css选择器字符串
• data: 把 div 容器拿过来，进行解析，扫描是否有自己涉及到特殊语法，发现有 modelChoiceTitleContent ，就把整个插值内容全部替换，把解析完的东西替换掉原来的

实现效果

模块
🥳
{{modelChoiceTitleContent}}
🗂️
学习文档

插值语法失效解决

https://blog.csdn.net/m0_50939789/article/details/128459138?spm=1001.2014.3001.5501

容器和 Vue 实例的一一对应关系

• 多个容器对一个 Vue 实例，第二个会失效，el 对多个类选择器无法解析，只解析第一个类选择器指定的容器
• 一个容器对多个 Vue 实例，第二个会失效，第二个 Vue 实例无法接管第一个的 Vue 实例，一个容器只能被一个Vue实例接管
• 解决该问题方法：组件使用

插值内容必须为 javascript 表达式

• 一个表达式会生成一个值，可以用变量在左侧接返回值

Vue开发者工具的初步使用

Root 根部有配置的 data ，并可进行更改，页面上实时更新

data 内部多层级写法

data: {name: 'jack',school: {name:'shangguigu'}
}

实现效果

{{school.name}} => shangguigu

{{name}} => jack