从这节课开始，我们正式进入vue详细的基础学习。通过上个章节的学习，我们大概都知道了vue的一些基本语法，只是了解得比较粗糙没有那么详细。这一个章节我们就来详细的学习一下vue的基础语法。
手写vue基本结构
在项目根目录下新建一个 demo6.html 文件，我们使用感叹号+回车，快速创建一个html基本模板。然后来引入一下vuejs的cdn文件，在body中添加一个div设置id为app，再来添加一个script，在script中使用, Vue.creatApp() 方法创建一个vue应用 ，注意Vue第一个字母大写。它的参数接收的是一个对象，我们再用mount()方法，把vue应用挂载到指定的dom节点上，它接收一个字符串参数，值可以为任何形式的css选择器。 我们想要把它挂载到 id为app 的 div dom 上，所以 mount() 方法我们传入 #app。意思就是我这个vue的应用只作用在id为app的dom内，外界不受影响的，它只管理我们作用域内所有dom节点。
<script>
Vue.createApp({}).mount("#app")
</script>createApp()的基本参数
目前createApp方法接收了一个空对象。经过了前几节课的学习， 我们大概知道可以给它添加一个template参数和data参数，我们添加一个data，它是一个方法，并且会返回一对象。
在对象中定义一个变量message默认值为”Hello World“，然后我们再定义一个template
<div>{{message}}</div> 并且把变量message通过插值表达式渲染一下。
vue应用的页面它是由一个个组件嵌套组成的在最外层需要一个根组件，我们需要在根组件内用更多的组件来组成一个页面。
那么createApp方法就是用来创建根组件的。它有数据有模板还会有一些生命周期函数。那么每一个组件它都会拥有这些参数，来表示这个组件的展现形式。
<script>
//createApp 创建一个vue应用
//传入参数表示这个应用最外层的组件该如何展示。
Vue.createApp({
data(){
return {
message:"hello world"
}
,
template:`<div>{{message}}</div>`,
}).mount("#app")
</script>根组件
createApp方法它会返回一个这个应用的实例，我们使用一个常量叫app去接收这个应用的实例，因为我们后期并不会去改变这个变量，使用常量也恰好避免它被无意中改变。
mount 方法它是app应用实例下的方法，所以我可以改成app.mount。 mount方法它也有返回值，我们也用一个叫vm的常量去接收一下，其实它返回的就是我们的根组件。
//createApp 创建一个vue应用， 使用常量app来存储。
//传入参数表示这个应用最外层的组件该如何展示。
const app=Vue.createApp({
data(){
return{
message:"hello world"
}
},
template:"<div>{{message}}</div>"
})
//vm 表示的就是vue应用的根组件
const vm=app.mount("#app") 经过几节课的学习，在此我们知道了vue是它以数据驱动界面的编程模式。它把数据和模板组合起来得到了我们的界面。vue这种模式叫 mvvm 编程设计模式。
m：代表 model 数据
v：代表 view 视图
vm：代表视图数据关联层
在我们刚刚编写的代码中，其实就已经体现了mvvm。 data其实就代表了mvvm中的m：model 数据层。template(模板)它就代表了mvvm中的v:view 视图层，我们刚刚定义vm常量它其实就代表了mvvm中的vm:视图数据关联层。
<script>
const app=Vue.createApp({
data(){
return{
message:"hello world" // mvvm m:model 数据层 这里我们定义了
}
},
template:"<div>{{message}}</div>" // mvvm v:view 视图层 这里我们也定义了
})
//mvvm vm: 视图数据关联层 这里vue的组件帮我们完成了 所以变量名取作为vm
const vm=app.mount("#app")
</script>vm它既代表组件，又代表视图数据关联层。我们可以通过vm来访问我们定义数据可以去获取它也可以去修改它
我们可以加这么一段代码
<script>
const app=Vue.createApp({
data(){
return{
message:"hello world"
}
},
template:"<div>{{message}}</div>"
})
const vm=app.mount("#app")
//修改了这里 记得加上一个$ 才能访问
vm.$data.message = "hello vue"我打开浏览器看一下，他显示了一个 hellow vue 成功把之前的数据给覆盖掉了。 我们再打开的浏览器的控制台，在代码中我们把app定义成了一个全局的常量，vm也是全局的常量。那么在控制台console中我们是可以访问这两个的常量的。输入app它会打印一个对象，输入vm它也会打印一个对象，我输入vm.$data.message ,就输出了message变量的值了， 那么我们是输入 vm.$data.message=”他大爷的“，是不是也能修改掉model中的数据啊，并且我们修改之后界面上会立刻作出变化，是不是很神奇。知道为什么叫数据驱动界面了吧，数据发生了变化，界面也会跟着发生变化。
到这里节课的内容就讲完了，我们总结一下这节课我们都学到了什么，首先我们学习了Vue中的两个最基本方法createApp()和mount(),然后学习了如何获取和使用 根组件，在学习根组件的时候又学习了Vue框架的基本模式是mvvm，并对mvvm模式进行了具体了解。