实现响应的数据绑定和组合的视图组件。
让数据与Dom保持同步 。
在使用jq手工操作DOM时,我们的代码常常是命令式的、重复的、易错的。Vue.js拥抱数据驱动的视图概念。简单的讲,它意味着我们在普通的html模板中使用特殊的语法将DOM绑定到底层数据。一旦创建了绑定,DOM将与数据保持同步。每当修改了数据,DOM变响应的更新。这样我们应用中的逻辑就几乎可以直接修改数据了,不必担心与DOM更新搅在一起。这样我们的代码更易辨析、理解与维护。
 
1、v-if=“”判断指令;javascript中等于0就等于false。
 

oApp.getting=0 消失
2、组件系统
组件系统是vue.js另一个重要概念。它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点,几乎任意类型的应用的界面都可以抽象化一个组件树。
3、定义模板、注册组件

第一步: 自定义标签,;
第二步:通过vue.extend({template:真是的标签}),定义组件名字 ;
第三步:通过vue.component(‘自定义的标签名’,自定义的组件名),绑定关系;
4、旧网站变vue组件化
样式:

旧网站布局:

vue化布局:

vue.js 第二课的更多相关文章

  1. vue.js 第九课

    这次讲红色框框. 方法与事件处理器: 方法处理器: 内联语句处理器: 事件修饰符: 按键修饰符: 为什么在HTML中监听事件? 1.v-on绑定事件 带参数 2.事件对象$event: 有时也需要调用 ...

  2. 【three.js第二课】页面自适应

    1.在[three.js第一课]的基础上加入以下代码,改变窗口大小时,页面内容会自适应 //加入事件监听器,窗口自适应 window.addEventListener('resize', functi ...

  3. vue.js 第一课:实例化vue

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js 第二课

    =赋值 ==比较 ===绝对比较 &&且 ||  或 !取反 a?1:0 a=ture a?1:0 function LeyBc() { var a={d:11,b:22,c:&quo ...

  5. vue.js 第四课

    (1).插值:在view层上显示model的资料. (2).绑定表达式:在view层上 执行js命令. (3).指令:在view层上 执行写好的功能. (4).缩写:v-bind 绑定 特性 v-on ...

  6. vue.js学习(第一课)

    学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...

  7. 【vue.js权威指南】读书笔记(第二章)

    [第2章:数据绑定] 何为数据绑定?答曰:数据绑定就是将数据和视图相关联,当数据发生变化的时候,可以自动的来更新视图. 数据绑定的语法主要分为以下几个部分: 文本插值:文本插值可以说是最基本的形式了. ...

  8. 如何用webgl(three.js)搭建一个3D库房-第二课

    闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第 ...

  9. js项目练习第二课

    百度输入法 <style> *{ list-style: none; text-decoration: none; padding: 0; margin: 0; } a:hover{ te ...

随机推荐

  1. 【趣味分享】C#实现回味童年的24点算法游戏

    一.24点游戏玩法规则效果展示 1.初始化界面 2.开始游戏界面 3.游戏超时界面 4.查看答案界面 5.答对界面 6.答错界面 7.计算表达式的验证界面 8.一副牌算完开始新一副牌界面 到这里24点 ...

  2. MVC采用Jquery实现局部刷新

    该文纯粹属于个人学习,有不足之处请多多指教! 效果图: 单击Detail下面出现详细,效果如下: 为了使操作时两个不同的数据源相互干扰,使用局部视图刷新,代码如下: 首先介绍主页Index代码: @m ...

  3. mongo DB for C#

    (1)Download the MongoDB C#驱动. http://www.nuget.org/packages/mongocsharpdriver/. (2) Add Reference to ...

  4. 居然是Firefox没有抛弃我们

    面向企业级市场,一款网页浏览器的很多特性不是说改就改,说丢弃就丢弃.就像微软不能抛弃IE一样,Firefox也有类似的定位和使命. Firefox即尝试提供企业级市场所需的特性稳定的软件版本(LTS) ...

  5. hibernate 中根据id删除一条记录的语句

    qid name like content 1 A 1 the first text 2 B 2 the Second text 1 C 3 the Third text 如上表所示,当我们需要某个q ...

  6. ActiveMQ 简单搭建

    ========== ActiveMQ ============== JMS : topic : 一对多: 发布订阅: 不保证数据是否被接受: 不存储topic信息: Queue : 一对一: 点对点 ...

  7. 每天一个设计模式-4 单例模式(Singleton)

    每天一个设计模式-4 单例模式(Singleton) 1.实际生活的例子 有一天,你的自行车的某个螺丝钉松了,修车铺离你家比较远,而附近的五金店有卖扳手:因此,你决定去五金店买一个扳手,自己把螺丝钉固 ...

  8. Android LocalBroadcastManager 的使用总结

    转载请标明出处:http://www.cnblogs.com/zhaoyanjun/p/6048369.html 本文出自[赵彦军的博客] 前言 在Android中,Broadcast是一种广泛运用的 ...

  9. 【代码笔记】iOS-账号,密码记住

    一,效果图. 二,工程图. 三,代码. RegisViewController.h #import <UIKit/UIKit.h> @interface RegisViewControll ...

  10. MySQL可视化软件Work Bench导出导入数据库

    首先打开你的work bench,输入你的密码进入主页面 A:导入数据库 在Schemas空白处右键选择Create~:建立一个数据库,然后就可以导入你的sql文件了 File-->Open S ...