第二章 vue常用指令

v-bind

绑定属性

v-bind :绑定属性，属性值在js环境中。简写冒号 :

• 原生属性class、style等
• 自定义属性，子组件中props接收

class

<!-- :class和class可以共存 -->
<div :class="className1" class="className2"></div>
<!-- 对象形式 -->
<div :class="{className1:bool1,className2:bool2}"></div>
<!-- 数组形式，可以嵌套对象、三元表达式 -->
<div :class="['className1','className2',bool3?className3:'']"></div>

style

<!-- 对象形式 -->
<div :style="{color:'red',backgroundColor:'pink'}"></div>
<!-- 数组形式 这些对象会被合并后渲染到同一元素上-->
<div :style="[styleObj1,styleObj2]"></div>

动态属性名

<!-- 动态绑定属性名、动态事件名 -->
<div :[attr_name]="'aaa'" @[event_name]="handleSomeEvent()"></div>

绑定一个对象

<!-- 绑定对象 -->
<!-- 将对象infos对象的所有键值对绑定到元素、组件上 -->
<div v-bind="infos"></div>

v-model

双向数据绑定

v-model :双向数据绑定

<input type="text" v-model="textVal">
<!-- $event vue提供的事件对象 -->
<input type="text" :value="textVal" @input="textVal = $event.target.value">

表单

输入框text、password、textarea，v-model绑定的是输入值

单标签radio、checkbox，v-model绑定的是value属性的值

双标签select，v-model绑定的是option标签内的值或value属性的值

<template>
  <div>
    <input type="text" v-model="name">
    <p>{{ name }}</p>

    <input type="password" v-model="pwd">
    <p>{{ pwd }}</p>

	<!-- select元素添加multiple属性为多选，否则为单选 -->
    <select v-model="hobbies">
      <option value="sing">唱</option>
      <option value="dance">跳</option>
      <option value="rap">说唱</option>
    </select>
    <p>{{ hobbies }}</p>


    <label>
      男 <input type="radio" name="sex" value="male" v-model="gender">
    </label>

    <label>
      女 <input type="radio" name="sex" value="female" v-model="gender">
    </label>
    <p>{{ gender }}</p>


    html<input type="checkbox" value="h" v-model="skills">
    css<input type="checkbox" value="c" v-model="skills">
    <p>{{ skills }}</p>

    <textarea cols="30" rows="10" v-model="desc"></textarea>
    <p>{{ desc }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      pwd: '',
      hobbies: '',
      gender: '',
      skills: [],
      desc: ''
    }
  },
}
</script>
<style lang="less"></style>

修饰符

.lazy 本质将input事件变为change事件

.number

.trim 去除输入的首尾空格

<template id="my-app">
    <h2>{{inputVal}}--{{typeof inputVal}}</h2>
    <input type="number" name="" id="" v-model.lazy.number="inputVal">
</template>

v-on

绑定事件

v-on :绑定事件，简写@

• 绑定原生事件click等
• 绑定自定义事件，子组件抛出(emit)自定义事件，父组件实现自定义事件

<!-- 1.绑定一个事件-->
<div v-on:click="handleClick"></div>

<!-- 2.绑定多个事件 -->
<!-- v-on的对象语法不支持修饰符 -->
<div v-on="{click:foo,mousemove:foo2}"></div>
<!-- 等价于 -->
<div @click="foo" @mousemove="foo2"}"></div>

<!-- 无参函数的第一个参数默认是事件对象event -->
<button @click="foo1"></button>

<!-- 带参函数手动传入事件对象 -->
<!-- 方式1：传入$event参数名（必须为$event这个特殊变量） -->
<button @click="foo2(1,2,$event)"></button>
<!-- 方式2：箭头函数 -->
<button @click="(event)=>foo2(1,2,$event)"></button>

事件修饰符

支持链式编程，多个修饰符同时使用

