1、vue采用组件化模式，提高代码复用率、且让代码更好维护。
.vue文件里面写的是部分功能对应的html页面、css样式和js代码。
2、声明式编码，让编码人员无需直接操作DOM，提高开发效率。
3、使用虚拟DOM+diff算法，尽量复用DOM节点
4、vue.config.js 是一个可选的配置文件，用于对 Vue 项目的构建过程进行自定义配置。通过在项目根目录下创建一个名为 vue.config.js 的文件，可以对项目的构建过程进行一些自定义设置，例如配置 webpack、指定输出路径、设置代理等。
vue.config.js 的作用包括但不限于：
I、 配置 webpack： 可以通过 vue.config.js 文件来修改 webpack 的配置，例如添加自定义的 loader、plugin，或者修改已有的配置。
II、 指定输出路径： 可以通过 vue.config.js 文件来指定打包后文件的输出路径，以及设置静态资源的路径。
III、设置代理： 可以在 vue.config.js 中设置代理，用于解决开发环境下的跨域访问问题。
IV、自定义 webpack 配置： 可以在 vue.config.js 中进行一些自定义的 webpack 配置，例如修改输出文件名、配置代码分割等。
5、
<body>
<!--
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为【Vue模板】； model
4.Vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
-->
<!-- 准备好一个容器 -->
<div id="demo">
<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>
<script>
//创建Vue实例
new Vue({
el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
//data中用于存储数据，数据供el所指定的容器去使用
data() {
return {
name:'capital',
address:'北京'
}
},
})
</script>
</body>
6、
<!--
Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式（也可以是模板字符串），且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
-->
<body>
<!-- 准备好一个容器-->
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr/>
<h1>指令语法</h1>
<!-- v-bind:可以简写为: -->
<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}</a>
<a :href="school.url" x="hello">点我去{{school.name}}</a>
</div>
</body>
<script>
new Vue({
el:'#root',
data(){
return {
name:'jack',
school:{
name:'百度',
url:'http://www.baidu.com',
}
}
}
})
</script>
7、Vue中有2种数据绑定的方式：I.单向绑定(v-bind)：数据只能从data流向页面。II.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：I.双向绑定一般都应用在表单类元素上（如：input、select等）。II.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- 普通写法 -->
单向数据绑定：<input type="text" v-bind:value="name"><br/>
双向数据绑定：<input type="text" v-model:value="name"><br/>
<!-- 简写 -->
单向数据绑定：<input type="text" :value="name"><br/>
双向数据绑定：<input type="text" v-model="name"><br/>
<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
<!-- <h2 v-model:x="name">你好啊</h2> -->
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
name:'北京'
}
})
</script>
8、data与el的2种写法：
el有2种写法:(1).new Vue时候配置el属性。(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
data有2种写法:(1).对象式。(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
// el的第二种写法
const vm = new Vue({
data: {
name: '北京'
}
})
vm.$mount('#root')
//data的第二种写法：函数式
data(){
console.log('@@@',this) //此处的this是Vue实例对象,这是普通函数调用的结果，如果是箭头函数调用的话，指向的是window
return{
name:'北京'
}
}
9、MVVM是Model-View-ViewModel的缩写，是一种用于构建用户界面的软件架构模式。它是基于MVC（Model-View-Controller）和MVP（Model-View-Presenter）模式的演变而来。在MVVM模型中，Model代表数据模型，View代表用户界面，ViewModel是连接View和Model的中间件。ViewModel负责从Model层获取数据，并对数据进行加工处理后提供给View层展示，同时也负责监听View层的用户操作，并更新Model层的数据。
MVVM模型的核心思想是数据双向绑定，即View层的变化会自动反映到ViewModel层，ViewModel层的变化也会自动更新到View层，而无需手动操作DOM。这种数据绑定的机制使得开发者能够更专注于数据和业务逻辑的处理，而不用过多关注界面的更新。
<!--
MVVM模型
1. M：模型(Model) ：对应data中的数据
2. V：视图(View) ：模板代码
3. VM：视图模型(ViewModel)：Vue实例
观察发现：
1.data中所有的属性，最后都出现在了vm身上。
2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
-->
<!-- 准备好一个容器-->
<div id="root">
<h1>学校名称：{{name}}</h1>
<h1>学校地址：{{address}}</h1>
<h1>测试一下1：{{1+1}}</h1>
<!-- 所有vm身上的属性都可以直接使用 -->
<!-- 直接使用就可以 -->
<h1>测试一下2：{{$options}}</h1>
<!-- 出现在vue原型上的也可以使用（_proto_） -->
<h1>测试一下3：{{$emit}}</h1>
<h1>测试一下4：{{_c}}</h1>
<h1>测试一下5：{{_isVue}}</h1>
</div>
10、ES6中Object.defineProperty的用法
<script>
let number = 18
let person = {
name:'张三',
sex:'男',
}
// Object.defineProperty在js中用于定义对象属性的方法
// 它允许我们定义一个新属性或修改现有属性，并且可以精准地控制这些属性的特性
// 第一个参数：给哪个对象添加属性
// 第二个参数：添加的属性的名字
// 第三份参数：配置项
// Object.defineProperty(obj, prop, descriptor)
Object.defineProperty(person,'age',{
// value:18, // age的值是18
// enumerable:true, //控制属性是否可以枚举，默认值是false
// writable:true, //控制属性是否可以被修改，默认值是false
// configurable:true //控制属性是否可以被删除，默认值是false
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get(){
console.log('有人读取age属性了')
return number
},
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set(value){
console.log('有人修改了age属性，且值是',value)
number = value
}
})
// object.keys()传入的参数是一个对象，可以把key值提取出来变成一个数组
// console.log(Object.keys(person))
console.log(person)
</script>
<body>
<!-- vue底层可以用到，vue计算属性也可以用到 -->
<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
<script type="text/javascript" >
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
</script>
</body>
vue中的数据代理：
1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写） vm._data
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
