dawsonenjoy
dawsonenjoy

Vue 基本使用

特点

1.基于MVVM模式（Model-View-ViewModel），中间通过viewmodel层实现了双向绑定，其作为中间层会去监控后端数据的变化，并根据数据的变化去更新对应的前端展示内容，因此使用该框架就只需要操作数据而不用再通过操作DOM来手动更新视图。（JQuery框架由于需要频繁操作DOM，所以会降低性能）
2.模块化开发和虚拟DOM（减少真实DOM操作，在内存中模拟DOM操作，提升前端渲染效率）

理解Vue当中的双向绑定

通过下面的例子来了解为何说Vue实现了双向绑定，因此只需操作数据而无需关心其他：


    

        
    你是：{{name[n-1]}}

在上面的代码中使用for循环依次将data里的name打印出来，并且当修改表单中的值时，对应显示的数据以及name里的数据也会同时更改，可以看出页面会动态监听name数据的变化，同时当表单值发生变化时也会动态修改name里的值。
再比如依次执行下面的语句：

app.name.push(444)
app.name.push(555)
app.name.pop()

可以看出是对name数组进行数据插入和弹出操作，期间也可以看见页面显示的数据在不断地修改

MVVM

Model：模型层，表示JavaScript对象
View：视图层，表示DOM
ViewModel：连接视图和模型的中间件，Vue主要就是这层的实现者，其核心就是实现了DOM监听和数据绑定（Ajax请求与后端进行数据交互，并根据数据变化更新前端视图展示；同时也监听前端视图的变化，并通知后端数据的改变）。

配置环境

非常好用的一个前端框架，配置方法和jquery之类的相似，都是引用vue的源文件就行，地址：
https://www.bootcdn.cn/vue/
一般选择标准版：https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js
将js代码导入即可使用，比如下面代码：

使用步骤

（1）导入vue.js
（2）导入自己写的js文件
（3）实例化一个Vue对象，设置id键为el（element），数据都以对象形式保存在data键里，函数则保存在methods键里
（4）一般调用时通过id绑定，data里的数据通过{{ 属性 }}来读取
举例：


    

        {{name}}

可以设置属性data并将对象存放到该值里，也可以将data设置为一个函数，举例：


    

        {{name}}

Vue对象常用属性

官方api：https://cn.vuejs.org/v2/api/

el

element，代表元素，实例化vue类的id

data

存放数据

methods

存放函数，举例：


    

         {{cde()}}
computed

监测并计算值，虽然methods也可以进行计算，但是computed会进行缓存，效率更高，并且监测的值是在computed当中定义的而非data里的属性值，当值没发生变化时则保存缓存的结果，否则重新计算，举例：


    

        
{{sum}}
watch

也是监听监听值，但监听的是data里属性值的变化，功能上和computed有点像，举例：


    

         {{ num }}:{{ count }}

其还可以通过deep属性监听对象的变化，举例：

watch: {
  o: {
    handler: function(new_val, old_val) {
      ...
    },
    deep: true
  }
}

更多watch内容以及和computed区别参考：https://blog.csdn.net/weixin_43837268/article/details/92769669

mixins

可以引入对象里的属性，从而实现对象属性复用，比如定义一个对象存放很多data和methods，然后就可以在很多Vue对象里通过mixins属性引入复用属性（一般出现同名冲突时，mixins的一般会被覆盖；如果同名冲突的是钩子函数，那么就是先执行mixins中的钩子函数，然后再执行本身的钩子函数），举例：


    

        {{name}}
        
    

    

        {{name}}

全局引入：可以通过Vue.mixin({...})进行全局引入，此时所有基于该Vue对象创建的实例都将被加上该内容，举例：

Vue.mixin({
  mounted: function() {
    console.log(this.name);
    // 所有实例挂载完成后都会属性其name
  },
  data: () => ({
    a: 100
  })
});

生命周期

beforeCreate

在创建对象之前执行，可以做一些比如加载动画等

created

在创建对象之后、dom加载完成前执行，可以异步获取一些数据

beforeMount

在虚拟dom中执行编译模板中，dom还未生成

mounted

编译模板完成，此时页面内容将显示出来，此时dom生成完成

beforeUpdate

在组件更新事件前执行

updated

在组件更新事件后执行

beforeDestory

在销毁事件前执行

destoryed

在销毁事件后执行

多组件时生命周期顺序
同步父子组件
  • 加载顺序：
    父beforeCreate -> 父created -> 父beforeMount -> 子1beforeCreate -> 子1created -> 子1beforeMount -> 子2beforeCreate -> 子2created -> 子2beforeMount -> ... -> 子1mounted -> 子2mounted -> ... -> 父mounted
  • 更新顺序：
    父beforeUpdate -> 子1beforeUpdate -> 子2beforeUpdate -> 子2updated -> 子1updated -> ... -> 父updated
  • 销毁顺序：
    父beforeDestroy -> 子1beforeDestroy -> 子1destroyed -> 子2beforeDestroy -> 子2destroyed -> ... -> 父destroyed
同步同级组件
  • 多个同级组件加载顺序：
    同级1beforeCreate -> 同级1created -> 同级1beforeMount -> 同级2beforeCreate -> 同级2created -> 同级2beforeMount -> ... -> 同级1mounted -> 同级2mounted -> ...
  • 多个同级组件更新顺序：
    同级1beforeUpdate -> 同级2beforeUpdate -> 同级2updated -> 同级1updated -> ...
  • 多个同级组件销毁顺序：
    同级1beforeDestroy -> 同级1destroyed -> 同级2beforeDestroy -> 同级2destroyed -> ...
异步父子组件
  • 加载顺序：
    父beforeCreate -> 父created -> 父beforeMount -> 父mounted -> 父beforeUpdate -> 子1beforeCreate -> 子1created -> 子1beforeMount -> 子1mounted -> 父updated -> 父beforeUpdate -> 子2beforeCreate -> 子2created -> 子2beforeMount -> 子2mounted -> 父updated -> ...
  • 更新顺序：和同步一样
  • 销毁顺序：和同步一样
异步同级组件
  • 多个同级组件加载顺序：
    同级1beforeCreate -> 同级1created -> 同级1beforeMount -> 同级1mounted -> 同级2beforeCreate -> 同级2created -> 同级2beforeMount -> 同级2mounted -> ...
  • 多个同级组件更新顺序：和同步一样
  • 多个同级组件销毁顺序：和同步一样
代码示例
  • 父组件
  • 子组件1：
  • 子组件2：

参考：https://blog.csdn.net/weixin_39147099/article/details/82956439

this下对象

$refs

绑定DOM对象，代替了原生的documentByxxx的方法，举例：

指令

一般写在标签里，和属性的使用比较像，Vue里很多指令有自带功能，比如v-model能够获取当前表单的值，v-show表示值为空时不显示标签，举例：


    

        
        你是：{{name}}
v-model

绑定表单和变量的值，前面例子就是一直基本用法，其下还有一些常用属性，比如：lazy——一般情况下表单的值和变量值会实时同步更新，但是设置lazy后，只有当鼠标点击表单外部时，变量的值才会更新；trim——把头和尾的空格都删掉再存到变量里；number——把值变成num型存到变量
注：
v-model只在/