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

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

每天思考的问题:

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%}

项目重构完成

相关文章
|
存储 弹性计算 安全
带你读《从基础到应用云上安全航行指南》——一文教你如何从零构建机密计算平台解决方案(1)
带你读《从基础到应用云上安全航行指南》——一文教你如何从零构建机密计算平台解决方案(1)
403 0
|
4月前
|
数据采集 Web App开发 监控
如何用Pyppeteer打造高并发无头浏览器采集方案
本文从电商行业数据采集痛点出发,结合 Pyppeteer 高并发无头浏览器技术,打造可配置代理的高效采集方案。通过爬虫代理突破 IP 限制,模拟真实用户行为,实现 Amazon 特价商品数据的稳定抓取与分析。代码示例详细展示了代理集成、并发控制及数据处理流程,实验验证效率提升超 4 倍。该方案助力商业决策、竞品分析,并支持技术扩展与创新应用。
175 13
如何用Pyppeteer打造高并发无头浏览器采集方案
|
6月前
|
人工智能 编解码 自然语言处理
Gemma3:Google开源多模态神器,轻量高效,精通140+语言,解锁文本与图像任务
在当今快速发展的 AI 领域,多模态模型正逐渐成为推动技术革新的重要力量。Google 最新推出的 Gemma 3 模型,凭借其轻量级、多模态的特性,为文本生成和图像理解任务带来了全新的可能性。它不仅支持文本和图像输入,还具备强大的语言处理能力,覆盖超过 140 种语言,并且能够在资源有限的设备上高效运行。从问答到摘要,从推理到图像分析,Gemma 3 正在重新定义 AI 模型的边界,为开发者和研究人员提供了一个极具潜力的工具。
529 0
|
安全 Unix Linux
深入理解 Linux 内核3
深入理解 Linux 内核
244 2
|
11月前
|
消息中间件 架构师 Java
阿里面试:秒杀的分布式事务, 是如何设计的?
在40岁老架构师尼恩的读者交流群中,近期有小伙伴在面试阿里、滴滴、极兔等一线互联网企业时,遇到了许多关于分布式事务的重要面试题。为了帮助大家更好地应对这些面试题,尼恩进行了系统化的梳理,详细介绍了Seata和RocketMQ事务消息的结合,以及如何实现强弱结合型事务。文章还提供了分布式事务的标准面试答案,并推荐了《尼恩Java面试宝典PDF》等资源,帮助大家在面试中脱颖而出。
|
存储 NoSQL 关系型数据库
MongoDB中的索引操作总结
这篇文章总结了MongoDB中索引的概念、创建方法、常见操作指令、限制以及索引对查询效率的影响。
685 2
|
存储 固态存储 安全
阿里云服务器2核8G、4核16G、8核32G配置最新收费标准及活动价格参考(2024更新)
2核8G、4核16G、8核32G配置的云服务器处理器与内存比为1:4,这种配比的云服务器一般适用于中小型数据库系统、缓存、搜索集群和企业办公类应用等通用型场景,因此,多为企业级用户选择,目前用户购买2核8G配置活动价格最低为522.79元/1年起,购买4核16G配置活动价格最低为2149.92元/1年起,购买8核32G配置活动价格最低为4249.44元/1年起,本文介绍这些配置的最新购买价格,包含原价收费标准和最新活动价格。
阿里云服务器2核8G、4核16G、8核32G配置最新收费标准及活动价格参考(2024更新)
|
监控 JavaScript 前端开发
vue切换页面白屏问题怎么解决
vue切换页面白屏问题怎么解决
449 0
|
JSON API 数据格式
python使用POST方法从API获取数据
使用POST方法从API获取数据
622 2
|
JSON 数据格式
【分享】宜搭集成自动化,Groovy节点一般用法,解析JSON数据
【分享】宜搭集成自动化,Groovy节点一般用法,解析JSON数据 by 页一
1484 0
【分享】宜搭集成自动化,Groovy节点一般用法,解析JSON数据

热门文章

最新文章