1.Vue.js安装
- 方式一：直接CDN引入
<script src="https://unpkg.com/vue@next"></script>
- 方式二：下载和引入
- 下载Vue的源码，可以直接打开CDN的链接：
- 通过script标签，引入刚才的文件：
<script src="../js/vue.js"></script>
2.Vue3的简单使用
<body>
<div id="app"></div>
<script src="../js/vue.js"></script>
<script>
Vue.createApp({
template: `<h2>你好啊, 李银河</h2>`
}).mount("#app");
</script>
创建一个div添加id=app
通过.mount("#app")来将Vue对象挂载到元素上
-
template属性：表示的是Vue需要帮助我们渲染的模板信息：
目前我们看到它里面有很多的HTML标签，这些标签会替换掉我们挂载到的元素（比如id为app的div）的
innerHTML；但是这个模板的写法有点过于别扭了，并且IDE很有可能没有任何提示，阻碍我们编程的效率。
-
Vue提供了两种方式：
- 方式一：使用script标签，并且标记它的类型为 x-template；
- 方式二：使用任意标签（通常使用template标签，因为不会被浏览器渲染），设置id；
template元素是一种用于保存客户端内容的机制，该内容再加载页面时不会被呈现，但随后可以在运行时使
用JavaScript实例化；
-
data属性是传入一个函数，并且该函数需要返回一个对象：
- 在Vue3.x的时候，必须传入一个函数，否则就会直接在浏览器中报错；
-
data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理：
- 所以我们在template中通过 {{counter}} 访问counter，可以从对象中获取到数据；
- 所以我们修改counter的值时，template中的 {{counter}}也会发生改变；
-
methods属性是一个对象，通常我们会在这个对象中定义很多的方法：
- 这些方法可以被绑定到 template 模板中；
- 在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性；
-
注意：
3.Vue中的MVVM
- View层：
- 视图层
- 在我们前端开发中，通常就是DOM层。
- 主要的作用是给用户展示各种信息。
- Model层：
- 数据层
- 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
- 在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
- VueModel层：
- 视图模型层
- 视图模型层是View和Model沟通的桥梁。
- 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
4.Vue的生命周期
