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只在/