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实例从创建到销毁的整个生命周期

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(){
	#实例销毁后调用。
}