Vue基本语法

Options API

选项式/配置式api

1. 需要在script中的export default一个对象
2. 对象中可以包含data、method、components等key
3. data是数据，数据必须是一个方法（如果是对象，会导致多组件的时候，数据互相影响，因为对象赋值后，都是指向同一个内存地址，当然，在最新的vue版本中，如果不是对象会直接报错）
4. method中可以写一些方法，在方法中，可以用this.xxx访问其他方法和data中的数据

问题：

1. data、method等分别存放，看起来是规范了，但是对于业务不友好，业务代码会分散到各个地方
2. this的指向很耗费心神，稍有不慎，this的指向就会错误

1.响应式基础

data 数据定义 ,声明响应式状态

选项式 API 时，会用 data 选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数比，对象里面的属性就是要定义的变量，并且具有响应式。Vue 将在创建新组件实例的时候调用此函数

<script>
exportdefault {
  data() {
    return {
      title: 'helloworld'
    }
  },
}
</script>

2 双大括号语法（Mustache语法）

1. 用于将data中的数据展示到dom中去
2. 里面也可以写变量表达式，如{``{true?'真的':'假的'}} {``{name}}

页面输出变量内容

使用插值表达式{{}}

<script>
  exportdefault {
    data() {
      return {
        title: "helloworld",
      };
    },
  };
</script>
<template>
  <div>
    <h1>{{title}}</h1>//插值使用{{}}
  </div>
</template>
<style>
</style>

3.页面元素的属性绑定

vue使用v-bind指令给页面元素的属性响应式的绑定属性，插值表达式{{}}不能在 HTML 的标签上面中使用。想要响应式地给标签绑定一个属性，应该使用 v-bind 指令

v-bind的语法： v-bind:属性名称="变量名"可以简写成： :属性名称="变量名"

如果绑定的值是 null 或者 undefined，那么该 属性将会从渲染的元素上移除。​

<script>
  exportdefault {
    data() {
      return {
        title: "helloworld",
      };
    },
  };
</script>
<template>
  <div>
    <h1 v-bind:id="title">{{title}}</h1>
    <h1 :id="title">{{title}}</h1> //简写
     <input type="text"
           v-bind:value="title">
  </div>
</template>
<style>
</style>

4.methods 方法定义 ，声明方法

要为组件添加方法，我们需要用到 methods 选项。它应该是一个包含所有方法的对象：

