Vue 基础入门

Vue HTML 指令

<div v-text="name">渲染文本</div>
<div v-html="html">渲染 HTML</div>
<div v-bind:id="id">动态属性绑定</div>
<div :id="id">动态属性绑定简写</div>
<div>{{可以写表达式}}</div>
<div v-show="true">显示隐藏</div>
<div v-if="error">显示隐藏</div>
<div v-once>只渲染一次</div>
<div :[key]="vaule">动态属性名绑定</div>
<div v-on:click="add">设置事件（点击）</div>
<div @click="add">设置事件（点击）简写</div>
<div @[key]="add">设置动态事件</div>
<div @click.prevent="add">修饰符，阻止默认行为</div>
<div @click="add($event,30)">参数传递</div>

Vue JavaScript 代码

const app = Vue.createApp({
    data() { // 数据
        return {
            numberA: 1,
            numberB: 2,
            tip: ''
        }
    },
    watch: { // 监听   
        numberA(newValue, oldValue) {
            console.log('number', newValue, oldValue)
        },
        numberB(newValue, oldValue) {
            console.log('number', newValue, oldValue)
        }
    },
    computed: { // 计算属性
        errorA() {
            const message = this.number == 0 ? '不小于 0' : (this.number == 10 ? '不大于10' : '')
            if (message) return this.tip + message
        },
        errorB: {
            get() {
                const message = this.number == 0 ? '不小于 0' : (this.number == 10 ? '不大于10' : '')
                if (message) return this.tip + message
            },
            set(tip) {
                this.tip = tip
            }
        }
    },
    methods: { // 方法
        add(event) {
            this.error = '提示：'
            if (this.number < 10) this.number++
        },
        desc(event) {
            this.error = '警告：'
            if (this.number > 0) this.number--
        }
    }
})
const vm = app.mount('#app') 

Vue 动态样式

<div class="sa" :class="{ colorA: action, backerA: action }">{{ title }}</div>
<div class="sa" :class="['colorA','backerA']">{{ title }}</div>
<div class="sa" :class="[{colorA:action,backerA:action}]>{{ title }}</div>

export default {
    data() {
        return {
            classListA: {
                currentA: true,
                saA: true
            }
            classListB:{
                currentB: true,
                saB: true
            }
        }
    },
    computed:{
          classListC(){
            return{
                currentB: true,
                saB: true
            }
        }
    }
}

组件样式与 Style 行级样式

在组件内部有多个组件的情况下，选择默认的接受样式的节点

<section :class="$attrs.class"></section>

意识到样式也是可以绑定的就行

<section :style="style">Good</section>

v-if 与 v-show 使用区分

<template>
    <template v-for="(lesson, index) in lessons" :key="index">
        <div v-if="lesson.isDelete" :style="style">{{ lesson.name }}</div>
        <div v-else>{{ lesson.name }}</div>
    </template>
</template>

v-if 不渲染 Dom 元素，v-show 通过样式控制。

v-show 不能使用在 template 之上

v-for 使用细节

可以遍历纯数字、数组、对象

小案例

<template>
    <div class="A">
        <button @click="this.orderBy = 'fraction'" 
        :class="{ 'orderBy': orderBy == 'fraction' }">分数</button>
        <button @click="this.orderBy = 'good'" 
        :class="{ 'orderBy': orderBy == 'good' }">善良值</button>
        <button @click="this.orderType = 'asc'" 
        :class="{ 'orderType': orderType == 'asc' }">升序</button>
        <button @click="this.orderType = 'desc'" 
        :class="{ 'orderType': orderType == 'desc' }">降序</button>
        {{ orderBy }}
        {{ orderType }}
        <template v-for="lesson in lessonLists" :key="lesson.id">
            <div class="name">{{ lesson.name }} - fraction:{{ lesson.fraction }} - good:{{ lesson.good }}</div>
        </template>
    </div>
</template>

<script>
export default {
    data() {
        return {
            lessons: [
                { id: 1, name: 'XiaoHong', isDelete: true, fraction: 75, good: 2134 },
                { id: 2, name: 'xiaoLv', isDelete: false, fraction: 180, good: 3672 },
                { id: 3, name: 'xiaoGang', isDelete: true, fraction: 90, good: 1343 }
            ],
            orderBy: 'fraction',
            orderType: 'asc'
        }
    },
    computed: {
        lessonLists() {
            return this.lessons.sort((a, b) => {
                if (this.orderType == 'asc') {
                    return a[this.orderBy] - b[this.orderBy]
                } else if (this.orderType == 'desc') {
                    return b[this.orderBy] - a[this.orderBy]
                } else {
                    console.log('排序异常')
                }

            })
        }
    }
}
</script>

<style scoped>
.orderBy {
    background-color: red;
}

.orderType {
    background-color: aqua;
}
</style>

关于 event 事件

<button @click="this.orderBy = 'fraction', sum($event, 1, 2, 3)"
        >FractionShort</button>

methods: {
    sum(event, ...args) {
        console.log(event)
    }
},

事件修饰符

@click.stop  //阻止单击事件继续传播
@click.capture //添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理。
@click.stop.prevent //修饰符可以串联
@click.self //只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的。
@click.once //只执行一次
@click.passive //无视所有默认行为的拦截，即不判断代码部分是不是有拦截。
@submit.prevent //提交事件不再重载页面
// ctrl alt shift meta
// enter esc space delete up down left right
@keyup.esc //按下特定按键触发
@click.alt.exact //按住特定按键，点击鼠标触发

表单操作

<input type="checkbox" v-model="afIsPost" true-value="yes" false-value="no">
<input type="checkbox" v-model="afLesson" value="PHP">PHP
<input type="checkbox" v-model="afLesson" value="Linux">Linux
<input type="radio" v-model="afRadio" value="男">男
<input type="radio" v-model="afRadio" value="女">女
<input type="radio" v-model="afRadio" value="🏳️‍🌈">🏳️‍🌈
<select v-model="afCaty" multiple>
    <option value>请选择</option>
    <option value="BeiJing">北京</option>
    <option value="ShangHai">上海</option>
    <option value="WuHan">武汉</option>
</select>
<input type="text" v-model.lazy="afgoodA"> <!-- 光标离开后才处理 -->
<input type="text" v-model.number="afgoodB"><!-- 设置值为数字 -->
<input type="text" v-model.trim="afgoodC"><!-- 去除两端空格 -->