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. 解决2013Lost connection to MySQL server during query错误方法

    在my.ini配置文件 mysqld 节点下添加 max_allowed_packet = 500M 也就是配置MySQL允许的最大数据包大小,上面的500M你可以根据你的项目修改为你自己的值,只要比 ...

  2. 学习python-20191108(1)Mysql、Flask

    一.使用pymysql模块操作MYSQL 导入pymysql模块: pip install pymysql 1.增删改 import pymysql # 定义数据库连接信息 config = {    ...

  3. VB.Net制作-历朝通俗演义

    原先的回数,全是汉语数字,为此我先转换成了阿拉伯数字,遗憾的是阿拉伯数字100居然排在1和2之前!所以必须设置为3位数字才行!否则顺序是乱的. 以下是用VBA批量重命名的代码: Dim FSO As ...

  4. cs231n spring 2017 lecture15 Efficient Methods and Hardware for Deep Learning

    讲课嘉宾是Song Han,个人主页 Stanford:https://stanford.edu/~songhan/:MIT:https://mtlsites.mit.edu/songhan/. 1. ...

  5. 最小生成树 HihoCoder-1097、1098、1109(最小生成树算法)

    太久没写最小生成树了,快忘光了.这几天回顾了一下 最小生成树一·Prim算法 AC G++ 369ms 17MB #include "cstdio" using namespace ...

  6. IIS6.0远程命令执行

    0X00 漏洞信息: 漏洞编号:CVE-2017-7269 漏洞简述:开启WebDAV服务的IIS 6.0被爆存在缓存区溢出漏洞导致远程代码执行,目前针对 Windows Server2003 R2 ...

  7. 吴裕雄--天生自然python学习笔记:Python3 网络编程

    Python 提供了两个级别访问的网络服务.: 低级别的网络服务支持基本的 Socket,它提供了标准的 BSD Sockets API,可以访问底层操作系统Socket接口的全部方法. 高级别的网络 ...

  8. phpStrom安装PHP_CodeSniffer检查代码规范

    为什么使用PHP_CodeSniffer 一个开发团队统一的编码风格,有助于他人对代码的理解和维护,对于大项目来说尤其重要. PHP_CodeSniffer是PEAR中的一个用PHP5写的用来检查嗅探 ...

  9. Linux上SVN安装

    SVN,Subversion,是一个开源的版本控制系统. svn有两种运行方式:独立的服务器和借助apache运行,各有利弊.

  10. vue watch和computed的使用场景

    watch 监听某个数据的变化(监听完调用什么函数) 一个数据影响多个数据 (比如:浏览器自适应.监控路由对象.监控自身属性变化) computed 计算后返回新 一个数据受多个数据影响(比如:计算总 ...