vue 2.x 学习笔记(第二课)(浅谈MVVM模式、安装vue)

本文详细介绍了MVVM模式下的开发流程,包括视图创建、ViewModel构建及数据关系模拟。并通过Vue.js实例演示了如何从PSD到HTML实现视图,分析视图属性和交互方法,最终创建数据模型。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1,mvvm模式的开发

基于mvvm的框架在前端领域还是蛮多的。

例如:kockoutjs,angular,vue,avalonjs,mina等等。

那么,mvvm模式下的开发要如何进行,基本为以下3个步骤:

  1. 创建视图(view)PSD-HTML
  2. 根据view来创建这个视图的viewmodel。有两个创建的技巧。1,根据视图的属性分析出不同的数据。2,根据视图上的交互方法。
  3. 根据viewmodel中的属性类型建立数据关系从而模拟数据接口。
<!--step1: 创建视图 view-->
<div id="#app">
    <h1>{{title}}</h1>
</div>
<script>
//step2 : 分析视图,构造view的数据模型
        let title = "hello vue";
 //step3 : 把这个分析的结果把在vue中,针对view创建一个viewmodel
        let v1 = new Vue({
            el:"#app",
            data:{
                title:"hello vue"
            } 
        })
</script>

2,安装vue

一般比较简单和方便的方式是使用bower安装。bower是一个有点类似npm的包管理器。

首先在cmd中键入命令 npm install bower -g,全局安装bower。全局安装后,我们就可以在任何路径的生产环境下直接cmd键入命令 bower install vue,就可以完成vue的安装。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值