说明
">
命令式编程
声明式编程
- Vue 2.x （Options API）
- Vue 3.x （compostition API）
优势
- 声明式对比命令式
==================
MVC
MVVM

说明

命令式编程

一般原生写的JS编程，案例是计数器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2 class="counter">0</h2>
    <button class="increment">+1</button>
    <button class="decrement">-1</button>
    <script>
      // 1.获取所有的元素
      const counterEl = document.querySelector(".counter");
      const incrementEl = document.querySelector(".increment");
      const decrementEl = document.querySelector(".decrement");
      // 2.定义变量
      let counter = 100;
      counterEl.innerHTML = counter;
      // 3.监听按钮的点击
      incrementEl.addEventListener("click", () => {
        counter += 1;
        counterEl.innerHTML = counter;
      });
      decrementEl.addEventListener("click", () => {
        counter -= 1;
        counterEl.innerHTML = counter;
      });
    </script>
  </body>
</html>

声明式编程

案例是计数器

Vue 2.x （Options API）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">哈哈哈哈啊</div>
  <script src="../js/vue.js"></script>
  <script>
    Vue.createApp({
      template: `
        <div>
          <h2>{{message}}</h2>
          <h2>{{counter}}</h2>
          <button @click='increment'>+1</button>
          <button @click='decrement'>-1</button>
        </div>
      `,
      data: function() {
        return {
          message: "Hello World",
          counter: 100
        }
      },
      // 定义各种各样的方法
      methods: {
        increment() {
          console.log("点击了+1");
          this.counter++;
        },
        decrement() {
          console.log("点击了-1");
          this.counter--;
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

Vue 3.x （compostition API）

直接通过setup属性，把data、methods 等属性都弄在一起使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">哈哈哈哈啊</div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const {ref} = Vue;
        Vue.createApp({
            template: `
                <div>
                <h2>{{message}}</h2>
                <h2>{{counter}}</h2>
                <button @click='increment'>+1</button>
                <button @click='decrement'>-1</button>
                </div>
            `,
            // 定义各种各样的方法
            setup() {
                const message = "Hello World"
                const counter = ref(100)
                // 定义各种各样的方法
                const increment = () => {
                    console.log("点击了+1");
                    counter.value++;
                }
                const decrement = () => {
                    console.log("点击了-1");
                    counter.value--;
                }
                return {
                    message,
                    counter,
                    increment,
                    decrement
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

Vue - 编程模式

说明

命令式编程

声明式编程

Vue 2.x （Options API）

Vue 3.x （compostition API）

优势

声明式 对比 命令式

==================

MVC

MVVM

声明式对比命令式