1.Vue基础

1. 指令

1.1. 内置指令

--v-bind:value=""   //:,单项绑定
--v-model=""    	//双向绑定，只能应用在表单类元素上（存在输入，有value值）
--v-on:click=""    	//@click=
--v-show="true"		//为true表示显现，为false表示隐藏；===display: none;
--v-if="false"		//条件渲染,不同于v-show,v-if会直接把节点删除
--v-for=""			//详见7.1
其他：
--v-text=""			//向其所在节点中渲染文本内容，会直接替换掉节点中本来的内容
--v-html=""			//与v-text类似，只不过可以渲染包括html结构的内容（标签等）
--v-cloak			//本质是一个特殊属性,没有值，Vue实例创建晚报后，会删除掉v-cloak属性，可以用于解决网速慢是页面展示出{{xxx}}的问题
--v-once			//只动态渲染一次，以后数据的改变不会引起v-once所在结构的更新
--v-pre				//跳过其所在节点的编译过程，可以用于跳过那些没有使用指令、插值的节点，加快编译，提高效率

1.2. 自定义指令

1.2.1. 函数形式

• directives:{} //也是一个配置对象，与el,data平级
• 在这里面写函数，这个函数就是自定义指令的名称，不过没有v-
• 在函数里面可以通过innerText等原生js渲染页面
• 函数会有两个参数，分别是该指令绑定的dom元素element和传入的值binding
• 该函数何时会被调用：1.指令与元素成功绑定时；2.指令所在的模板被重新解析时

1.2.2. 对象形式

用于在特定时间点调用特定函数

bind() 指令与元素成功绑定时；inserted()//指令所在元素被插入页面时；update()//指令所在的模板被重新解析时

1.2.3. 注意事项

• 指令名称不能用驼峰命名法命名，可以用 ’ - ’ 隔开，方法名用 ‘’ 包裹起来（对象里的key）
• 指令里面的函数的this都是window，而不是vm

---

2. 数据代理

2.1. defineProperty方法

Object.defineProperty(person,'age',{value:18})

​ 以这种方式添加的属性不参与遍历（不可枚举）

• 可以在对象中添加一个属性使其可遍历：enumerable: true

• writable: true, //可以控制属性是否可以被修改

• configurable: true //控制属性是否可以被删除

• get: function(){ return number } //实现动态数据

• set(value){ number = value } //实现双向数据绑定

2.2. 定义

通过一个对象代理对另一个对象中属性的操作（读/写）

2.3. Vue中的数据代理

通过vm对象来代理data对象中属性的操作

Object.defineProperty(vm,'name',{
    get(){return data.name},  //获取时调用
    set(value){data.name=value} //修改时调用
})

---

3. 事件处理

3.1. 事件指令

@click		//鼠标点击
@scroll		//滚动条滚动
@wheel 		//鼠标滚轮滚动
@keyup		//键盘松开，keydown表示键盘按下，一般只需一个就可以了

3.2. 事件修饰符

@click.prevent 阻止点击事件的默认行为，例如a标签的跳转地址

类似的还有:

• prevent: 阻止默认事件

• stop: 阻止事件冒泡

• once: 事件只触发一次（触发一次之后就失效）

• passive: 事件的默认行为立即执行，无需等待事件回调执行完毕

  可以连续写（同时完成两个功能）：@click.prevent.stop

3.3. 按键别名

@keyup.enter="" 表示按下回车键之后触发事件

也可以连着写，@keyup.ctrl.y表示两个按键一起按的时候才触发

类似的还有：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IsSqEpGg-1634968967671)(C:\Users\30832\AppData\Roaming\Typora\typora-user-images\image-20211013151107845.png)]

event.keyCode表示按键编码值，key表示按键名

---

4. 计算属性

//写在Vue实例对象中，与el,data平级
computed:{
    fullName:{
        //get的作用：当有人读取fullName时，get就会被调用，且返回值就作为fullName的值；有缓存，当所依赖的数据发生变化时，再次被读取（刷新）
        get(){
            return this.firstName+this.lastName //this被改成了vm
        }
        set(value){
            const arr = value.split('-')
            this.firstName = arr[0]
            this.lastName = arr[1]
        }
    }
}

---

5. 监视属性

//与el,data平级
watch:{
    isHot:{
        //当isHot发生变化时就会调用handler
        handler(newValue,oldValue){
            console.log("isHot被修改了",newValue,oldValue)
        },
        immediate:true,  //开始就调动一次handler
        deep:true, //开启深度监视
    }
}

