Vue基础

指令

🥝指令基础

指令以v-为前缀的属性

指令可以接受一个单句表达式(除了v-for,v-on)

v-???:参数=""

<tag v-on:click="clickFunction"></tag>

v-???:[动态参数]=""

<tag v-on:[eventType]="eventFunction"></tag>

🥝指令语法糖

v-bind:等价于:

v-on:等价于@

🥝指令修饰符

插值

双花括号内输入插值变量(单个js表达式)

<tag>{{ msg }}</tag>
<tag>{{ (conditions) ? msgT : msgF }}</tag>

使用v-once指令数据只响应一次

<tag v-once>{{ msg }}</tag>

使用v-html指令插入html代码

<tag v-html="htmlCode"></tag>

使用v-bind指令绑定标签属性值

<tag v-bind: title="titleMsg"></tag>

data选项

const app = {
    data() {
        // 业务处理
        return {  } // 返回需求内容对象
    }
}

methods选项

this指向组件实例

const app = {
    methods: {
        methodOne(){
            // 业务处理
        },
        methodTwo(){
            // 业务处理
        },
        // ......
    }
}

computed选项

当数据没有变化时返回缓存

watch选项

被侦听数据改变时执行

const app = {
    data() {
        let msg = 'Jonathan'
        return { Jonathan }
    },
    watch: {
        msg(oldMsg, newMsg){
            // 业务代码
        }
    }
}

绑定class

用v-bind:class=""指令来绑定动态class属性

🥬对象绑定

<tag :class="{ className1 : isTrue1 }"></tag>

const app = {
    let isTrue1 = // 是否应用className1
    return { isTrue1 }
}

可绑定多个类

<tag :class="{ className1 : isTrue1, className2 : isTrue2, ... }"></tag>

🥬数组绑定

绑定内联style

vue可自动匹配css前缀

条件渲染

🍉v-if系列指令

可用v-if,v-else-if,v-else指令来指定不同条件下的显示组件

v-if初始化不会全部渲染,故初始化开销较小,但频繁切换开销大不适合频繁切换的组件

<div v-if=" ch >= 'a' && ch <= 'z' ">
    <span>ch是小写字符</span>
</div>
<div v-else-if=" ch >= 'A' && ch <= 'Z' ">
    <span>ch是大写字符</span>
</div>
<div v-else-if=" ch >= '0' && ch <= '9' ">
    <span>ch是阿拉伯数字</span>
</div>
<!-- ...可多个v-else-if -->
<div v-else>
    <span>ch既不是字母也不是阿拉伯数字</span>
</div>

🍉v-show指令

v-show会全部渲染后再改变css来条件显示组件

v-show初始化开销大,适合应用于需频繁切换的组件

<div v-show=" ch >= 'a' && ch <= 'z' ">
    <span>ch是小写字符</span>
</div>
<div v-show=" ch >= 'A' && ch <= 'Z' ">
    <span>ch是大写字符</span>
</div>
<div v-show=" ch >= '0' && ch <= '9' ">
    <span>ch是阿拉伯数字</span>
</div>

列表渲染

v-for="item in/of items"指令

🥦遍历正整数

从1开始遍历

<tag v-for="i of n"></tag>

🥦遍历数组

可选两个参数(value[值], index[索引])

<tag v-for="(value, index) of ['a', 'b', 'c']">第{{ index }}个元素是{{ value }}</tag>

🥦遍历对象

可选三个参数(value[值], key[键名], index[索引])

<tag v-for="(vlaue, key, index) in obj">{{ index }}-{{ key }}:{{ value }}</tag>

事件监听

v-on:event="method"指令绑定事件

<tag v-on:click="count++">{{ count }}</tag>

缩写

<tag @click="count++">{{ count }}</tag>

绑定多个事件

<tag @click="count++, count *= 2">{{ count }}</tag>

🍠事件修饰符

<!-- 阻止单击事件继续冒泡 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

🍠按键修饰符

🍠事件名

表单绑定

v-model指令实现双向绑定

中文等拼写时不会绑定

<input type="text" v-model="msg" />
<p>
    Your input is {{ msg }}
</p>

🥑复选元素

对于复选元素v-model返回一个数组

🥑修饰符

v-model.lazy                 // 确认时再渲染
v-model.number               // 用parseFloat()转数字,失败则返回原始值
v-model.trim                 // 去除格式符