vue.js 第二课

实现响应的数据绑定和组合的视图组件。

让数据与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化布局:

时间: 2024-10-22 18:18:26

vue.js 第二课的相关文章

vue.js 第一课:实例化vue

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Demo</title> 6 </head> 7 <body> 8 <div id="app"> 9 app:{{name}} 10 </div> 11 <scri

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

[第2章:数据绑定] 何为数据绑定?答曰:数据绑定就是将数据和视图相关联,当数据发生变化的时候,可以自动的来更新视图. 数据绑定的语法主要分为以下几个部分: 文本插值:文本插值可以说是最基本的形式了.在vue.js中,使用了Mustache的语法,类似于Angular中的{{}}双大括号的形式.代码如下 <span>Text:{{text}}</span> 当然,如果你只想渲染一次数据,而对以后的数据不再关心的话,你也可以使用下面的语法: <span>Text:{{*t

vue.js 第四课

(1).插值:在view层上显示model的资料. (2).绑定表达式:在view层上 执行js命令. (3).指令:在view层上 执行写好的功能. (4).缩写:v-bind 绑定 特性 v-on 绑定 事件 Vue.js的模板是基于Dom实现的.这意味着所有的vue.js模板都是可解析的有效的Html且通过一些特殊的特性做了增强. Vue.js因而从根本上不同于基于字符串的模板. 1.Mustache语法 双大括号 语法: <span>{{data}}</span>双向绑定:

某课网 - Vue.js 源码全方位深入解析(同步更新)

第1章 准备工作介绍了 Flow.Vue.js 的源码目录设计.Vue.js 的源码构建方式,以及从入口开始分析了 Vue.js 的初始化过程. 1-1 课程简介1-2 准备工作1-3 认识 Flow-文档1-4 认识 Flow1-5 Vue.js 源码目录设计-文档1-6 Vue.js 源码目录设计1-7 Vue.js 源码构建-文档1-8 Vue.js 源码构建1-9 从入口开始-文档1-10 从入口开始 第2章 数据驱动详细讲解了模板数据到 DOM 渲染的过程,从 new Vue 开始,分

某课网 - Vue.js 源码全方位深入解析(完整版)

第1章 准备工作介绍了 Flow.Vue.js 的源码目录设计.Vue.js 的源码构建方式,以及从入口开始分析了 Vue.js 的初始化过程. 1-1 课程简介1-2 准备工作1-3 认识 Flow-文档1-4 认识 Flow1-5 Vue.js 源码目录设计-文档1-6 Vue.js 源码目录设计1-7 Vue.js 源码构建-文档1-8 Vue.js 源码构建1-9 从入口开始-文档1-10 从入口开始 第2章 数据驱动详细讲解了模板数据到 DOM 渲染的过程,从 new Vue 开始,分

Vue.js 学习记录

一.Vue起步 Vue:构建用户界面的渐进式框架. 1.helloworld <div id="app">{{content}}</div> 原生方法: <script> var dom = document.getElementById('app'); dom.innerHTML = 'helloworld'; </script> Vue 方法: <script> //创建Vue实例 var app = new Vue({

Vue.js项目模板搭建

前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

Vue.js——vue-resource全攻略

概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-re

MVVM大比拼之vue.js源码精析

VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多来自knockout.angularjs等大牌框架影响,但作者相信 vue 在性能.易用性方面是有优势.同时也自己做了和其它框架的性能对比,在这里.今天以版本 0.10.4 为准 入口 Vue 的入口也很直白: ? 1 var demo = new Vue({ el: '#demo', data: { message: 'Hello V