初识Vue3

1.Vue.js安装

• 方式一：直接CDN引入

• 方式二：下载和引入
• 下载Vue的源码，可以直接打开CDN的链接：
• 通过script标签，引入刚才的文件：

2.Vue3的简单使用

• 创建一个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的生命周期