vue.js实战之基础篇

最新推荐文章于 2021-09-04 10:58:07 发布

Cage0315

最新推荐文章于 2021-09-04 10:58:07 发布

阅读量323

点赞数

分类专栏： vue 文章标签： vue vue.js实战基础篇学习vue

本文链接：https://blog.csdn.net/cage7181/article/details/102734846

版权

vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

第一章初识vue.js

1、vue.js是什么？

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

简单小巧是指vue.js压缩后大小仅有17KB。所谓渐进式，就是你可以一步一步、有阶段性地来使用vue.js，不必一开始就使用所有的东西。

使用vue.js可以让web开发变得简单，同时也颠覆了传统前端开发模式。它提供了现代web开发中常见的高级功能，比如：

解耦视图与数据。
可复用的组件。
前端路由。
状态管理。
虚拟DOM

2、MVVM模式

Vue.js在设计上使用MVVM（Model-View-View-Model）模式。

MVVM模式是由经典的软件架构MVC衍生来的。当View（视图层）变化时，会自动更新到ViewModel(视图模型),反之亦然。View和ViewModel之间通过双向绑定联系。

3、vue.js有什么不同

如果你使用过JQuery，那你一定对操作DOM、绑定事件等这些原生JavaScript能力非常熟悉，比如我们在指定DOM中插入一个元素，并给它绑定一个点击事件：

if(showBtn){
    var btn = $('<button>Click me</button>') ;
    btn.on('click',function(){
        console.log('Clicked!');
    });
    $('#app').append(btn);
}

这段代码不难理解，不过这样让我们的视图代码和业务逻辑紧耦合在一起，随着功能不断增加，直接操作DOM会使得代码越来越难以维护。

而vue.js通过MVVM的模式拆分为视图与数据两部分，并将其分离。因此，你只需要关心你的数据即可，DOM的事情vue会帮你搞定，比如上面的示例用vue.js可以改写为：

<body>
    <div id="app">
        <button v-if="showBtn" v-on:click="handleClick">Click me</button>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data: {
            showBtn: true
        },
        methods: {
            handleClick:function(){
                console.log("Clicked!");
            }
        }
    })
</script>

暂时还不需要理解上述代码，这里只是快速展示vue.js的写法。

Cage0315

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js实战之基础篇

第一章初识vue.js1、vue.js是什么？简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。简单小巧是指vue.js压缩后大小仅有17KB。所谓渐进式，就是你可以一步一步、有阶段性地来使用vue.js，不必一开始就使用所有的东西。使用vue.js可以让web开发变得简单，同时也颠覆了传统前端开发模式。它提供了现代web开发中常见的高级功能，比如：解耦视图与数据。...
复制链接

扫一扫