vue2.0读书笔记3 - router、vuex

1.vue的应用场景.优势.劣势优势通常情况下,运行时效率更高:一个事件循环仅一次视图更新,无频繁的DOM操作: 数据与视图分离,通过管理数据流,控制页面的展现,便于维护.且高效: 数据双向绑定,表单操作方便.快捷: 代码风格简约,完全符合前端的书写习惯: 组件管理的方式,更便于代码的复用.管理:单文件组件将每一个独立的功能封装在独立文件中,更灵活: 有较好的插件支持:vue-router.vuex.vue-loader等. 劣势初始化时间长: 要构建虚拟DOM,其代码风格更符合人的读写习…

vue2.0读书笔记2-进阶

一.深入响应式原理二.过渡效果三.过渡状态四.Render函数五.自定义指令六.混合七.插件八.单文件组件九.生产环境十.路由 vue-router: http://router.vuejs.org/ 十一.状态管理vuex 集成到了vue-devtools当中十二.单元测试(断言等,使用karma进行自动化测试) 十三.服务端渲染一.深入响应式原理 1.1.如何追踪变化通过watcher把组件渲染过程中的依赖纪录下来,当依赖项的setter被调用时,watcher…

vue2.0读书笔记1-基础

一.概述二.模版语法三.计算属性四.class与style绑定五.条件渲染六.列表渲染七.事件处理器八.表单控件绑定九.组件一.概述在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数.结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上. 二.模版语法 2.1.插值 2.1.1.文本 a.{{ msg }} b.v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新. …

vue2.0学习笔记之路由（二）路由嵌套+动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue2.0学习笔记之路由(二)路由嵌套+动画</title> <link rel="stylesheet" href="animate.css"> </head> <body> &…

vue2.0学习笔记之路由（二）路由嵌套

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue2.0学习笔记之路由(二)路由嵌套</title> </head> <body> <div id="app"> <div> <router-link to="/home…

vue2.0自学笔记

前言: 一.优点: 轻量级.高效率.上手快.简单易学.文档全面而简洁二.功能: 1.模板渲染 2.模块化 3.扩展功能:路由.Ajax 三.课程包含: 1.Vue实例 2.Vue组件 3.Vue指令 4.内置组件 5.实例方法 6.实例选项 7.实例属性 8.模板渲染 9.条件渲染 10.组件交互 11.标签属性 12.事件绑定 13.计算属性 14.属性监听 15.表单 16.动画 17.vue-cli项目搭建 18.Vue-router理由:实现单页面切换 19.vuex 四.vue.…

Vue2.0学习笔记一：各种表达式

#,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性: #,过滤器可以串联 {{ message | filterA | filterB }} #,条件渲染 #,注意v-if与v-show的区别,v-if是决定是否创建DOM,而v-show则是DOM始终存在,只是改变了显示样式: #,如果要切换多个元素的时候,我们就使用<template v-if='ok'>: #,v-if 有更高的切换消…

Vue2.0学习笔记

环境搭建 vue-cli@3 vue-cli@2.X npm i -g @vue/cli 模板语法文本 <span>Message: {{ msg }}</span> 原始HTML <span v-html="msghtml"></span> 特性 <div v-bind:id="dynamicId"></div> 表达式{{ number + 1 }} {{ ok ? 'YES' :…

<玩转Django2.0>读书笔记:表单

1. 表单字段参考: 官方文档 Django表单字段汇总 2. 表单代码示例(forms.Form) # form.py代码 # 获取数据库数据 choices_list = [(i+1,v['typename']) for i,v in \ enumerate(ProductType.objects.values('typename'))] # 自定义数据验证函数 def price_validate(value): if int(value) <= 0: print("******已…

<玩转Django2.0>读书笔记:模板和模型

1. 模板内置标签 Django常用内置标签标签描述 {% for %} 遍历输出变量的内容 {% if %} 对变量进行条件判断 {% csrf_token %} 生成csrf_token标签,用于防护跨站请求伪造攻击 {% url %} 引用路由配置地址,生成相应的URL地址 {% with %} 将变量名重新命名 {% load %} 加载导入Django的标签库 {% static %} 读取静态资源文件 {% extends xxx %} 模板继承,xxx为模板文件名,使当前模板继…

vue2.0学习笔记（第八讲）（vue-cli的使用）

vue-cli相当于脚手架,可以帮助我们自动生成模板工程.其内部集成了很多的项目模板,如simple.webpack.webpack-simple等.其中webpack这个项目模板适用于大型项目的开发,因为它内部包含Eslint检查代码规范和单元测试.下面我们主要介绍webpack-simple这个项目模板的使用,因为它和webpack相比,在功能上仅少了Eslint检查代码和单元测试这两部分,没有代码检查,使用起来比较方便. 1.安装vue命令环境我们可以在任意目录下,打开cmd,键入命令-…

0.读书笔记之The major advancements in Deep Learning in 2016

The major advancements in Deep Learning in 2016 地址:https://tryolabs.com/blog/2016/12/06/major-advancements-deep-learning-2016/ 主要挑战是unsupervised learning 无监督学习,2016年大量的研究专注于generative models 生成模型.几大巨头谷歌和脸书分别创新于自然语言处理NLP. 无监督学习无监督学习指的是在没有额外信息的新数据中,提取…

<玩转Django2.0>读书笔记:邮件和分页

1. 发送邮件 # settings.py设置 # 邮箱设置 EMAIL_USE_SSL = True # 邮件服务器 EMAIL_HOST = 'smtp.qq.com' # 邮件服务端口 EMAIL_PORT = 465 # 发送邮件账号 EMAIL_HOST_USER = "1223936862@qq.com" # SMTP服务密码 EMAIL_HOST_PASSWORD = "oxwxxxxxgbrvjejc" DEFAULT_FROM_EMAIL = EM…

<玩转Django2.0>读书笔记:URL规则和视图

1. 带变量的URL #urls.py from django.urls import path from .view import * urlpatterns = [ path('',index_views), #添加带有整数的字符类型.整形和slug的URL path('<year>/<int:month>/<slug>',mydate_views), ] URL变量类型: 字符类型 : 默认类型,匹配任何非空字符串,但不含'/' int : 整型 slug : 可…

vue2.0学习笔记之组件

[易错点]: 1. 组件内html代码片段超过一个标签时必须套一个根元素,即template模板子元素只能是一个. 2. 组件名称采用横杠间隔命名时,第一个字母大写会报错. 写法一:全局组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head>…

Vue2.0学习笔记：Vue事件修饰符的使用

事件处理如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理.在Vue中事件修饰符主要有: .stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡 .prevent:等同于JavaScript中的event.preventDefault(),防止执行预设…

初学VUE2.0

初学VUE2.0 (个人笔记,写完后发现好乱....下期使用markdown书写.) 概述 webstorm添加对VUE的支持 http://www.jianshu.com/p/142dae4f8b51 推荐拓展:vue的chrome开发者工具vuejs-devtools 按F12可看 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 效果: 构造器通过改造函数V…

[js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解

在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢? 组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),但可以看到如果我们通过最基本的方式来进行通信,一旦需要管理的状态多了,代码就会变得十分臃肿和庞大.对所有状态的管理便会显得力不从心,因此,vuex出现了,他就是帮助我们把公用的状态全抽出来放在vuex的容器中,然后根据一定的规则来进行管理,我们赶紧来用一下吧,想要掌握vuex的…