<>Vue.js

Vue.js的官方文档中是这样介绍它的:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。

简单小巧是指Vue.js压缩后仅有17KB。所谓渐进式(Progressive),就是我们可以一步一步、有阶段性地来使用Vue.js,不必一开始就使用所有的东西。

使用Vue.js可以让Web开发变得简单,同时也颠覆了传统前端开发模式。它提供了现代Web开发中常见的高级功能:

* 解耦视图与数据
* 可复用的组件
* 前端路由
* 状态管理
* 虚拟DOM(Virtual DOM)
<>MVVM模式

与知名前端框架Angular、Ember等一样,Vue.js在设计上也使用MVVM(Model-View-View Model)模式。

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

<>Vue.js与JavaScript和jQuery的不同之处

在我们使用JavaScript或jQuery时,做的最多的事情就是操作DOM、绑定事件等这些。比如在制定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="myApp"> <button v-if="showBtn" v-on:click="handleClick">Click
me</button> </div> <script> new Vue({ el: '#myApp', data: { showBtn: true },
methods: { handleClick: function(){ console.log('Clicked!'); } } }); </script>
</body>

技术
友情链接
码工具
Toolsou
API参考文档
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信