2020年1月14日
前言：请在 PC 浏览器下获得最佳阅读体验
预知知识：
new Vue({ data(){return {}}, components:{}, props:[] }) @click = "" $emit(): data(){}：保存数据的对象 components：保存组件的对象 props：保存父组件传来的数据 @click：@是指令 v-on 的缩写。click 是点击事件(在模板里使用) \$emit()：触发当前实例上的事件(通常是第一个参数)。附加参数都会传给监听器回调(结果赋值给\$event)。 sync sync 同步：这个同步说的是数据之间的同步。
需求：用Vue模拟 使用余额宝付款完,让余额宝更新到最新金额 1. 余额宝是一个父组件,有money一个数据 2. 付款是一个子组件,引用余额宝父组件的money数据 .sync修饰符主要目的是子组件引用父组件数据,父组件数据在子组件里产生了变化告诉父组件,让父组件数据改为 变化后的数据。由于子组件引用了父组件的数据,所引用的数据自然会更改 代码逻辑：
父组件：余额宝.vue
<template> <div> 余额宝组件 <br /> 余额：{{money}} <hr /> <Pay :payMoney.sync="money"/> </div> </template> <script> import Pay from "./Pay.vue"; export default { data() { return { money: 1000 }; }, components: { Pay } }; </script> <style> </style> Pay 是子组件。payMoney是在子组件定义的引用父组件money。……
阅读全文
2020年1月12日
前置概念：
数据响应式：数据在后台或者在内存里发生了改变要更新到 UI 视图层里。这是数据的响应式 预知知识：
getter：get 语法将对象属性绑定到查询该属性时将被调用的函数 setter：set 语法当尝试设置属性时,set语法将对象属性绑定到要调用的函数 Object.defineProperty：该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。 实现简易版的 vue 数据响应式之 data 需求：实现监听 data 里的数据是否发生了变化
new Vue({ data:{ n:0 }, template:` <div> {{n}}<button @click="add">+1</button> </div> `, methods:{ add(){ this.n+=1 } } }).$mount('#app') //我们知道在ui视图会显示一个数据0和一个按钮。按一下按钮数据会＋1.这是Vue的数据响应式 //接下来我们粗糙的看看原理是如何监听到数据的变化并且响应到视图里的 getter 和 setter 我们来看看代码
let obj = { h:'hello', w:'world', get hw(){ return this.h+`,`+this.w }, set hw(hw){ this.h=hw.h this.w=hw.w } } console.log(obj.hw) //hello,world 注:属性前面有get 该属性的值是函数的返回值。该函数不接受参数; obj.hw = {h:'h',w:'w'} //注：set 所绑定的函数只能有一个形式参数 console.……
阅读全文
2020年1月10日
前言：请在 PC 浏览器下获得最佳阅读体验
Vue 本文主要讲诉 Vue 两个版本的区别
1. 两个版本对应的名字 完整版 只包含运行时版(非完整版 or 不完整版。文章中不完整版意思是只包含运行时版) 名字： vue.js vue.runtime.js //注:生产环境的版本带min如:vue.min.js和vue.runtime.min.js //带min的意思是该代码被压缩了。体积会小(加速加载代码),方便用户体验。 完整版：包含编译器和运行时的版本 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上除去编译器的其他一切 2. template 和 render 使用方法 我们知道完整版是带有编译器的,不完整版就是不带有编译器。我们知道编译器就是把模板转译JavaScript渲染函数的代码 这是本小节最主要的区别所在
如下例：
//template(模板)和 render用法 ---→ vue.js(完整版) VS vue.runtime.js(非完整版) //完整版：需要编译器 new Vue({ template:"<div>{{hi}}</div" }) //不完整版：不需要编译器 new Vue({ render(h){ return h("div",this.hi) } }) //template 的 value 是编译器所需要的模板 //h 函数是由 render 创建时由 vue 传进来的。最主要的目的时创建整个元素本身(是不是很像 createElement) 注： vue 支持单页面组件使用 vue-loader 把.……
阅读全文
2020年1月7日
MVC (Model-View-Controller) MVC 是一种软件架构模式或者叫 MVC 框架;由模型(Model)、视图(View)、控制器(Controller)构成。该模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化，并且使程序某一部分的重复利用可能。除此之外，此模式透过对复杂度的简化，使程序结构更加直观。透过对自身基本部分分离的同时也赋予了各个基本部分应有的功能。
控制器(Controller)：负责操作模型在视图里显示以及其他 视图(View)：负责操作 UI 层 模型(Model)：负责操作数据 1. MVC 三个对象是做什么的？ 我们用伪代码来看看这三个对象具体是做什么的
例：用伪代码的逻辑实现一个点击按钮 +1
//Model m对象 = { 数据对象：{ n:0 } } //view v对象 = { 标签：<div id='add1' >${{m对象.数据对象.n}}<div> } //Controller c对象 = { 点击：(){ id为add1的元素的内容为m对象.数据对象.n+=1 } } //首先我们知道数据在m对象、ui显示在v对象、行为在c对象。为什么这种模式比HTML css js各位一个文件好呢？ //显而易见这种模式的好处在于一个文件既知所有(视图 行为)。便于修改。便于后面查找以及维护 2. EventBus 有哪些 API 是做什么的？ EventBus 是做监听事件和触发事件可以造成通信。对应 EventBus.on、EventBus.trigger
例：用户输入数字渲染到 UI 里
引入jquery const EventBus = $({}) const number = undefined function 输入(){ number = 用户输入 EventBus.……
阅读全文
2020年1月6日
MVC (Model view controller) Model (数据模型) ：负责操作所有数据 View (视图)：负责 ui controller (控制器) 负责操作数据在ui层可视化 简称 MVC 模式，这是一种软件架构模式。该模式的目的是在于对程序的修改和扩展简化。并且某一个部分可重复利用的可能。 本篇博客使用模块化创建四个小功能： 在线预览
我们先实现这四个功能。 后期使用 MVC 模式重构该小 demo
目录 index.html //主页面 main.js //主页面行为 被index.html引用 global.css //主页面布局 被main.js引用 reset.css //主页面重置css 默认属性 被main.js引用 //以下js文件被main.js引用。css文件被自身js文件引用 app1.css //功能1的css和js app1.js app2.css //功能2的css和js app2.js app3.css //功能3的css和js app3.js app4.css //功能4的css和js app4.js 这是实现该 4 个功能全部的文件(这比以前在一个页面里写下全部代码好太多了,你应该学习这种方式)
开始前准备 首先创建一个 mvc-demo1 文件里在创建一个 src 文件把上述文件 12 个全部放在里面即可 使用 yarn 命令初始化:yarn init -y; 使用 yarn 命令添加 jquery：yarn add jquery ok 步骤完成。使用 parcel src/index.……
阅读全文
2019年12月25日
动态服务器跟静态服务器最主要的区别就是在于是否请求了数据
今天做一个简易版的注册 登录功能 ,AJAX 的实战：包含不限于( Cookie Session)
下面是文件目录
/ - db - users.json //存用户账号和密码文件 - public - home.html //显示已登录 or 未登录网页 - register.html //注册网页 - sign_in.html //登录网页 - server.js //服务器 - session.json //防止用户篡改的数据库(主要目的是防止用户更改ID) 1. Register.html 注册页面 <!-- --> <body> <form id="registerForm"> <div> <label for="">用户名:<input type="text" name="name"/></label></div> <div> <label for="">密码:<input type="password" name="password"/></label></div> <div> <button type="submit">注册</button> </div> </form> <!-- 引用jQuery库 --> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> const $form = $("#registerForm") $form.……
阅读全文
2019年12月24日
Static Server(静态服务器) 以往我们写 server.js 时,用 if 来判断请求文件然后响应如果网页有几十个的话还用 if 那也得写几十个 if ,优化一下代码改成自动查找对应文件,既静态文件服务器
响应代码 response.statusCode = 202 const filePath =path === '/'?'index.html':path //得到文件后缀 const index = filePath.lastIndexOf('.') const suffix = filePath.substring(index) const fileTypes = { '.html':'test/html', '.css':'test/css', '.js':'test/javascript', '.png':'image/png', '.jpg':'image/jpeg' } //设置头部文件的后缀 response.setHeader('Content-Type',`${fileTypes[suffix]||'test/html'}`;charset="utf-8") let content //读文件如果失败状态码为404 try{ content = fs.readFileSync(`./public${filePath}`) }catch(error){ content = "文件不存在" response.statusCode = 404 } //写入 response.write(content) response.end() //String.prototype.lastIndexOf():方法返回调用string对象的指定值最后一次出现的索引, //String.prototype.substring():方法返回一个字符串在开始索引到结束索引之间的一个子集,或从开始索引 //直到字符串的末尾的一个子集 //try...catch:语句标记要尝试的语句块,并指定一个出现异常时抛出响应 实例 源代码该代码实现请求 html css js png 等文件……
阅读全文
2019年12月22日
前面几篇文章讲解 AJAX 异步的访问等等之类的，都是在同源的策略下进行访问数据。这次我们讲讲跨域。跨域访问不是自己的数据,访问其他的数据称之为跨域。只有不同源的情况下才算跨域我们先讲解同源不同源的概念和跨域的方法
同源策略 源 = 协议 + 域名 + 端口 例：http://baidu.com 跟http://baidu.com/?是同源的 例：http://baidu.com 跟http://www.baidu.com是不同源的 协议 + 域名 + 端口 相同才是同源 如果谁访问都可以得到数据,那用户的隐私无法得到保证 公司就没了。那我们怎么让不同源的情况下给它响应的?
知道同源之后如果源不一样去请求的时候是拿不到数据的,所以在我们进行访问源后端得设置只有谁跨域请求才响应,我要知道你的身份是正确才要返回数据。
一共两种方法：1. cors 2. jsonp
Cors //简单请求 if (path === "/friends.json") { response.statusCode = 200; response.setHeader("Content-Type", "text/json;charset=utf-8"); response.setHeader("Access-Control-Allow-Origin", "http://xiaoxiao.com:9999"); response.write(fs.readFileSync("./public/friends.json")); response.end(); } //access-control-allow-origin:*;如果为星号的话该资源可以被任意外域访问 //access-control-allow-origin:http://xiaoxiao.com:9999;只能被该协议域名端口访问;除了该外域其他都不可访问 cors 只需要在被访问者的后端设置头部信息即可,遗憾是这种方法 IE 6 7 8 9 不支持!
Jsonp //该方法稍微复杂,虽然数据不能被访问但是.js文件是可以被访问的.我们先把数据放在js里请求js即可这是大体思路 首先分两个文件我们用 Jsonp 的方法来进行 xiaoxiao.……
阅读全文
2019年12月19日
前言:本篇文章讲诉异步 回调 promise 一些概念以及在使用 AJAX 时,我们需要 promise 构造函数提供的对象来监听 AJAX 的成功与失败等
异步(Async) 异步: 当我需要在1分钟内才能拿到炒饭,在这1分钟内我可以做一些其他的东西.1分钟之后有人告诉我你的炒饭好了. 前两句话是异步操纵(我可以每隔15秒问一下我的饭好了吗),后一句是回调操作 同步：当我需要在1分钟内才能拿到炒饭,1分钟就拿到炒饭了(中途无法分心,中途无法过问) 回调(call back) 回调：当你早上去买热干面时,本该先付钱再给我面就行(好香)。但是师傅问你,弄好了要不要辣(这就是回调) let 要辣 = ()=>{ console.log("热干面+加辣椒 好了") } let 热干面= (额外配料) => { console.log("煮面") console.log("捞面装碗") console.log("基本配料") 额外配料() } 热干面(要辣); //热干面函数返回undefined 要辣函数输出预期的结果。要辣函数返回的结果比热干面函数要早。 //这是异步的特征。同时要辣函数也是一个回调函数 异步任务不能直接拿到结果(每个人口味不一样),所以传给一个回调函数给异步。异步完成调用回调函数
问题来了！我不要辣椒,我不要酸豆角,我希望麻酱不要放少了！萝卜多放点等等。。每天那么多客人我怎么我不能每次都问一遍吧？(要写多少个回调函数？或者回调函数的参数得写多少个?)这得多麻烦阿。效率低下！那怎么办?办法就是基本配料师傅来放,其他口味的配料让客人自助 ok 解决了(这就是我们今天说的主角 promise 具有类似得思想)
Promise Promise ：对象用于表示一个异步操作的最终完成(或失败),及其结果值
我们以 AJAX 得封装为例来介绍 不用和用 Promise 的用法
//不用promise let ajax =(method,url,options)=>{ const{success,fail} = options const request = new XMLHttpRequest() request.……
阅读全文
2019年12月18日
前言 : AJAX (Asynchronous JavaScript And Xml)(非同步的 JavaScript 与 XML 技术):主要功能是存取数据用的.
AJAX 的原理 用JS发送请求和收响应(在早期用户登录时,服务器会返回全部页面信息,页面会全部刷新.AJAX出来后当我登录时, 只需要局部刷新即可,无需服务器返回全面页面.因为登录前后有些HTML CSS是一样的) 用 AJAX 请求 2.js 文件 既然我们知道AJAX的目的,那我们需要一个本地服务器做出响应。main.js做出请求 index.html 视图化 2.js做出响应正文 本地服务器代码：服务器源码 复制代码创建一个server.js文件粘贴 index.html <!doctype html> <html> <head> <title>AJAX应用——请求JS文件 </head> <body> <button id="getJs">Get 2.js</button> </body> </html> 2.js console.log("hello world") main.js //在JS里由构造函数XMLHttpRequest创建的实例可以实现与服务器交互 getJs.onclick = ()=>{ const request = new XMLHttpRequest() //创建该构造函数的实例 request.open("GET","/2.js") // request.onreadystatechange=()=>{ if(request.readyState === 4 && request.……
阅读全文
-
1
-
2
-
3
-
4
-
下一页