Vue之初体验

简介

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

像之前我们使用jQurey手撸DOM操作的时候,我们的代码都是命令式的、重复的与易错的。而在Vue当中我们真正操作的是数据而不是去操作标签、代码,它是将我们在普通的HTML模板中使用的特殊的语法将DOM“ 绑定 ” 底层数据。绑定后我们就不用直接去操作DOM了,而是直接操作数据,数据与DOM将保持同步。修改数据,DOM也会相应的更新。可以与DOM操作解耦合,使我们的代码更容易编写、理解与维护。

起步示例

HTML代码

1 <div id="app">
2     {{ name }}
3 </div>

JS代码

1     var Yang = new Vue({
2         el: '#app',
3         data: {
4             name: 'Hello World'
5         }
6     })

通过这几行代码我们也可以看出来,我们操作的都是数据,没有一点的原生DOM操作,这其实都是vue在背后进行了大量的工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。

我们打开Google的开发者工具,手动修改Yang.name的值,在页面上也会做出相应的改变

猜你喜欢

转载自www.cnblogs.com/Yang-Sen/p/9296814.html