2-2.编写hello world

首先创建vue实例,然后实例接收一些配置项,el表示实例负责管理的区域,data表示区域内的数据

两秒后内容变为bye world 其中app表示实例对象,$data表示实例对象所管辖的区域的数据。

2-3 TodoList

v-for循环指令,可以帮助我们循环数据,list指data里面的list数据,item指循环过程中每一项的内容。

可在console中可调试,可改值。数据双向绑定调试

2-4MVVM

传统的开发模式MVP设计模式,代码分为三层,Model==>数据层(一般是用ajax获取的远程数据)   View=>视图层(指html结构)   Presenter==》控制层(业务逻辑相关的==》操作dom或者用ajax去获取数据)

视图层(View)发出事件交给控制器(Presenter),控制器要么去获取(ajax)数据(Model)要么去操作dom(view)

MVP开发模式代码如下:

MVVM模式

实例中操作的是Model

主要操作是Model,操作的是数据层及视图层。大大减少dom的操作。

2-7、简单的组件中的传值

父组件通过属性传值,子组件通过事件传值。

第二章、 Vue 起步的更多相关文章

  1. 第二章 Vue快速入门--14 使用v-model实现计算器的案例

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

  2. 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

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

  3. 第二章 Vue快速入门--12 事件修饰符的介绍

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

  4. 第二章 Vue快速入门--10-11 跑马灯效果制作

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

  5. 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

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

  6. 第二章 Vue快速入门--8 v-bind指令的学习

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

  7. 第二章 Vue快速入门--7 讲解v-cloak、v-text、v-html的基本使用

    7 讲解v-cloak.v-text.v-html的基本使用 <!DOCTYPE html> <html lang="en"> <head> & ...

  8. 第二章 Vue快速入门-- 28 自定义按键修饰符

    事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...

  9. 第二章 Vue快速入门-- 27 字符串的padStart方法使用

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

  10. 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器

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

随机推荐

  1. Memcache工作原理

    1       Memcache是什么 Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的 ...

  2. 浏览器证书问题,chorm,ie,edge,safari都会去读系统证书,firefox例外

    坑爹 没想过浏览器兼容的问题. 为系统安装用户证书后, firefox一直无法连接 提示 连接 www.httpsserver.com:8985 时发生错误. SSL 对等端无法协商出一个可接受的安全 ...

  3. php结合Redis实现高并发下的秒杀抢购功能

    实现思路 准备两个队列A和B,假设A队列的名称为stock,用于存放商品总库存信息,B队列的名称为users,用于存放抢购成功后的用户信息.每当有用户进行抢购操作时,先从A队列弹出一个元素,如果该元素 ...

  4. c++ 如何清除上一次的输出?

    #include <iostream.h>#include <stdlib.h>int main(){cout<<"PBY PBY PBY PBY PBY ...

  5. linux服务器项目部署

    重启服务器 :reboot C:\Users\maple>mysql -u root -pEnter password: ******mysql> use test;Database ch ...

  6. MySQL性能优化最佳实践 - 05 MySQL核心参数优化

    back_log参数的作用 指定MySQL可能的TCP/IP的连接数量(一个TCP/IP连接占256k),默认是50.当MySQL主线程在很短的时间内得到非常多的连接请求,该参数就起作用,之后主线程花 ...

  7. 阿里巴巴-德鲁伊druid连接池配置

    阿里巴巴推出的国产数据库连接池,据网上测试对比,比目前的DBCP或C3P0数据库连接池性能更好,Druid与其他数据库连接池使用方法基本一样(与DBCP非常相似),将数据库的连接信息全部配置给Data ...

  8. nginx安装与fastdfs配置--阿里云

    上一篇文章:fastDFS 一二事 - 简易服务器搭建之--阿里云 做了fastDFS的服务安装和配置,接下来我们来看nginx的安装 第一步:安装nginx需要安装的一些环境: 1.例如: yum ...

  9. Python 列表[::-1]翻转

    b = a[i:j:s]: i为起始索引(缺省为0), j为结束索引(不包括,缺省为len(a)), s为步进(缺省为1). 所以a[i:j:1]相当于a[i:j]. 当s<0时: i缺省时,默 ...

  10. 用手机应用追踪城市噪声污染——微软Azure助力解决城市问题

    噪声无孔不入的城市地带(图片来自于网络) 2014年4月19日发行的<经济学人>杂志预言,到2030年,中国人口的70%(约10亿人)会在城市中居住.中国城镇化的高速发展一方面大大提高了 ...