vue

之前在idea上写过的vue代码找不到了，为了防止下次再找不到，写一个md记录一下。

vue 的安装

需要15版本以上的npm

执行

npm init vue@lastest

根据需求选择合适的开发环境

√ Project name: ... vue01
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes

执行

cd vue01(创建项目的文件夹)
npm install
npm run dev

项目基本文件如图（删掉了一些）

在app.vue中导入一下component

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

<template>
 <Helloworld/>
</template>

在HelloWorld.vue中随便写点东西

<script>
export default {
    data() {
        return {
            msg: '一条消息',
            number: '2'
        }
    }
}
</script>

<template>
    <div>
        {{ msg }}
        <h4>{{ number + 1 }}</h4>
    </div>
</template>

在前端基本跑起来了

v-bind：绑定属性

主要用于绑定class和id（标签里的属性）

<script>
export default {
    data() {
        return {
            msg: '一条消息',
            number: '2',
            situation : 'active',
            dynamicId : 'appld'
        }
    }
}
</script>

<template>
    <div>
        {{ msg }}
        <h4>{{ number + 1 }}</h4>
    </div>
    <div v-bind:class="situation" v-bind:id="dynamicId">

    </div>
</template>

如果一个data的值是null或者undefined，则绑定不上

v-bind简写方式：

<div :class="situation" :id="dynamicId">

v-bind可以绑定对象

<script>
export default {
    data() {
        return {
            msg: '一条消息',
            number: '2',
            situation: 'active',
            dynamicId: 'appld',
            objectAttrs: {
                id: 'apple',
                class: 'title'
            }
        }
    }
}
</script>

<template>
    <div>
        {{ msg }}
        <h4>{{ number + 1 }}</h4>
    </div>
    <div v-bind:class="situation" :id="dynamicId">
        v-bind绑定
    </div>

    <div :="objectAttrs">v-bind可以绑定对象</div>
</template>

条件渲染

v-if
v-else

<script>
export default {
    data() {
        return {
            flag: true
        }
    }
}
</script>

<template>
    <h3>条件渲染</h3>

    <div v-if="flag">flag == true</div>
    <div v-else>flag == false</div>
</template>

v-else-if

使用的时候的一般形式

<div v-if="condiction==='a'"></div>
<div v-else-if="condiction==='b'"></div>
<div v-else></div>

不赘述

v-show,用法与v-if类似，但是只能判定自身true和false

v-show的标签始终都会渲染，只是如果为false，则不显示。而v-if，如果为false则不会渲染，只有当true的时候才会重新添加。

列表渲染

v-for

<script>
export default {
    data() {
        return {
            list: ["第一条", "第二条", "第三条", "第四条"]
        }
    }
}
</script>

<template>
    <h3>聊表渲染</h3>

    <p v-for="(k, kk) in list">{{ kk }}-{{ k }}</p>
</template>

对于json串的渲染

<script>
export default {
    data() {
        return {
            list: ["第一条", "第二条", "第三条", "第四条"],
            people: [{
                "name": "John",
                "age": 30,
                "city": "New York"
            }, {
                "name": "Alice",
                "age": 25,
                "city": "London"
            }, {
                "name": "Michael",
                "age": 35,
                "city": "Paris"
            }]
        }
    }
}
</script>

<template>
    <h3>聊表渲染</h3>

    <p v-for="(k, kk) in list">{{ kk }}-{{ k }}</p>
    <div v-for="item in people">
        <h3>姓名：{{ item.name }}</h3>
        <h4>年龄：{{ item.age }}</h4>
        <h5>城市：{{ item.city }}</h5>
    </div>
</template>

<p v-for="(k, kk) in list">{{ kk }}-{{ k }}</p>对于对象的遍历，可以用三个参数<p v-for="(value,item,index) in list">{{ index }}-{{ item }}-{{ value }}</p>

使用v-bind对遍历的数据加key属性可以减少更新数据时的内存消耗（使用唯一索引id）

事件处理

我们可以使用v-on指令(简写为 @)来监听DOM事件，并在事件触发时执行对应的JavaScript。

<script>
export default {
    data() {
        return {
            count: 0
        }
    }
}
</script>

<template>
    <h3>事件处理--内联方式</h3>

    <button @click="count++">Add</button>
    <p>{{ count }}</p>
    <button @click="count--">Sub</button>
</template>

事件参数

vue中的event对象就是原生JS中的Event对象

<script>
export default {
    data() {
        return {
            names: ["Shyee", "Judy", "Lissa"]
        }
    },
    methods: {
        getNameHandler(msg, e) {
            console.log(msg)
            console.log(e)
        }
    }
}
</script>

<template>
    <h3>事件处理--参数传递</h3>
    <p @click="getNameHandler(item, $event)" v-for="(item, index) in names" :key="index">{{ item }}</p>
</template>