Vue.js 概览

最新推荐文章于 2024-08-26 20:25:07 发布

weixin_34117522

最新推荐文章于 2024-08-26 20:25:07 发布

阅读量68

点赞数

文章标签： javascript 测试 ViewUI

原文链接：http://www.cnblogs.com/johnvwan/p/9600091.html

版权

本篇文章开始聊聊Vue.js。

一.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通过MV'心I的模式拆分为视图与数据两部分，并将其分离。因此，你只需要关心你的数据即可，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>

二.MVVM模式

那么什么是MVVM模式呢？MVVM模式是由经典的软件架构MVC衍生来的。当View (视图层）变化时，会自动更新到 ViewModel (视图模型），反之亦然。 View和ViewModel之间通过双向绑定(data-binding)建立联系。如下图所示。

三.Vue.js核心思想

1、数据驱动，将DOM作为数据的一种自然映射。如下图所示。

2、数据响应原理，模型改变驱动视图自动更新。

3、组件化，页面上每个独立的可视/可交互区域视为一个组件；每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护；页面只不过是组件的容器，组件可以嵌套自由组合形成完整的页面。

转载于:https://www.cnblogs.com/johnvwan/p/9600091.html

weixin_34117522

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 概览

本篇文章开始聊聊Vue.js。一.Vue.js有什么不同如果使用过jQuery, 那一定对操作DOM、绑定事件等这些原生JavaScript能力非常熟悉，比如我们在指定DOM中插入一个元素，并给它绑定一个点击事件：if (showBtn) { var btn = $('<button>Click me</button>'); bt...
复制链接

扫一扫