每天思考的问题:
1.什么是组件
2.什么是插件
3.如何把传统写法改成框架形式
4.前端为什么要使用框架,使用框架的好处是什么?
怎么样判断上次已经有了就不需要绑定了,只需要数据就行
Image.png
事先准备一个对象,为空判断是否存在;存在,修改数据,不存在,在创建一个。app第一次声明后,第二次就不需要声明,在外面声明的,是全局变量。
Image.png
删除页面结构:
维护项目的时候会非常困难;哪些地方有关联;
================================
组件component
定义一个元素的名字,用js去解析它;
Image.png
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
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" }
1.搭建网站的模块:
npm install express --save
2.处理node.js里post请求的数据:
npm install body-parser --save
3.HTML的高级语法:
npm install swig --save
//导入express模块:
const express=require("express");
//实例化express:
const app=express();
请求路由地址,如果是post,就会触发:
监听什么端口,这里就写什么端口;
三个语法:在浏览器中,在node.js中运行:
amd cmd commonjs
把一个目录当做一个静态文件的根目录:
访问的路由是配置的路由地址开头的都能访问;
app.use("/view",express.static("./views"));
//监听本机端口号,运行服务
const server
如何测试:
//导入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); });
不用重启服务,都可以更新了
Swig.setDefaults({ cache : false //不缓存文件 });
ajax有异步,会延迟的:字符块{%header%}
项目重构完成