前端开发--VUE

vue 安装

1. 使用 webpack

   npm install -g @vue/cli
   vue create vue-project
   npm run serve

2. 使用 vite

   npm create vue@leatest
   npm i
   npm run dev

基础语法

创建vue实例

import {createApp} from "vue"
import App from "./App.vue"

createApp(App).mount("#app")
<template>
    <div class="main">
        <p>{{ msg }}</p>
    </div>
</template>
<script lang="ts">
export default {
    data(){
        return {
            msg: "Hello world"
        }
    }
}
</script>
<style>
.main{
    background-color: #ddd;
}
</style>

模板语法

1. 插值

   vue 使用 {{ }} 来表示文本插值

<p>{{ message }}</p>

1. 指令

   指令是带有 v- 前缀，用于在模板种表达逻辑

v-html 解析html代码

<p v-html="text"></p>

v-bind 动态绑定一个或多个属性

<a v-bind:href="url">点击</a>

简写：

<a :href="url">点击</a>

条件渲染

v-if
v-else-if
v-else
v-show

• v-if 与 v-show 的区别

v-if 是真正的条件渲染，因为他会确保在切换过程中条件快内的事件监听器和子组件适当地被销毁和重建

v-if 也是惰性的：如果在初始渲染条件为假，则什么也不做–直到条件第一次变为真时，才会开始渲染条件块

相比之下，v-show 就简单很多–不管初始条件是什么，元素块总是会被渲染，并且只是简单地基于css进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销，因此，如果又需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

使用template标签

<template>
    <div class="main">
        <p v-if="flag">test</p>
        <template v-if="flag">
            <p>1</p>
            <p>2</p>
            <p>3</p>
		</template>
    </div>
</template>
<script lang="ts">
export default {
    data(){
        return {
            msg: "Hello world"
        }
    }
}
</script>
<style>
.main{
    background-color: #ddd;
}
</style>

列表渲染

使用 v-for

<template>
<ul v-for="item in items" :key="item.id">
    <li>{{ item.name }}</li>
</ul>
</template>

<script>
export default{
    data(){
        return{
            items:[
                {
                    id:1001,
                    name: "Lixiney"
                },
                {
                    id:1002,
                    name: "nomo"
                },
                {
                    id:1001,
                    name: "yout"
                }
            ]
        }
    }
}
</script>

如果 items 数据中没有索引，可以使用 index

v-for="(item,index) in items" :key="item.index"

事件处理

v-on 可以简写为 @

eg：

<template>
<button v-on:click="clickHandle">按钮</button>
<!-- <button @click="clickHandle">按钮</button> -->
<p v-show="flag">Hello</p>
</template>

<script>
export default{
    data(){
        return{
            flag: true
        }
    },
    methods:{
        clickHandle(){
            this.flag = !this.flag
        }
    }
}
</script>

事件传参

<template>
<ul v-for="item in items" :key="item.id">
    <li @click="clickMessageHandle(item.name,$event)">{{ item.name }}</li>
</ul>
<button v-on:click="func">按钮</button>
<!-- <p v-show="flag">Hello</p> -->
</template>

<script>
export default{
    data(){
        return{
            items:[
                {
                    id:1001,
                    name: "Lixiney"
                },
                {
                    id:1002,
                    name: "nomo"
                },
                {
                    id:1001,
                    name: "yout"
                }
            ],
            flag: true
        }
    },
    methods:{
        func(){
            this.flag = !this.flag
        },
        clickMessageHandle(data,e){
            console.log(data,e)   // 如果没有传参则event可以使用
        }
    }
}
</script>

事件修饰符