<script>
exportdefault {
  data() {
    return {
      count: {}
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
}
</script>

Vue 自动为 methods 中的方法绑定了永远指向组件实例的 this。这确保了方法在作为事件监听器或回调函数时始终保持正确的 this。你不应该在定义 methods 时使用箭头函数，因为箭头函数没有自己的 this 上下文。

5.页面事件绑定

vue可以在页面绑定方法，v-on用于监听DOM事件，并在触发事件时执行相应的方法或逻辑。它的作用是将事件与Vue实例中的方法进行绑定，实现事件处理和响应

语法：<div v-on:事件名称="方法名称"></div> 简写为 @事件名称="方法名称"

<script >
  export default {
    data() {
      return {
        title: "helloworld",
      };
    },
    methods: {
      getValue() {
        console.log("点击了");
      },
    },
  };
</script>
<template>
  <div>
    <h1 v-bind:id="title"
        v-on:click="getValue">{{title}}</h1>
    <h1 :id="title"
        @click="getValue">{{title}}</h1>
    <input type="text"
           v-bind:value="title">
  </div>
</template>
<style >
</style>

6.组件引入和使用

1. 创建组件

单独创建一个.vue结尾的文件，在里面放入组件内容

1. 引入组件

import 组件名称 from '组件地址'

例如

import HelloWorld from './components/HelloWorld.vue'

1. 注册组件

通过components属性注册组件，组件不注册无法使用

例如

export default {
  name: 'App',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  },
  components: {
    HelloWorld
  }
}

1. 使用组件

   <template>
   {{ count }} <button @click="increment" >加1</button> <button v-on:click="decrement">减1</button>
   <HelloWorld msg="Vite + Vue" /> </template>

2.Composition Api

组合式api

---

1.响应式基础

ref（）数据定义

ref()接受一个初始值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且修改会触发页面的更新

reactive（）对象定义

reactive()返回一个对象的响应式代理。

创建一个响应式对象

const obj = reactive({ count: 0 })
obj.count++

setup（）钩子函数

配置式api使用起来太过麻烦，所以组合式api来了，首先就是数据定义的区别，组合式api刚出来的时候使用setup钩子函数来实现对属性状态的管理

Vue3中代码中必须要有这个函数，setup()函数会在组件初始化的时候执行，其主要目的是以原生js的方式设置组件的数据和方法等。

setup() 函数会返回一个对象，对象会暴露给模板和组件实例。其他的地方也可以通过组件实例this来获取 setup() 暴露出来的属性

1. 在script中定义setup属性，这个属性是一个方法，方法的返回是一个对象

2. 这个对象中的每一个属性，都可以被视作一个变量，都能够直接拿到dom中进行使用

   <script> import { ref } from 'vue'

   export default {
   setup() {
   const count = ref(0)

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
   

   },

   mounted() {
   console.log(this.count) // 0
   }
   }
   </script>

   <template> <button @click="count++">{{ count }}</button> </template>

更简单的操作

setup语法糖

vue3.2的setup语法糖没有this，只需在script标签中添加setup,可以帮助我们解决这个问题。组件只需引入不用注册，属性和方法也不用返回， 也不用写setup函数，也不用写export default

<script setup>
  import { ref } from "vue";
  const msg = ref("这是第一条消息");
  msg.value = "变成第二条";
</script>
<template>
  <h1>{{ msg }}</h1>
</template>
<style scoped>
</style>

插值表达式/ 双大括号语法（Mustache语法）

Vue3的插值操作使用Mustache"语法 (即双大括号)来表示，其中可以包含表达式，例如加法{{ number + 1 }}或者三元不等式{{ ok ? 'Yes' : 'No' }}。插值操作可以用于更新元素的文本值，也就是显示出一个纯文本，等价于{{}}，不能用于代码块的赋值。

<h1>{{title}}</h1>

2.使用组件

1. 创建组件

单独创建一个.vue结尾的文件，在里面放入组件内容

1. 引入组件

import 组件名称 from '组件地址'

例如

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

1. 使用组件

   <template>
   {{ count }} <button @click="increment" >加1</button> <button v-on:click="decrement">减1</button>
   <HelloWorld msg="Vite + Vue" /> </template>

3.小练习

练习题：创建一个简单的"计数器"应用

任务：

请用 Vue 实现一个简单的计数器应用。计数器应包含以下功能：

1. 显示当前计数值。
2. 有两个按钮：
   • 一个按钮点击后增加计数值。
   • 另一个按钮点击后减少计数值。
3. 使用 v-bind或者 : 动态绑定按钮的属性（当计数值大于 0 时，"减"按钮变成可点击状态，计数值为 0 时按钮不可点击）。
4. 使用 v-on 或者@来绑定按钮点击事件。
5. 使用 Composition API 和 Option API 完成该功能，要求两种方式都实现一次，便于对比。

提示：

• 使用 ref 和 reactive 来管理数据（在 Composition API 中），ref定义的数据在script标签里面需要使用 变量名.value来获取和使用变量。
• 使用 data 和 methods 来管理数据和方法（在 Option API 中）。
• 按钮的点击事件可以通过 v-on 进行绑定，例如：@click="increment"。
• 使用 button标签和 disable属性来控制按钮的是否能点击

效果如下

Composition API代码实现：

<template>

<div v-bind:class="className">当前的数字：{{ num }}</div>

<button v-on:click="add()">新增</button>

<button v-on:click="sub()" :disabled="num===0">减少</button>

</template>

<script>

export default {

data() {

return {

num: 0,

};

},

methods: {

add() {

this.num++;

},

sub() {

this.num--;

}

}

};

</script>

<style scoped></style>

Composition API代码实现：

<template>

<div>当前的数字：{{ num }}</div>

<button v-on:click="add()">新增</button>

<button v-on:click="sub()">减少</button>

</template>

<script setup>

import { ref } from 'vue'

const num = ref(0)

const add = () =>{

num.value++;

}

const sub = () =>{

if(num.value>0){

num.value--;

}

}

</script>

<style scoped></style>