如何把传统写法改成框架形式 es6

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

每天思考的问题：

1.什么是组件

2.什么是插件

3.如何把传统写法改成框架形式

4.前端为什么要使用框架，使用框架的好处是什么？

Image.png

http://www.zhihu.com/question/20888075

http://cn.vuejs.org/guide/components.html#u4EC0_u4E48_u662F_u7EC4_u4EF6_uFF1F

https://coding.net/

阿里的服务器：
https://ecs-buy.aliyun.com/#/prepay

https://ecs-buy.aliyun.com/#/prepay

https://www.aliyun.com/price/product/?spm=5176.ecsPrepay.instance.1.tq3O0R#/ecs/calculator

Image.png

怎么样判断上次已经有了就不需要绑定了，只需要数据就行

Image.png

事先准备一个对象，为空判断是否存在；存在，修改数据，不存在，在创建一个。app第一次声明后，第二次就不需要声明，在外面声明的，是全局变量。

Image.png

删除页面结构：

维护项目的时候会非常困难；哪些地方有关联；

================================

组件component

定义一个元素的名字，用js去解析它；

Image.png

把组件拿到凡客的项目里面

哪个标签上的HTML代码不会解析它：

定义好了并不想放到全局里面，只想给自己的实例使用；

==========================================

==========================================

require(["vue"],function(Vue){ // 定义 // 扩展组件 var MyComponent = Vue.extend({ data : function(){ return { "list" : ["a","b","c"] } }, // 定义组件展示的内容 template: '<div v-on:click="test_click">'+ '<p v-for="item in list">{{item}}</p>'+ '</div>', methods : { "test_click" : function(){ alert(11111); } } }) // 创建根实例 new Vue({ el: '#example', //定义为局部组件 components : { 'first_com' : MyComponent } }); new Vue({ el : "#demo", //定义为局部组件 components : { 'first_com' : MyComponent } }); });

Image.png

解构赋值：

用三个变量来接收三个元素：

根据数组元素的下标对应赋值：

Image.png

三个点是省略的意思，元素，数组

Image.png

对象的解构赋值：

es6的新语法：

Image.png

调用的模块只用其中的一个方法：

用解构赋值只取其中的一个呗：

===================

循环：

of.js

使用数组的时候不要使用for in？

Image.png

打印了原型链上的奇怪的东西

Image.png

of循环子元素，而不是下标

Image.png

set.js数组：

保存数组的完整性，就不会添加重复的值；

只返回元素，不返回下标

Image.png

三个点，直接变成数组

Image.png

多添加几个数

Image.png

使用解构赋值，将set对象转换为array；

set是数组，map是对象：

Image.png

=======

Image.png

{ "name": "node_web", "version": "1.0.0", "description": "node wechat", "main": "server/app.js", "scripts": { "test": "node server/app.js" }, "author": "svon@svon.org", "license": "ISC" }

Image.png

1.搭建网站的模块：

npm install express --save

Image.png

2.处理node.js里post请求的数据：

npm install body-parser --save

Image.png

3.HTML的高级语法：

npm install swig --save

Image.png

http://www.expressjs.com.cn/

Image.png

//导入express模块：

const express=require("express");

//实例化express：

const app=express();

请求路由地址，如果是post，就会触发：

Image.png

监听什么端口，这里就写什么端口；

Image.png

三个语法：在浏览器中，在node.js中运行：

amd cmd commonjs

Image.png

把一个目录当做一个静态文件的根目录：

访问的路由是配置的路由地址开头的都能访问；

app.use("/view",express.static("./views"));

//监听本机端口号，运行服务

const server

如何测试：

Image.png

//导入express模块

const express = require('express');

//实例化express

const app = express();

//系统模块

const path = require("path"); const Swig = require('swig'); const swig = new Swig.Swig();

//声明get 请求，路由是/

app.get('/',function(req,res){ res.send('hello world'); })

//声明post 请求是路由是/abc/

app.post("/abc/",function(req,res){ res.send("hello post"); }); //app.engine('html', swig.renderFile); //app.set('views',"./views"); //app.set('view engine', 'swig');

//把一个目录当做一个静态文件服务的根目录

//访问的路由是配置的路由地址开头的都能访问

app.use("/views",express.static(path.join(__dirname,"../views")));

//__dirname 系统变量，当前文件路径

//console.log(path.join(__dirname));

//监听本机端口号，运行服务

const server = app.listen(9000,function(){ var host = server.address().address; var port = server.address().port; console.log('http://%s:%s',host,port); });