初识Vue

最新推荐文章于 2022-02-27 01:08:25 发布

噢，我明白了

最新推荐文章于 2022-02-27 01:08:25 发布

阅读量149

点赞数 2

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_38980678/article/details/114290351

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.认识VUE

1.什么是VUE

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

更多详情可点击下方链接查看
https://cn.vuejs.org/
2.vue开发工具
Vue Devtools

3.下载版本介绍

下载版本介绍
下载源码
cdn下载
包管理器下载

4.购物车案例的快速实现

<body>
        <div id="app" style="border:solid 2px #aaa;padding: 20px;">
            <ul>
                <li v-for="(item,idx) in goods" :key="item.goodsId">
                    {{item.goodsId}} -
                    {{item.goodsName}} -
                    {{item.stock}}
                    <button @click="add(idx)" v-if="item.stock-item.sales != 0">+</button>
                    {{item.sales}}
                    <button @click="dec(idx)" v-if="item.sales != 0">-</button>
                    - {{item.stock - item.sales}}
                    <span v-if="item.stock - item.sales <= 0">卖完了</span>
                </li>
            </ul>
            <p>总销售量：{{sum}}</p>
        </div>
    </body>
    <script src="libs/vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                goods:[{
                    goodsName:"手机",
                    stock:90,
                    sales:8,
                    goodsId:0
                },{
                    goodsName:"电脑",
                    stock:20,
                    sales:5,
                    goodsId:1
                },{
                    goodsName:"冰箱",
                    stock:30,
                    sales:26,
                    goodsId:2
                }]
            },
            methods: {
                add(i){
                    this.goods[i].sales++;
                },
                dec(i){
                    this.goods[i].sales--;
                }
            },
            computed: {
                sum(){
                    return this.goods.reduce((prev,now)=>{
                        return prev + now.sales;
                    },0);
                }
            },
        })
    </script>

5.读文档

二.MV* 模式

1.MVC模式

M（Model）模型，V（View）视图，C（controller）控制器
是使用一种将业务，数据，视图分离的方式组织架构代码
组件是架构开发，常常将视图，数据，业务逻辑等写在一个模块内，如果组件内容很多，常常造成层次的混乱，增加开发和日后维护的成本
MVC模式就是专门处理这种问题的。

2.MVP模式

传统的MVC模式虽然可以管理页面系统中的数据，视图，控制器，但是在视图层创建界面时常常会用到模型层内的数据，使模型层和视图层耦合在一起，降低了复用性和灵活性
MVP模式就是为了解决这方面的问题。
M（Model）模型，V（View）视图，P（Presenter）管理器
视图层不再直接引入模型层中的数据，而是通过管理层实现对模型层内的数据的访问。
即所有层次的交互都发生在管理层中，从而降低了模型层和视图层之间的耦合关系，提升了灵活性和复用性

3.MVVM模式

在MVP模式中，所有的操作都在管理层中，因此必须创建管理器才能实现需求，但是对于开发者来说，如果js学习的不深入，操作管理器的成本其实很大。
MVVM模式的出现就是为了进一步的减少这种操作成本，使开发者只需要通过操作html就能创建视图实现页面需求
M（Model）模型，V（View）视图，VM（ViewModel）视图模型层。
为视图层量身定做一套视图模型，并在视图模型中创建属性和方法，为视图层绑定数据并实现交互
MVVM模式是从MVC模式和MVP模式演化而来，因此它主要也是分离视图和模型。
不同的是MVVM模式使视图层更加灵活，可以独立于数据层和视图层，实现独立修改，自由创建。
MVVM模式是对视图模型层的高度抽象，因此当多个视图层对应一个视图模型层时，也使得视图模型层内的代码逻辑变得高度复用。
这样可以极大的方便不懂js的人，只要了解简单的html内容并按照视图层的规范格式创建视图即可，开发人员就可以专注于开发视图模型层内的业务逻辑。

噢，我明白了

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Vue

一.认识VUE1.什么是VUEVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。更多详情可点击下方链接查看https://cn.vuejs.org/2.vue开发工具Vue Devtools3.下载版本介绍下载版本介
复制链接

扫一扫