Vue是什么?什么是MVVM?

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了。

  • 9
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cssl-虞老师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值