或者：vm.$watch('isHot',{})

5.1. 深度监视

• 方法一：要监视numbers里面的a，需要这样写：'numbers.a' ,不能省略 ''

• 方法二：在监视属性numbers里面添加：deep:true, 开启深度监视

5.2. 计算属性vs监视属性

当两者都能实现时，选择计算属性；当需要异步操作时，只能选择监视属性

因为计算属性是一个返回值，难以实现异步操作

---

6. 绑定样式

6.1. 绑定class样式

• 字符串写法，适用于：样式的类名不确定，需要动态指定；:class="mood"

• 数组写法，适用于：要绑定的样式个数不确定、名字也不确定；:class="arr" arr是一个数组

• 对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用；

  :class="obj"
  //在data中添加一个obj属性
  obj:{
      class1:false,  //用布尔值确定是否用
      class2:ture
  }
  

6.2. 绑定style样式

:style="styleObj" styleObj:{ fontSize : ‘40px’ }

---

7. 列表渲染

7.1. 基本列表(v-for)

• 加在谁身上就能遍历谁，加在li上就会有几列，可以遍历数组

  v-for="p in persons" :key="p.id"

  或者：v-for="(p,index) in persons" :key="index"

  key是虚拟DOM对象的标识，加上key有助于虚拟DOM对比，利于复用，提高效率

• 也可以遍历对象v-for="(value,key) in car"

• 甚至可以遍历字符串

• 遍历数字(指定次数) v-for="number in 5" //从1到5

7.2. 列表过滤

• watch实现：

  关键字：filter, indexOf, handler, immediate

  this.persons.filter((p)=>{ return p.name.indexOf(val) !== -1 })

  注意原数据最好不要直接改，用另一个代替

• computed实现：

  computed:{
      persons2:{
          get(){
              return this.persons.filter((p)=>{
                  return p.name.indexOf(val) !== -1
              })}}}
  

7.3. 列表排序

arr.sort((a,b)=>{
    return a-b; //升序，b-a表示降序
})

都写在computed里，这样改了任何用到的东西时，都会重新计算

7.4. Vue.set的使用

用于向vue实例里添加一个属性

• 写在methods里：Vue.set(this.student,'sex','男')

• 或者写在vue实例外面：vm.$set(vm._data.student,'sex','男')

• 如果target指向的是一个数组，那第二个参数可以是一个数字，代表第几个元素，实现更改操作

7.5. 数组的更改

更改数组不能直接通过索引值更改，否则不会引起页面的响应式变化；应当改用push,pop,shift,unshift,splice,sort,reverse方法；filter等非变更方法要将过滤之后的新数组替换掉原来的旧数组，因为其不会影响原数组，也就不会引起数据监测。

vue的push和Array的push函数不是同一个（包装了一下，加了重新解析模板这一步）

---

8. 收集表单数据

• 若type=“text”，则v-model收集的是value值，用户输入的就是value值

• 若type=“radio”，则v-model收集的是value值，且要给标签配置value值

• 若type=“checkbox”

  • 没有配置input的value属性，那么收集的就是checked(布尔值)

  • 配置了value属性，且v-model双向绑定的那个值的初始值是数组，那么收集的就是value值组成的数组

• v-model的三个修饰符：

  • lazy: 用于textarea，失去焦点在收集数据
  • number: 输入字符串转为有效的数字
  • trim: 对输入进行首位空格过滤

---

9. 过滤器

filters与el,data平级

• 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}

• 使用过滤器：{{ xxx | 过滤器名 }} 或 v-bind:属性 = "xxx | 过滤器名"

• 过滤器也可以接受额外参数、多个过滤器也可以串联；过滤器并没有改变原本的数据，是产生新的对应的数据

---

10. 生命周期

10.1. 生命周期钩子(函数)

是Vue在关键时刻帮我们调用的一些特殊名称的函数；而且this指向是vm

create, mount, update, destroy；分别对应beforeCreate,created…共8个生命周期函数

与el,data平级

10.2. 创建(created)

完成了创建数据监测与数据代理后调用created函数

10.3. 挂载(mounted)

完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted函数

做一些初始化的事：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作

10.4. 更新(updated)

当data里面数据发生改变后调用

10.5. 销毁(destroyed)

销毁后调用

一般会在beforeDestroy函数里执行一些收尾操作：关闭定时器，取消订阅···

销毁后自定义事件会失效，但原生DOM事件依然有效；

一般会不会在这里面操作数据，因为几遍操作数据，也不会触发更新了