实现响应的数据绑定和组合的视图组件。
让数据与Dom保持同步 。
在使用jq手工操作DOM时,我们的代码常常是命令式的、重复的、易错的。Vue.js拥抱数据驱动的视图概念。简单的讲,它意味着我们在普通的html模板中使用特殊的语法将DOM绑定到底层数据。一旦创建了绑定,DOM将与数据保持同步。每当修改了数据,DOM变响应的更新。这样我们应用中的逻辑就几乎可以直接修改数据了,不必担心与DOM更新搅在一起。这样我们的代码更易辨析、理解与维护。
1、v-if=“”判断指令;javascript中等于0就等于false。
![](https://i-blog.csdnimg.cn/blog_migrate/fdfa7cb8fef252435a5b96662db129ab.png)
oApp.getting=0 消失
2、组件系统
组件系统是vue.js另一个重要概念。它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点,几乎任意类型的应用的界面都可以抽象化一个组件树。
3、定义模板、注册组件
![](https://i-blog.csdnimg.cn/blog_migrate/295a8b203b028504d477217a3eadd9fb.png)
第一步: 自定义标签,;
第二步:通过vue.extend({template:真是的标签}),定义组件名字 ;
第三步:通过vue.component(‘自定义的标签名’,自定义的组件名),绑定关系;
4、旧网站变vue组件化
样式:
![](https://i-blog.csdnimg.cn/blog_migrate/a5b38c732a032d47f9d87ca11bc0bf72.png)
旧网站布局:
![](https://i-blog.csdnimg.cn/blog_migrate/c1f2bc33e61ada26b9943410c47f6b2a.png)
vue化布局:
![](https://i-blog.csdnimg.cn/blog_migrate/c489821a6a8a421c7d11e49c1cb98e58.png)