node+vue随笔

nodejs->.msi 模块化编程

vue resct 工作流的框架，，源于nodejs

—–运行v8引擎上的javascript 运行在服务器上的操作文件数据库图形图像网络

基于事件驱动，非阻塞型（异步机制）

包=功能

buffer=》缓冲器

vim 编辑器

i————-插入模式

fs=require ——-定义一个文件

mkdir——-创建文件夹

检测nodejs文件的运行

命令行进入node编译环境

配置phpstorm

​ 1. setting->plugin,安装插件，重启->语言和框架-> node and npm->设置nodejs的安装目录让插件变成可用状态，设置可用区间，设置区间内支持的语法，重启–》右键，runxxx—》编辑器的控制台

模块——模块化开发

模块：功能； 一个模块一个功能，实现代码的解耦（高内聚，低耦合）

断言—–检测—单元检测

require——-载入模块

​ amd：async module define 异步的模块的加载方式 异步 前端 远程 时间不可控

​ cmd：common module define 正常的加载方式 同步 nodejs->require

• 参数的适用方法 —-一个文件夹就是一个模块，，带路径的话，可以是相对路径，也可是是绝对路径
  
  • 不带路径，引入node自带的模块或者是 node_moudle下面的模块或者是离他最近的模块
  • 带路径，按照指定的路径去找相应的 文件 找不到，会一直往根目录找
  • 后缀名可以不写，默认寻找.js文件，如果没有.js会找后缀名是json（格式必须符合json格式）的，没有json则寻找后缀名是node的文件（C++的编译后的插件）

包说明文件—-package.json

动态创建+包说明文件 npm init

description --描述
version ---版本号

如何优化HTML页面

​ 1.将css js 放到页面最后

​ 2.js引入方式改成amd引入方式

requirejs语法

​ define([“依赖的文件”]，function（）{})

amd	cmd
async module define	common module define
前端的模块加载，requirejs	nodejs模块加载方式，require（）方法

global –全局变量

​ 内存占用/全局变量的污染

exports（）————-exports发送出什么值，引用模的模块得到什么值

module.exports.XXX，可以简写成exports.math

/*module.exports.XXX /module.exports.math=math;（math是一个函数，注**不加括号）*/

npm安装-》就远原则

require-》就近原则

模块的分类

• nodejs自带的核心模块 http url ….（核心的运行能力）
• 第三方模块，npm install 包名/别人发布的
• 自定义模块，

web服务器

​ 1.具有接收客户端请求的能力

​ 2.响应客户端请求的能力

nodejs搭建静态的服务器

事务处理

三次握手四次挥手

1.对方在线

2.客户端 ok

3.发送

四次挥手

1.东西发完了

2.服务器 接受完了

3.我断开了

4.服务器：可以断开、

nodejs-》path模块中的的resolve方法方法会把一个路径或路径片段的序列解析为一个绝对路径。

/表示根目录

gulp

基于流 简单自动化构建工具

php本身就是一个模板引擎，简单

express—–天然就是MVC

nodejs传参

thinkphp—–国内比较好的MVC框架

require 引入方式 只会引入一次

nodejs没有提供规则

先执行get方法 在执行done方法

查看端口使用情况:netstat -ano |find “8888” //alt+ctrl+delete 打开控制台，关闭进程

process.cwd()

new Function (形参，函数体) 参数可以多个

with语句，用于避免重复使用指定的对象引用

var   date_time =new   Date();

with(date_time){

      alert(getYear()+”/”+getMonth()+1+”/”+getDate());

       //如果不在with语句块内，应该为alert(date_time.gerYear())

}
replace(/a(b)c/,function(one,two,three){
    //one代表破整体匹配到的东西  two代表匹配到的第一个括号里的东西
})
replace into  ：信息不存在，插入，存在 更新+

vue

mvvm m 数据 v 视图

双向数据绑定、

对象就是一个控制器

new Vue({
    el:"#a"
    data:{
        name：“张三”
    }
})

指令：具有特殊意义的属性 v-on:click=”aa” 必须写到method里 v-on 可以用@代替

v-model

methods:方法在不断执行，

computed：只有变化的数字和他有关时在使用 当做属性去用

watch：不断的监听 每个属性的变化

vue 前端的MVC框架

watch的实现手段—脏值检测 es6的方法

v-show=“”

v-for

v-bind:abd=”a”

:class={red:item.state==1}\

this.all.filter(function(a){ a.id!=id })

组件

​ 双向数据绑定：脏值检测—-编程思想

​ defineProperty

挂载

angular首先提出mvvm 提出双向数据绑定

javascript的渐进式框架 newvue mvvm

生命周期（钩子函数）

mount 挂载

组件：为了让开发模块化

this.

数据只能由上向下传播

组件的用法

组件相当于函数，调用组件，就相当于调用函数

单向数据流：局部变量不可向上传递

porps的值不要改变

不能由里层想外层扩散

组件的嵌套

直接嵌套

click(val){

​ this.$emit(‘aa’,val)

}

逆向传递事件

vue 生命周期

钩子函数：每一个重要环节可能执行的函数

生命周期：记录了程序中任意节点的信息

then专门用来应对异步机制

fetch——跨域—–代替ajax

能发送text json formdata buffer blob（二进制） 类型的数据

有两个参数 第一个then是一个对象，第二个then里是第一个处理过的数据

要传递数据的话需要在fetch里进行设置，

跨域的 能力

解决跨域的方法

jsonp 代理

fetch("/fetch",{



}).then(function(e){ 
//e 代表response对象不包含send返回的东西

    return  e.blob（）

}).then(function(e){

    url.createObjectURL(e)

})

前端的路由

​ 和服务器没有关系，减轻服务器压力

哈希：请求本地的东西

spa 单页面应用.

100vh 100vw 宽高100%

1X

二级路由使用方法

1.在父路由中设置children

2.children属性里可设置多个子路由匹配关系

3.路径和组件的关系

4.要在对应的组件里设置router-view

5.再对应的组件里去设置router-link

6.路由嵌套，组件也要是嵌套关系

7.默认出现二级导航内容，要出现的路径设置为空

v-enter

v-lleave-to

v-enter-active,v-leave-active{transtion:1s}

mode=”out-in”

over-floor:scroll

watch:{

​ $route(this.$.$route.hash.slice(1))

}

状态过渡 tweenjs

//实例：确定vue要接管的范围，数据视图的对应关系 mount—挂载

//路由：实现路径（请求）和视图（组件）的关系，

//组件 结构 逻辑

路由的生命周期a->b

​ 跳转之前 跳转之后

钩子函数，可用在多种地方 组件里也可以到用钩子函数

• 路由 var router = new VueRouter({
  
  • ​ routes:[ {path:”/”,component:home beforEnter(){} afterEnter(){}}
  • ​ ]
  • })
• router.beforEach() afterEach())
• var home=Vue.comPonent(“home”)

router（路由全局对象）和$route（路由信息对象）的区别

express   ----发起请求   中间件next（） 响应请求

router.beforEach(function(to,from,next){ ————非常适合做登录验证

to:即将进入的信息

from:从哪来的信息

})

router.afterEach(function(to,from,next){ ————非常适合做登录验证

to:即将进入的信息

from:从哪来的信息

})