学习vue3和vue2对比来学习(1)

vue3和vue2最不同的就是写法了吧（组合式）写下来vue2和vue3对比来学习

方法一vue2：

<template>

      <h3>{{ name }}</h3> //{{}}模块语法

      <h3>{{ age }}</h3>

      <button @click="sagHello">介绍</button>//@click="sagHello"事件

 </template>

 <script>

         export default{

          // 数据

          data(){

            return{

              name:'赵亚',

              age:24

            }

          },

          // 方法

          methods:{

            sagHello(){

            alert(`我是${this.name},我今年${this.age},你好呀！`)//这里的`${}`是使用的es6中的模板字符串

          }

          }}

 </script>

下面vue3的写法不是响应式的，具体响应式写法下一章笔记记载

方法一vue3：

<template>

    <h3>{{ name }}</h3>   //{{}}模块语法

    <h3>{{ age }}</h3>

    <button @click="sagHello">介绍</button>//@click="sagHello"事件

 </template>

    <script>

       export default{

        setup(){

          // 数据

          let name = "赵亚"

          let age = 24

          // 方法

          function sagHello(){

            alert(`我是${name},我今年${age},你好呀！`)//这里的`${}`是使用的es6中的模板字符串

           }

          // 返回一个对象（方法二vue3没有这个）

          return{name,age,sagHello}

        }

       }

    </script>

方法二vue3：（更简单真正项目开发还是使用这种）

<template>

    <h3>{{ name }}</h3>

    <h3>{{ age }}</h3>

    <button @click="sagHello">介绍</button>//@click="sagHello"事件

</template>

<script setup>

      // 数据

      let name = "赵亚"

      let age = 24

      // 方法

      function sagHello(){

        alert(`我是${name},我今年${age},你好呀！`)//这里的`${}`是使用的es6中的模板字符串

      }

</script>

更新中......(下一篇更新)