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. 非IoC方式访问Servlet API的两种方法

    使用ActionContext访问 ActionContext来自com.opensymphony.xwork2.ActionContext 具体实现代码段如下: <span style=&qu ...

  2. [LC] 234. Palindrome Linked List

    Given a singly linked list, determine if it is a palindrome. Example 1: Input: 1->2 Output: false ...

  3. 图形学创世纪——写在SIGGRAPH 40年的边上

    40年的边上" title="图形学创世纪--写在SIGGRAPH 40年的边上"> 前言: SIGGRAPH是由ACM SIGGRAPH(美国计算机协会计算机图形 ...

  4. spring事务管理(xml配置)与spring自带连接数据库JdbcTemplate

    什么是事务,很通俗的话来说就是,我们日常生活中总会出现在银行转账的业务,加入A向B转账100元,此时A的账户中应该减少100元,B的账户中增加100元,但是如果在A转完账B还没有接受的时候,服务器出现 ...

  5. FPGA底层的时钟布线以及内部layout

    https://wenku.baidu.com/view/441549fef111f18582d05a70.html 全局时钟是最简单的最可预测的时钟,时钟方案:有专用的时钟输入(提供最短的始终输出延 ...

  6. MOOC(7)- case依赖、读取json配置文件进行多个接口请求-openpyxl读取excel(14)

    从excel中读取数据 # -*- coding: utf-8 -*- # @Time : 2020/2/12 17:23 # @File : do_excel_openpyxl_14.py # @A ...

  7. java中字符串相等判断

    字符串的判断有2种: 1.判断地址是否相等  用:== 2.判断值是否相等  用:equals方法 Object类作为所有类的超类,而Object类的equals方法是直接比较地址的,源码如下: pu ...

  8. haproxy笔记之六:负载均衡MySQL服务的配置示例

    #--------------------------------------------------------------------- # Global settings #---------- ...

  9. haproxy笔记之三:配置HAProxy详细介绍

    2.1 配置文件格式 HAProxy的配置处理3类来主要参数来源:——最优先处理的命令行参数,——“global”配置段,用于设定全局配置参数:——proxy相关配置段,如“defaults”.“li ...

  10. 编译gcc报错make[3]: Leaving directory `/usr/local/src/gcc-7.4.0/build/gcc' make[2]: *** [all-stage1-gcc] Error 2 处理

    因业务需要安装7.4高版本gcc时报错: configure: error: in `/usr/local/src/gcc-7.4.0/build/gcc': configure: error: C+ ...