本篇文章开始聊聊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、组件化,页面上每个独立的可视/可交互区域视为一个组件;每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护;页面只不过是组件的容器,组件可以嵌套自由组合形成完整的页面。