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