实现响应的数据绑定和组合的视图组件。
让数据与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. MVC采用Jquery实现局部刷新

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

  2. 【无私分享:ASP.NET CORE 项目实战(第六章)】读取配置文件(一) appsettings.json

    目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 在我们之前的Asp.net mvc 开发中,一提到配置文件,我们不由的想到 web.config 和 app.config,在 ...

  3. 调试关于Hibernate的程序遇到的问题

    最怕的就是初学一些东西,低级的错误犯了又犯,现在总结出来以便以后不要再犯类似的错误. 一.Hibernate的延迟加载机制 在用hibernate底层访问数据库的过程忽略了延迟加载机制导致 在访问时候 ...

  4. 超小Web手势库AlloyFinger原理

    目前AlloyFinger作为腾讯手机QQ web手势解决方案,在各大项目中都发挥着作用. 感兴趣的同学可以去Github看看:https://github.com/AlloyTeam/AlloyFi ...

  5. [deviceone开发]-心形点赞动画示例

    一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值.二.效 ...

  6. arcgis api for js共享干货系列之二自定义Navigation控件样式风格

    arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义 ...

  7. Oracle Sales Cloud:报告和分析(BIEE)小细节1——创建双提示并建立关联(例如,部门和子部门提示)

    Oracle Sales Cloud(Oracle 销售云)是一套基于Oracle云端的客户商机管理系统,通过提供丰富的功能来帮助提高销售效率,更好地去了解客户,发现和追踪商机,为最终的销售成交 (d ...

  8. iOS开发--Swift RAC响应式编程初探

    时间不是很充足, 先少说点, RAC的好处是响应式编程, 不需要自己去设置代理委托, target, 而是主要以信息流(signal), block为主, 看到这里激动吧, 它可以帮你监听你的事件, ...

  9. nginx端口占用案例分享

    这里分享一个案例,问题的原因是反向代理使用不当. 现象 首先描述一下问题的现象.当时的问题是应用启动失败,日志里面报错显示端口占用.我们的应用都是通过脚本发布的,之前发布过多次都没有出现过问题.那么同 ...

  10. shell脚本实现算术运算且输入的不能为非数字的值

    #!/bin/bash c= ] do echo "请输入第一个数" read a echo "请输入第二个数" read b ]* ]] && ...