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. Flask的Jinja2模版过滤器

    Jinja2模版过滤器 过滤器是通过管道符号(|)进行使用的,例如:{{ name|length }},将返回name的长度.过滤器相当于是一个函数,把当前的变量传入到过滤器中,然后过滤器根据自己的功 ...

  2. 【flask】RestFul的基本鉴权

    编写API的基本鉴权 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Author : shenqiang from flask import Fla ...

  3. 《C程序设计语言》练习 1-6,1-7

    #include<stdio.h> /*验证表达式getchar()!=EOF的值是0还是1*/ main () { int c; c=getchar()!=EOF; printf(&qu ...

  4. Golang os/exec 实现

    os/exec 实现了golang调用shell或者其他OS中已存在的命令的方法. 本文主要是阅读内部实现后的一些总结. 如果要运行ls -rlt,代码如下: package main import ...

  5. FP-Grow树

    序言 FP-growth(Frequent Pattern Tree, 频繁模式树),是韩家炜老师提出的挖掘频繁项集的方法,是将数据集存储在一个特定的称作FP树的结构之后发现频繁项集或频繁项对,即常在 ...

  6. SCI|EI|ISTP|万方|istic|NSTL|CASTD|CNKI|nlc|ethesys|CALIS|CETD|proquest|NDLTD|中国科学院学位论文检索系统|学位论文

    BD AC D 三大检索指的是:SCI(科学引文索引 ).EI(工程索引 ).ISTP(科技会议录索引 ) 即Science Citation Index.Engineering Index.Conf ...

  7. mongo的基本命令操作

    基本用法学习:https://www.runoob.com/mongodb/mongodb-create-database.html MongoDB数据库基本用法 show dbs:显示数据库列表 s ...

  8. 微信小游戏排行榜页滚动查看排行榜(canvas指定区域溢出滚动,懒渲染)

    在微信小游戏中,好友排名数据是能在关系数据域操作,整个关系数据域只会返回一个最终的sharedCanvas,并且这个canvas不能调用toDataURL()方法,所以要展示好友排行榜的话只能在关系数 ...

  9. 使用fiddler盖楼评论

    使用fiddler盖楼评论:使用replay重复请求某接口

  10. Web of science|SCIE|影响因子|SSCI|高被引论文|领域中热点论文|

    信息检索: 数据库 Web of science 影响因子只是针对期刊打分,并不是对文章打分.所以对文章评价可以看引用次数. SCIE (Science Citation Index Expanded ...