href使用情况

相对，绝对URL
片段标识符
Javascript代码段

Javascript代码段

href=”javascript”(伪协议)
实现A标签的点击事件运行

可绑定回调

1 2 3

getElementById().addEventListener('click',function (e){ },false)

href=”javascript:void(0)”

div和css定义

1.float 浮动属性

left
right
none
inherit

2.页面布局

1. header:文档或者节的页眉
2. nav:导航链接的容器
3. section:文档中的节
4. article:独立的自包含文章
5. aside:内容之外的内容（e.g 侧栏）
6. footer:文档或者节的页脚
7. details:额外的细节
8. summary:details元素的标题

   3.table 不是布局，尽量不用以布局

   1 2 3 4 5

   <table> <tr> <td/> </tr> </table>

4.所有元素样式

默认包含所有元素

1
2
3
4
5

//css
* {
	padding: 0px
	margin: 0px
}

< link定义文档与外部资源的关系，多用于CSS文件

<link rel="stylesheet" -> 规定当前文档与被链接文档之间的关系
      href="index.css" -> 文档位置
      type="text/css"  -> 链接文档的MIME类型
></link> 

下载代码

git clone -b 分支名 仓库地址(https://……)

上传代码

1. fork进个人仓库
2. git status
3. git add .
4. git commit -m ‘描述’
5. git push
6. 网址 new merge request

删除仓库

1. settings
2. general
3. Advanded settings
4. remove project

本地创建仓库上传

1. git init
2. git commit -m
3. git remote add origin master git@…
4. git push -u origin master

Page：用page()注册一个页面

1. data：页面初始数据
2. onLoad：监听加载
3. onReady：监听初次渲染完成->调用一次，可以和视图层进行交互
4. onShow：监听页面显示->调用一次
5. onHide：监听页面隐藏
6. onUnload：监听页面卸载->close页面
7. onPageScroll：页面滚动触发事件的处理函数

加载顺序：onLoad->onShow->onReady->onHide->onShow->onUnload
页面第一次启动加载顺序：onLaunch->onLoad->onShow->onReady->onHide->onShow->onUnload
页面隐藏后启动加载顺序：onHide->onLoad->onShow->onReady->onHide->onShow->onUnload

setData()接受一个对象

进入/离开 & 列表过渡

插入、更新或者移除DOM

transition封装组件，添加离开过渡

v-if
v-show
动态组件
组件根节点
（自动嗅探）是否应用CSS过渡或者动画
判断是否提供了JS钩子函数
（否则）DOM插入/删除，在下一帧立即执行

不同过渡的类名 有6个Class切换

CSS过渡

1
2
3
4

<transition name="slide-fade">   (html)
.slide-fade-enter-active {
	transition:all .3s ease      (css)
}

CSS动画

在animationd事件触发时删除
html不变
css中transition换为animation

自定义过渡的类名 e.g Animation css

.enter-class
.enter-active-class
……

一.前端配置

基础

1. 带宽较低 4/6M
2. 静态文件 CDN服务器 静态加快，可加快95%
3. 独立域名 CDN独立域名 （加载CSS，js，图像）
4. 正式环境下 index.ejs，约几百个字节；编译环境下可能会出问题
5. html的真实文件

操作

1. ls
2. 进入pp-test：测试环境
   进入pp-production：公众号运行环境
3. git branch -a
   显示当前分支名称 feature/in…
4. (可使用npm或者yarn)yarn/npm 检查包是否完整
   success Already up-to-date
5. yarn build 来build工程

二.后端配置

1. ls
2. cd tmp
3. 在工程root目录下（重启puma）
   pumactl -h
   pumactl restart/start （-d）
   puma -d
   command restart sent success

前端和后端

交互

1. 前端
2. nginx:前端编译为静态，处理静态能力强
3. puma:处理动态能力强
4. 后端

操作

1. 可以重启puma
2. 或者重启nginx

1. 所有的Vue组件都是Vue实例

2. 只有实例被创建时data中存在的属性才是响应式的

后添的属性为非响应式的

除非Object.freeze()，即阻止修改的属性
前缀$:与用户定义的属性区分开

1	vm.$el === document.getElementById('example')

$watch实例方法:

1 2 3

vm.$watch('a',function (newValue,oldValue){ })

3. 生命周期钩子 created mounted updated destroyed

this指向Vue实例
不能使用 => 函数

1
2
3
4
5
6

new Vue({
   ......
   created: function(){
   console.log('a is:'+ this.a)
  }
})

4. 模板语法

将DOM绑定到底层Vue实例的数据
写渲染render函数 + JSX
绑定文本： 使用v-once(一次性插值)
原始HTML： v-html 使用属性值被替换 xss攻击
特性：v-bind
js： 单个表达式

5. 计算属性computed：—复杂逻辑

1
2
3
4
5
6

(复杂逻辑放在Vue实例)(return绑定关系)
computed:{
   reversedMessage:function(){
	     return this.message....  
       }	
}

6. 计算属性缓存(computed) vs 方法(methods)

7. 计算属性缓存(computed) vs 侦听(watch)

8. Class 与 Style 绑定

<1> v-bind处理

1. Class: 动态切换多个Class

1
2
3
4
5
6
7
8
9

<div v-bind:class="{~定义在computed里，返回对象的计算属性~}"></div>
computed:{
   classObject: function() {
       return {
          active:
          'text-danger':
      }
   }
}

2. 数组

3. 组件

<2> 内联样式

也可绑定数组样式

1
2
3
4
5
6

v-bind:style = "styleObject"
data: {
   styleObject: {
      color: 'red'
   }
}

9. 条件渲染

(1)在template元素上使用v-if条件渲染分组

1

<template v-if="ok"></template>

(2)else else-if

1
2

<div v-else>
<div v-else-if="type === B">

(3)可复用的元素

e.g 切换用户类型，不会清除input内容
用key方法：
v-if v-else 中复用已有template元素 规定不要复用：添加key，未添加key仍会复用*

(4)v-show= “ok” 相当于display

不支持template元素和v-else
总被渲染，只是简单CSS显示切换
初始化渲染开销大
频繁切换时使用*

10. 列表渲染

(1)item in items

1
2

<li v-for="item in items">
<li v-for="item of items">

(2)可提供多个参数

1

<li v-for="(value,key) in object"></li>

(3)为已有对象赋予多个新属性：用两个对象的属性创建一个新的对象

e.g Object.assign()或_.extend()

1
2
3
4

> vm.userProfile = Object.assign({},vm.userProfile,{
   age:27,
   favoriteColor:'Vue Green'
})

(4)列表渲染可过滤-computed

1
2
3
4
5
6
7
8
9
10

<li v-for="n in even(numbers)"></li>

methods {
  even:function (numbers){

  }
}
evenNumbers:function (){
  return
}

(5)组件的属性不同自动绑定

v-bind:item
is = “todo-item”

11. 事件处理 v-on

(1)监听事件v-on

(2)事件处理方法

v-on:click = “great” (methods定义function)
也可以使用example2.great()调用

(3)内联处理器中的方法

1
2

v-on:click = "say(hi)"
v-on:click = "warn(' ',$event)"

method中function有event参数

(4)事件修饰符

{.stop,.prevent,.capture,.self,.once}

(5)按键修饰符

{.enter,.tab,….}

(6)系统修饰符

{.ctrl,.alt,.shift,.meta}

12. 表单输入绑定 v-model input和textarea元素

负责监听用户的输入事件以更新数据 总将Vue实例的数据作为数据来源

(1)

1
2

<input v-model="message"/>
<p>{{message}}</p>

(2)推荐select初始值为空

(3)修饰符

13. 组件基础

1
2
3
4
5
6
7
8
9

//定义一个名为button-counter的新组件
Vue.component('button-counter',{
  data: function (){
    return {
      count: 0
    }
  },
  template: '<button v-on:click="counter++">You clicked me {{count}} times</button>'
  })

(1)组件的data必须是个函数

(2)模块系统

•局部注册：局部注册的组件在其子组件中不可用

1
2
3
4
5
6
7

//ComponetB.js
import ComponentA from './ComponentA'
export default {
  components: {
    ComponentA
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

var ComponentA = {/* */}
var ComponentB = {
  components: {
    '  ': ......
  }
}
-------Bebel和webpack，ES2015--------
export default {
  components: {
    componentA
  }
}

•全局导入基础组件 src/main.js

(3)prop传递属性

1
2
3
4

Vue.component('blog-post',{
  props: ['title'],
  template: '<h3>{{title}}</h3>'
  })

(4)支持 v-model

1
2
3
4
5
6

Vue.component('custom-input',{
  props: ['value'] //**value特性绑定到名为value的prop上**
  template:`
  <input v-bind:value = "value" v-on:input="$emit('input',$event.target.value)"></input> //input触发时，将新的值通过自定义的input事件抛出
  `
  })

14. prop

(1)单向数据流

父子prop：单向下行绑定
改变prop：

1
2
3
4
5
6
7

//传递一个初始值:本地data属性
props:['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

1
2
3
4
5
6
7

//计算属性：原始的值传入且需要转换
props:['size'],
computed: function () {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

(2)Prop验证：为prop中的值提供一个带有验证需求的对象

1
2
3
4
5
6
7
8
9

//带默认值的对象
propE: {
  type: Object,
  default:function () {
    return {
      message: 'hello'
    }
  }
}

1
2
3
4
5
6

//自定义验证函数
propF: function () {
  validator: function (value) {
    return ['success','warning','danger'].indexOf(value)
  }
}

实例创建之前验证，实例属性（data，computed等）在default或者validator函数中是不可用的

(3)非prop属性：指向一个组件，但该组件并没有相应prop定义的特性.

1
2
3
4
5

st => start:自动添加到跟元素上，class和style可添加
e => end:inheritAttrs:false  v-bind="$attrs"
op1 => operation:若想禁止添加

st-> op1 -> e

15. 自定义事件

(1)触发的事件需要完全匹配监听所用的名称

一个组件的v-model默认会利用名为value的prop和名为input的事件

(2)将原生事件绑定到组件

一个组件的根元素上直接监听一个原生事件

1

v-on:focus.native = "onFocus"

组件重构：.native监听失败 $listeners属性指向某个子元素v-on=”$listeners”

(3).sync修饰符

prop双向绑定 update:my-prop-name触发事件
子组件赋值 this.$emit(‘update:title’,new Title)
父组件监听事件并更新本地数据属性 v-on:update:title = “doc.title = $event”
缩写为 v-bind:title.sync = “doc.title” (v-bind.sync = “doc”)(多个)

16. 插槽 slot

若没有slot元素，则任何传入它的内容都会被抛弃
理解：类似于input元素中placeholder，若不输入其他内容（组件），则显示插槽

(1)具名插槽

1
2

<slot name="header"></slot>
<template slot="header">(父组件)

(2)共用插槽

1
2
3
4
5

<base-layout>
  <h1 slot="header">
     <p>...</p>(共用默认插槽)
  </h1>
</base-layout>

17.动态组件&异步组件

(1)失活的组件将会被缓存

(2)工厂函数：以一个工厂函数的方式定义你的组件

异步解析组件定义
被渲染的时候才会被触发，结果存起来供未来渲染

1.和webpack的code-splitting功能配合使用

1
2
3
4
5

Vue.component('async-webpack-example',function(resolve){
  //webpack将代码分割成不同包
  //包通过Ajax请求加载
  require(['./my-async-component'],resolve)
  })

2.webpack2+ES2015 返回import

1
2
3

Vue.component('async-webpack-example',
   ()=>import('./my-asynv-component')
)

18.处理边界情况

(1)访问元素&组件

根元素：this.$root
父元素：$parent
访问子组件：ref组件

1
2

<base-input ref="usernameInput">
this.$refs.usernameInput

当前运行的版本

node -v

node helloworld.js

node helloworld.js

Node.js应用

1. 引入required模块

   1	var http = require("http");

2. 创建服务器：监听客户端的请求，类似于Apache，Nginx等HTTP服务器

   1 2 3 4 5 6 7 8 9 10 11 12 13

   http.createServer(function (request, response) { // 发送 HTTP 头部 // HTTP 状态值: 200 : OK // 内容类型: text/plain response.writeHead(200, {'Content-Type': 'text/plain'}); // 发送响应数据 "Hello World" response.end('Hello World\n'); }).listen(8888); // 终端打印如下信息 console.log('Server running at http://127.0.0.1:8888/');

3. 接受请求和响应请求: 客户端可以使用浏览器或者终端发送HTTP请求，服务器接受请求后返回响应数据

REPL命令

var可保存变量，在console中可以输出
“_”获取上个表达式的运算结果

Node.js回调函数

异步编程
回调函数一般作为最后一个参数出现

下载安装包

官网下载安装包

Node.exe

进入node.exe所在的目录运行node –version

安装后检测

node -v
输入node，即进入Node.js的交互环境，在交互环境下，输入任意Javascript语句，回车即可得到结果

安装版本

错误信息：安装create-react-app出错
原因：版本需要大于6

安装cnpm和create-react-app需要检查path
npm install -g cnpm –registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
输入npm list -g -depth=0检查安装包的路径
添加路径到环境变量PATH中，结尾添加“;”
npm set registry https://registry.npm.taobao.org # 注册模块镜像
npm set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的 node 源码镜像
npm cache clean # 清空缓存