• .lazy：输入框失焦时才会更新v-model的值
• .trim：讲v-model绑定的值首位空格给去掉
• .number：将v-medol绑定的值转数字
• .prevent：阻止默认事件
• .stop：阻止事件冒泡
• .capture：事件的捕获
• .self：只有事件从元素本身发出才触发处理函数
• .once：事件最多触发一次
• .native：给组件的最外层绑定原生事件
• .left、.middle、.right：鼠标左中右键的触发
• .passive：事件的默认行为立即执行，无需等待事件回调执行完毕；相当于给移动端滚动事件加一个.lazy
• .camel：确保变量名会被识别成驼峰命名
• .sync：简化子修改父值的步骤

按键修饰符

1. Vue中常用的按键别名：
   .enter
   .delete (捕获“删除”和“退格”键)
   .esc

   .space
   .tab (特殊，必须配合keydown去使用)
   .up
   .down
   .left
   .right

2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为短横线命名

3. 系统修饰键（用法特殊）：ctrl、alt、shift、meta
   (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
   (2).配合keydown使用：正常触发事件。

4. Vue.config.keyCodes.自定义键名 = 键码，可以去自定义按键别名

<!-- 
	组合键ctrl+shift+y
-->
<input type="text" @keyup.ctrl.shift.y="foo">

v-for

遍历

v-for :遍历的数据可以来自 data或prop或computed

​ 可以遍历 数组、对象、字符串、数字、可迭代对象

<!-- 数组 -->
<div v-for="(item, index) in items"></div>

<!-- 对象 -->
<div v-for="(value, key) in object"></div>
<div v-for="(value, key, index) in object"></div>

<!-- 数字 -->
<div v-for="n in 10">{{ n }}</div>

<!-- 字符串 -->
<div v-for="ch in 'abc'">{{ ch }}</div>

v-for和和v-if

<template id="my-app">
    <ul>
        <!-- 
    		v-for不能和v-if在同一元素上
			同一元素上v-if的优先级比v-for高
    	-->
        <template v-if="Object.keys(infos).length">
            <li v-for="(value,key,index) in infos" :key="index">{{index}}-{{key}}-{{value}}</li>
        </template>

        <template v-else>
            <li>没有数据</li>
        </template>
    </ul>
    
    <ul>
      <template v-for="(item, index) in books">
         <li :key="item.id" v-if="item.flag">
           《{{ item.bookName }}》
         </li>
       </template>
	</ul>
</template>

key属性

1. 没有key
   
2. 有key（尽可能复用旧结点）
   

key属性：减少不必要的结点更新，高效更新虚拟DOM。

重新加载某个组件方法：改变key值

数组更新检测

1. 修改了原数组：

push() pop()

shift() unshift()头部插入元素

splice( index, [len], [e1], [e2],… )

• 从index开始删除len长的数组，替换为e1,e2,…

sort()

reverse()

2. 纯函数（没有副作用）：原数组不变，返回新数组

filter( function(element, index, array) { /* … */ }, thisArg )

map( function(element, index, array) { /* … */ }, thisArg )

concat( [e1], [e2],… ) 合并多个数据或数组

slice( [begin], [end] ) 切片，截取下标 [ start,end )的数据

对象更新检测

v-text与v-html

v-text :会替换掉节点中的内容

v-html :会替换掉节点中的内容，解析html

v-if与v-show

v-if : 条件渲染（动态控制节点创建/销毁)，v-else-if，v-else

v-show : 条件渲染 (动态控制节点展示/隐藏)，display:none

​ 不能配合template使用

v-slot

v-slot :用于声明具名插槽或是期望接收 props 的作用域插槽。

v-cloak

v-cloak :没属性值，配合css使用，隐藏尚未完成编译的 DOM 模板，

<style>
    [v-cloak]{
        display:none
    }
</style>
<body>
    <h1 v-cloak>hi</h1>
</body>

v-pre

v-pre :没属性值，跳过当前元素及其后代的编译过程，显示原始的Mustache标签

v-once与v-memo

v-once :没属性值，当前元素及其后代只渲染一次
v-memo :数组中指定某些属性，当这些属性改变时，重新渲染

<!-- 当valueA或valueB改变时，重新渲染 -->
<div v-memo="[valueA, valueB]">
  ...
</div>

<!-- 相当于v-once -->
<div v-memo="[]">
  ...
</div>