1.Vue到底是个什么东西?
很多人在学vue的时候都很困惑这玩意到底是什么为啥要这么写。其实它真的不难只是大家可能被网上的介绍吓住了。我们来看一下某权威网站关于vue介绍的截图如下:
是不是看着就不简单,就不想学?
但其实vue真的是个简单的东西:它就是一个 javascript 语言基于面向对象的一个高级的用法而已?
现在我就来简单说一下:
1. 我们传统的网页是这样的:
看到没:就是我们写的网页就是用户看到的。
2.vue工程中的网页是这样的:
看到不同没:就是用户看到的页面不是程序员写的,而是vue对象生成的。
也就是在写vue的时候和传统的html写法是不一样的,写vue的时候更多是要考虑vue对象怎么写。
3.vue工程中的代码举例:
在一个vue工程中是有一个入口 js 的,叫main.js大家可以看一下它的基本写法就会明白:
import router from './router'
import store from './store'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
有没有看到 new 关键字,这的确就是一个javascript的对象呀。
4. vue对象的生命周期简介:
正是因为vue 是一个javascript对象,因此它也是会有一个产生和销毁的过程(也就是生命周期)。
具体对应如下:
创建前:beforeCreate() 只有一些实例本身的事件和生命周期函数
创建后:created() 是最早使用data和methods中数据的钩子函数
挂载前:beforeMount() 指令已经解析完毕,内存中已经生成dom树
挂载后:mounted() dom渲的数据已经同步
更新前:beforeUptate() 当data的数据发生改变会执行这个钩子,内存中的数据是新的,页面是旧的
更新后:updated() 内存和页面都是新的
销毁前:beforeDestroy() 即将销毁data和methods中的数据此时还是可以使用的,可以做一些释放内存的操作
销毁后:destroyed() 已经销毁完毕
2.什么是MVVM
MVVM是Model-View-ViewModel的简写,它是一种极度优秀的设计模式。它是Vue框架的理论基础。
M: 就是数据,是你要去处理的。
V: 就是视图,给别人看的。
VM: 就是把Model和View关联起来,这个事情就是Vue去干的。
代码举例:
data () {
return {
uobj:{
name:'tom'
}
}
这一段代码就是 M , 是程序员要想办法去操作的。
页面上的显示效果:
这就是V,是给用户看的。
<p>用户名:<input type="text" name="name" v-model.lazy="uobj.name"/></p>
这一段代码其实就是VM,是我们利用vue的语法把数据(M)绑定到要显示的文本框中(V)。
3个联起来就是1个完整的MVVM了。