前言

在上一篇的讲解中我们成功创建一个Vue项目，并且成功运行了我们的第一个Vue应用。在本篇学习中我们将继续学习认识vue的指令，并运用指令实现一些功能。

创建你的vue项目

1.npm create vue@latest 初始化

打开你的集成终端，在对应的文件夹中输入这个指令，他将帮助你生成一个vue脚手架

2. 输入项目名称

我这里将项目取名为new,作为新手，我们一路点否

3. 初始化完成，跟随指令执行命令

• cd new 在新建文件夹中执行操作
• npm install 安装项目依赖
• npm run dev 运行你的项目

来到vue文件夹中，我们先将assets和components这两个文件夹删除，将根组件App.vue中的内容全部删除。安装插件Vue VSCode Snippets ,有助于我们快速生成代码，提高我们的编程效率

通过vb3s生成根组件基本框架

1. v-for:遍历循环

在vue中如何将js中定义的数组放进页面上显示出来？v-for可以轻松的解决这个问题。

使用v-for循环遍历arr中的item,再使用插值表达式，这样就能遍历出你需要遍历的数组中的每一个元素。

在Vue中，将JS中定义的数组显示在页面上的过程可以整理为以下三句话：

1. 首先，在Vue组件的data函数中定义或引入你想要显示的数组。
2. 然后，在模板中使用v-for指令遍历这个数组，为每个数组元素创建一个DOM元素（如<li>）。
3. 最后，在遍历过程中，使用插值表达式{{ item }}将当前遍历到的数组元素（item）的值显示在对应的DOM元素中。

<template>
  <div>
    <ul>
      <li v-for="item in arr">{{ arr }}</li>
      <li v-for="item in arr">{{ item }}</li>
      <li v-for="item in arr"> item</li>
    </ul>
  </div>
</template>

<script setup>
const arr = ['棉', '棉', '冰']
</script>

<style lang="css" scoped></style>

如上代码所示，最终显示的分别为数组arr，数组arr中的元素item,和字符串item。

使用{{ item }}会将item变成变量来被加载

key：提升源码性能

在Vue中使用v-for时，为列表项提供唯一的key属性可以优化DOM的更新性能，确保元素的高效复用和排序。

<li v-for="(item, index) in arr" key="index">{{ item }}</li>

2.v-for和v-on的实际运用

整个数组的添加和翻转

1. 点击push按钮能添加数组
2. 点击reserve按钮翻转数组

• 循环遍历这个数组
• 为这两个函数打造函数并绑定点击事件

<template>
  <div>
    <ul>
      <li v-for="(item, index) in arr" key="index">{{ item }}</li>
    </ul>
    <button @click="push">push</button>
    <button @click="reserve">reserve</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const arr = reactive(['棉', '棉', '冰'])

const push = () => {
  arr.push('绵绵冰2号')
}

const reserve = () => {
  arr.reverse()
}
</script>

数组中元素的添加

• 将每个元素都遍历，传入index作为key值
• 打造功能按钮和函数
• 在这个函数中遍历这个数组，将每个元素+1后返回数组

<template>
    <div>
        <ul>
            <li v-for="(item, index) in arr" key="index">{{ item }</li>
        </ul>
        <button @click="add">+1</button>      
    </div>
</template>

<script setup>
import { reactive } from 'vue'

const arr = reactive(['棉', '棉', '冰'])

const add = () => {
    arr.forEach((item, index) => {
        arr[index] = item + 1
    })
}
</script>

3. v-model:双向绑定

v-model 是 Vue.js 中一个非常强大且常用的指令，它主要用于在表单输入和应用状态之间创建双向数据绑定。这意味着当输入框的内容变化时，绑定的数据属性会自动更新，反之亦然。v-model 简化了表单数据的双向绑定和更新过程。

你看下面是一个简单的登记表格，通过v-model绑定后用户在 <input> 字段中输入文本时，绑定的数据属性会自动更新以反映用户的输入

<template>
    <div>
        <div>
            账号：<input type="text" v-model="state.username">
        </div>

        <div>
            密码：<input type="text" v-model="state.password">
        </div>

        <button @click="login">登入</button>
    </div>
</template>

<script setup>
import { reactive } from 'vue'

// 全局定义，响应式
const state = reactive({
    username: "",
    password: ""
})


const login = () => {

    console.log('login')
}
</script>

4.watch():观察者

• watch()变量的监听者,只要变量一发生变更就会触发执行内置的函数逻辑。

• 他接收两个参数，变量和执行函数。执行函数中会newval, oldval会记录变更前后的值

如何做一个如上图所示的建议器？

• 将两个变量变为响应式
• 因为穿衣推荐随着温度变化而变化，所以使用 watch()监听温度的变化
• 从vue中引入watch
• 在 watch()中内置好if判断，根据温度高低来判断穿衣建议

<template>
    <div>
        <h2>当前温度：{{ temp }}</h2>
        <h3>建议穿衣：{{ suggest }}</h3>

        <button @click="add">+5</button>
        <button @click="minus">-5</button>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'

let temp = ref(20)
let suggest = ref('夹克')

const add = () => {
    temp.value += 5
}

const minus = () => {
    temp.value -= 5
}
// 监听变量,只要一变更就触发
watch(temp, (newval, oldval) => {
    console.log(newval, oldval)
    if (newval >= 30) {
        suggest.value = '短袖'
    } else if (newval >= 20) {
        suggest.value = '长袖'
    } else if (newval >= 10) {
        suggest.value = ' 外套'
    } else {
        suggest.value = ' 棉袄'
    }
})
</script>

5.computed():计算属性

computed()和watch()在相似的形况下，两者能实现的功能基本相同。但是，computed()的性能更好，因为computed中留有缓存，在反复加载计算时重复的步骤不需要再执行

• 前面步骤省略
• 在使用computed时，首先引入，然后将需要执行的判断函数放进他的回调函数中，
• 当他监听到回调函数中的变量改变时，他会返回执行的结果
• 将他返回的结果赋给被变量影响的量

const suggest = computed(() => {
    if (temp.value >= 30) {
        return '短袖'
    } else if (temp.value >= 20) {
        return '长袖'
    } else if (temp.value >= 10) {
        return '外套'
    } else {
        return '长裤'
    }
})
</script>