Vue基本概述

基本概述

1.vue介绍

  • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架

  • 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。

  • Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

  • Vue结合使用了Angular的模块化开发和React的虚拟DOM技术

  • 当与现代化的工作链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

2.vue基本使用

创建实例

var vm = new Vue({
  // options
})

数据定义

#第一种直接内部声明
var vm=new Vue({
    el:"id元素选择或class元素选择",
    data:{
    	example1:'',
    	example2:''
    }
})
#第二种直接外部声明
var user={name:'jhy',age:20,sex:'男'}
var vm=new Vue({
    el:"#id",
    data:user
})

数据获取

{{vm.example1}}
{{vm.name}},{{vm.age}},{{vm.sex}}

数据修改

vm.example1='newValue'

数据冻结(数据不可改变)

Object.freeze(data)

数据表达式

{{ number + 1 }}
{{ ok==true ? 'YES' : 'NO' }}
{{ message.split('').reverse().join(',') }}
{{ string+'1' }}

3.vue生命周期

Vue基本概述

钩子函数用来描述Vue实例从创建到销毁的整个生命周期

beforeCreate:function(){
	#在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
},
created:function(){
	#在实例创建完成后被立即调用,然而,挂载阶段还没开始,$el property 目前尚不可用。
},
beforeMount:function(){
	#在挂载开始之前被调用:相关的 render 函数首次被调用。
},
mounted:function(){
	#实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了
},
beforeUpdate:function(){
	#数据组件更新前调用,发生在虚拟 DOM 打补丁之前
},
updated:function(){
	#数据组件更新后调用,数据更改导致的虚拟 DOM 重新渲染和打补丁
},
activated:function(){
	#被keep-alive缓存的组件激活时调用。
},
deactivated:function(){
	#被keep-alive缓存的组件停用时调用。
},
beforeDestroy:function(){
	#实例销毁之前调用,在这一步,实例仍然完全可用。
},
destroyed:function(){
	#实例销毁后调用。
}
上一篇:vue学习---非单文件组件初步学习


下一篇:List多个字段去重