1 认识Vue

Vue的本质，就是一个JavaScript的库框架.

Vue与原生开发相比，有以下几个优势：

1 数据绑定：Vue使用双向绑定技术，可以方便地绑定数据与视图，数据变化时，视图自动更新。而原生开发需要手动操作 DOM 元素来实现数据更新。

2 组件化开发：Vue允许开发者将整个页面分解为多个独立的组件，每个组件都可以拥有自己的数据和行为，方便复用和维护。而原生开发需要手动管理代码和样式，比较繁琐。

3 工具丰富：Vue提供了丰富的工具支持，如Vue CLI脚手架、Vue Devtools等，方便开发者快速构建、调试和优化应用程序。而原生开发需要手动搭建开发环境和调试工具。

4 生态丰富：Vue有着庞大的生态圈，有许多第三方库和插件，可以为开发者提供丰富的功能和组件，减少了开发时间和工作量。而原生开发需要自己编写代码和组件，工作量较大。

5 性能优化：Vue内置了许多性能优化的功能，如虚拟DOM、异步更新等，可以提高应用程序的性能和响应速度。而原生开发需要手动进行性能优化，比较繁琐。

认识Vue

2 vue的引入

2.1 CDN引入

<body>

  <h2>哈哈哈</h2>
  <p>我是内容, 呵呵呵呵</p>

  <div id="app"></div>
  
  <!-- CDN地址 -->
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    // 使用Vue
    const app = Vue.createApp({
      template: `<h2>Hello World</h2><span>呵呵呵</span>`
    })
    // 通过选择器将代码挂载到指定容器
    app.mount("#app")

  </script>
</body>

2.2 本地下载和引入

在这里插入图片描述

3 插值语法

<body>

  <div id="app"></div>
  
  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      // 插值语法: {{title}},其实就是声明式编程
      template: `<h2>{{message}}</h2>`,
      //传入数据使用插值的方式,避免了手动操作DOM
      data: function() {
        return {
          title: "Hello World",
          message: "你好啊, Vue3"
        }
      }
    })
    app.mount("#app")
  </script>

4 Vue核心思想(声明式编程)

让开发者专注于业务开发,Vue框架来完成底层操作,比如DOM操作等
在这里插入图片描述

通过template确定结构,声明数据与函数

优势:双向数据绑定,避免操作DOM

通过template确定结构(声明数据与函数)
通过data动态修改数据
通过methods实现具体的函数

通过计数器演练

<body>
  
  <div id="app"></div>

  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      template: `
        <h2>当前计数: {{counter}}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
      `,
      data: function() {
        return {
          counter: 0
        }
      },
      methods: {
        increment: function() {
          this.counter++
        },
        decrement: function() {
          this.counter--
        }
      }
    })
    app.mount("#app")
  </script>

代码重构:当Vue.createApp中没有template时,会使用挂载容器的内容作为template

<body>
  
  <div id="app">
    <h2>当前计数: {{counter}}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
  
  <script src="./lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      data: function() {
        return {
          counter: 0
        }
      },
      methods: {
        increment: function() {
          this.counter++
        },
        decrement: function() {
          this.counter--
        }
      }
    })
    app.mount("#app")
  </script>
</body>