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,
        }
    },
    watch: {
        // 监听
        numberA(newValue, oldValue) {
            console.log('number', newValue, oldValue)
        },
        numberB(newValue, oldValue) {
            console.log('number', newValue, oldValue)
        },
    },
    computed: {
        // 计算属性
        errorA() {
            if (message) {
                return this.tip + message
            }
        },
        errorB: {
            get() {
                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')

v-if 与 v-show

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

v-show 不能使用在 template 之上

v-for

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

关于 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" />