不再犹豫
分享是一种美德

学习笔记2-React技术全家桶

wangtong阅读(1088)

## 基本使用
    1、核心js库:
        (1)react.js:React核心库。
        (2)react-dom.js:提供操作DOM的react扩展库。
        (3)babel.min.js:解析JSX语法代码转为JS代码的库。
    2、创建虚拟DOM的两种方式:
        (1)纯JS创建
        (2)JSX创建
## JSX语法规则:
    1、定义虚拟DOM时,不要写引号
    2、标签中混入JS表达式时要用{}
        一定注意区分:【js语句(代码)】与【js表达式】
            1、表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
                下面这些都是表达式:
                    (1)a
                    (2)a+b
                    (3)demo(1)
                    (4)arr.map()
                    (5)funuction test(){}
            2、语句(代码):
                下面这些都是语句(代码):
                    (1)if(){}
                    (2)for(){}
                    (3)switch(){case:***}
    3、样式的类名指定不能用class,要用className
    4、内联样式格式:style={{key:value}}
    5、虚拟DOM只能有一个根标签
    6、标签必须闭合
    7、标签首字母
        (1)若小写字母开头,则将改标签为html中同名元素,若html中无该标签对应的同名元素,则报错
        (2)若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。

欢迎大家关注公众号:

【收藏】JS中Class类的详解

wangtong阅读(2066)

概述

在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。它可以被看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。
类实际上是个“特殊的函数”,就像你能够定义的函数表达式和函数声明一样,类语法有两个组成部分:类表达式和类声明。

严格模式

类和模块的内部,默认就是严格模式,所以不需要使用 use strict 指定运行模式

类的声明

定义一个类的一种方法是使用一个类声明,即用带有class关键字的类名(这里是“Rectangle”)
函数名和实例化构造名相同且大写(非强制)

class Person {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
}

函数声明和类声明之间的一个重要区别是函数声明会提升,类声明不会。需要先进行声明,再去访问,否则会报错

var person= new Person()
class Person {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
}
// Personis not defined

类声明不可以重复

class Person {}
class Person {}
// TypeError Identifier 'Person' has already been declared

类必须使用 new 调用,否则会报错。这是它跟普通构造函数的一个主要区别,就是后者不用 new 也可以执行

class Person {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
}
Person()
// TypeError Class constructor Person cannot be invoked without 'new'

类表达式(类定义)

类表达式可以是被命名的或匿名的

/* 匿名类 */ 
let Person = class {
        constructor(x, y) {
        this.x = x
        this.y = y
    }
}

/* 命名的类 */ 
let Person = class Person {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
}

类的方法
constructor 方法

constructor 方法是类的默认方法,通过 new 命令生成对象实例时,自动调用该方法(默认返回实例对象 this)。一个类必须有 constructor 方法,如果没有显式定义,一个空的 constructor 方法会被默认添加。一个类只能拥有一个名为 “constructor” 的特殊方法,如果类包含多个 constructor 的方法,则将抛出 一个 SyntaxError 。

class Person {
    constructor(x, y) {
        this.x = x // 默认返回实例对象 this
        this.y = y
    }
    toString() {
        console.log(this.x + ', ' + this.y)
    }
}

注意:

  1. 在类中声明方法的时候,方法前不加 function 关键字
  2. 方法之间不要用逗号分隔,否则会报错
  3. 类的内部所有定义的方法,都是不可枚举的(non-enumerable)
  4. 一个类中只能拥有一个 constructor 方法

静态方法

静态方法可以通过类名调用,不能通过实例对象调用,否则会报错

class Person {
    static sum(a, b) {
        console.log(a + b)
    }
}
var p = new Person()
Person.sum(1, 2) // 3
p.sum(1,2) // TypeError p.sum is not a function

原型方法

类的所有方法都定义在类的 prototype 属性上面,在类的实例上面调用方法,其实就是调用原型上的方法
原型方法可以通过实例对象调用,但不能通过类名调用,会报错

class Person {
    constructor() {
        // 默认返回实例对象 this
    }
    sum() {
    }
    toString() {
        console.log('123456')
    }
}
// 给 Person 的原型添加方法
Person.prototype.toVal = function() {
    console.log('I am is toVal')
}

// 等同于
Person.prototype = {
    constructor() {},
    sum() {},
    toString() {}
}

var p = new Person()
p.toString() // 123456
p.toVal() // I am is toVal
Person.toString() // TypeError Person.toStringis not a function
Person.toVal() // TypeError Person.toVal is not a function

实例方法

实例方法也可以通过实例对象调用,但同样不能通过类名调用,会报错

class Person {
    constructor() {
        this.sum = function(a, b) {
            console.log(a + b)
        }
    }
}
var p = new Person()
p.sum(1,2) // 3
Person.sum(1,2) // TypeError Person.sum is not a function

欢迎大家关注公众号:

 

 

————————————————
版权声明:本文为CSDN博主「半度℃温热」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/fu983531588/article/details/89499461

【收藏】如何正确的判断this的指向?

wangtong阅读(1395)

this的指向问题在JavaScript中是非常重要的,如果用一句话说明 this 的指向,那么就是: 谁调用它,this 就指向谁。

1、普通函数(this指向window)默认绑定;严格模式下会抛出错误undefined(’use strict’)

var age = 18;
function fun() {
    console.log(this.age);
}

fun();//18 this指向window

2、对象函数(this指向该方法所属对象)

var o = {
    sayHi:function(){
        console.log(this); 
    }
}
o.sayHi();//{sayHi: ƒ}

3、构造函数(如果没有return,则this指向这个对象实例;如果存在return返回一个对象,则this指向返回的这个对象)

function Star(uname,age){
    this.uname = uname;
    this.age = age;
}
let a = new Star('xiaoming',18);
console.log(a);//Star {uname: "xiaoming", age: 18}
function Star(uname,age){
    this.uname = uname;
    this.age = age;
    let obj = {
        age:10
    }
    return obj;
}
let a = new Star('xiaoming',18);
console.log(a);//{age: 10}

 

4、绑定事件函数(this指向的是函数的调用者,指向了接收事件的 HTML 元素)

var btn = document.querySelector('button');
btn.onclick = function () {
    console.log(this); //btn <button>点击</button>
}

5、定时器函数(this指向window)

setTimeout(function(){
    console.log(this);
}, 2000);//this指向window

6、立即执行函数(this 指向window)

(function(){
    console.log(this); //this指向window
})();

7、箭头函数(不绑定this关键字,指向的是函数定义位置的上下文this)

const obj ={name:'xiaoming'};
function fn(){
    console.log(this);//{name: "xiaoming"}
    return ()=>{
        console.log(this);//{name: "xiaoming"}
    }
}
const resFn = fn.call(obj);
resFn();

8、显示绑定:函数通过call()、apply()调用,bind()方法绑定,this指向的就是指定的对象;

function fun() {
    console.log(this.age);
}
var person = {
    age: 20,
    fun
}
var age = 28;
var fun = person.fun;
fun.call(person); //20
fun.apply(person); //20
fun.bind(person)(); //20

如果这些方法传入的第一个参数是 undefined 或者 null,严格模式下 this 指向为传入的值undefined / null;非严格模式下指向window(全局);

function fun() {
    console.log(this.age);
}
var person = {
    age: 20,
    fun
}
var age = 28;
var fun = person.fun;
fun.call(null); //28

9、 隐式绑定:函数的调用是在某个对象上触发的,即调用位置上存在上下文对象(相当于对象函数中的this指向)。典型的隐式调用为: xxx.fn()

function fun() {
    console.log(this.age);
}
var person = {
    age: 20,
    fun
}
var age = 28;
person.fun(); //20 隐式绑定

 

欢迎大家关注公众号:

 

————————————————
版权声明:本文为CSDN博主「中南啊哈」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42721322/article/details/106391922

学习笔记1-React技术全家桶

wangtong阅读(1449)

  1. React是什么?

    React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。(用于动态构建用户界面的Javascript库(只关注视图)

  2. 为什么要学?

    2.1、原生js操作DOM繁琐、效率低(DOM-API操作UI)

    2.2、 使用js直接操作DOM,导致浏览器进行大量的重绘重排

    2.3、原生js没有组件化编码方案,复用率低

  3. React的特点:

    3.1、采用组件化编码、声明式编码,提高开发效率及组件复用率 

             React 高效的原因:

                (1)使用虚拟DOM,不总是直接操作页面的真实DOM
                (2)DOM Diffing算法,最小化页面重绘

    3.2、在React Native中可以使用React语法进行移动端开发

    3.3、使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互

  4. 学习React之前需要掌握的js基础知识

    4.1、判断this的指向

    4.2、class(类)

    4.3、ES6语法规范

    4.4、npm包管理器

    4.5、原型、原链接

    4.6、数组常用方法

    4.7、模块化

欢迎大家关注公众号:

Vue学习笔记-网络应用

CN、古哥阅读(7601)

网络请求库:

axios:

什么是 axios?

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

特性

  • 从浏览器中创建 XMLHttpRequests

  • 从 node.js 创建 http 请求

  • 支持 Promise API

  • 拦截请求和响应

  • 转换请求数据和响应数据

  • 取消请求

  • 自动转换 JSON 数据

  • 客户端支持防御 XSRF

安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

<script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>

 

 

 

欢迎大家关注公众号:

Vue实例-本地留言板

mrnaas阅读(2930)

好久没有写新的笔记了,今天回想了一下之前学习的Vue知识,现在复习一遍,写写学习事的实例并加以修改一下:

本地记事本:

本地简单的留言板功能,后期其实可以添加盖楼功能的,但是目前先不考虑,大家也可以自己试着添加一下,后期我更新后会同步代码!

1、主要功能

(1)添加留言

(2)删除留言

(3)留言统计及删除

2、主要知识点:

(1)监听事件—–v-on/@

(2)list—–v-for

(3)数据绑定—–v-model

(4)v-show

在线演示

代码示例:

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <meta name="robots" content="noindex, nofollow" />

    <meta name="googlebot" content="noindex, nofollow" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>本地留言板</title>

    <link rel="stylesheet" type="text/css" href="./css/index.css" />

</head>

<body>

    <section id="app">

        <!-- 输入框 -->

        <header class="header">

            <h1>本地留言板</h1>

            <input v-model="temp.name" autofocus="autofocus" autocomplete="off" placeholder="请输入昵称"

              class="new-todo" />

              <input v-model="temp.text" autofocus="autofocus" autocomplete="off" placeholder="请输入留言内容"

                class="new-todo" />

                <button class="textbtn textbtn-red" @click="add">提交</button>

        </header>

        

        <!-- 记事本内容列表 -->

        <section class="main">

            <ul class="todo-list">

              <li class="todo" v-for="(item,index) in list">

                <div class="view">

                  <span class="index">{{ index+1 }}.</span>

                  <label>昵称:<span style="color: red;">{{ item.name }}</span></label>

                  <label>留言内容:<span style="color:blue">{{ item.text }}</span></label>

                  <label>留言时间: <span style="color:green">{{ item.time }}</span></label>

                  <button class="destroy" @click="remove(index)"></button>

                </div>

              </li>

            </ul>

        </section>

        <!-- 记事本统计信息 -->

        <footer class="footer" v-show="list.length!=0">

            <span class="todo-count" v-if="list.length!=0">

              <strong>{{ list.length }}</strong> items left

            </span>

            <button v-show="list.length!=0" class="clear-completed" @click="clear">

              Clear

            </button>

        </footer>

    </section>

    <!-- 底部 -->

    <footer class="info">

      <p>技术支持:

        <a href="http://www.mrnaas.com/" target="_blank" style="color: red;">MN乐享</a>

      </p>

    </footer>

    <script src="utils/vue.js"></script>

    <script src="utils/index.js"></script>

    <script>

        var app = new Vue({

            el: '#app',

            data: {

                temp:{

                    name:null,

                    text:null

                },

                list: []

            },

            methods: {

                add: function () {

                    let time = parseTime(Date())

                    let obj = JSON.parse(JSON.stringify(this.temp))//为了防止错误发生,采用深拷贝

                    if(obj.name && obj.text){

                        obj.time = time

                        this.list.push(obj);

                    }else{

                        alert("留言昵称/留言内容必填!")

                    }

                },

                remove: function (index) {

                    console.log("删除");

                    console.log(index);

                    this.list.splice(index, 1);

                },

                clear: function () {

                    this.list = [];

                }

            }

        })

    </script>

</body>

</html>

 

链接: https://pan.baidu.com/s/1fMgOHYz79emhehgaxNV-aA

提取码获取方法:

关注公众号发送:【留言板】

GitHub

https://github.com/twang211/webdemo

小程序热门框架推荐

mrnaas阅读(2824)

随着微信小程序横空出世以及发展,衍生出各类型的小程序,并且由各类型平台的原生开发产生很多优秀好用的框架/组件库。

1、wepy-组件化开发框架

WePY (发音: /’wepi/) 是小程序上最早的一款类 Vue 语法的开发框架。WePY 2 是基于小程序原生组件实现组件化开发。因此 WePY 2 支持的最低版本小程序基础库为 1.6.3。

Github地址:https://github.com/Tencent/wepy

官网地址:https://wepyjs.github.io/wepy-docs/

资料集合:https://github.com/aben1188/awesome-wepy

2、Taro

Taro是由京东 – 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架是由京东 – 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架,是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

官网地址:https://taro.aotu.io/

Github地址:https://github.com/NervJS/taro

3、mpvue-美团小程序框架

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

官网地址:http://mpvue.com/

Github地址:https://github.com/Meituan-Dianping/mpvue

4、WeUI 

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

官网地址:https://weui.io/

5、MINA

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。小程序提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。

网址:https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html

6、Tina.js

一款轻巧的渐进式微信小程序框架,具有轻盈小巧、极易上手、极易上手等特性。

网址:https://github.com/tinajs/tina

7、weweb

weweb是一个兼容小程序语法的前端框架,你可以用小程序的写法,来写web应用。如果你已经有小程序了,通过它你可以将你的小程序运行在浏览器中。如果你熟悉vue的语法,也可以使用wepy编写小程序,再通过weweb转换后将其运行在web端。

网址:https://github.com/wdfe/weweb

8、 iView Weapp

iView Weapp一套高质量的微信小程序 UI 组件库。

官网地址:https://weapp.iviewui.com/

Github地址:https://github.com/TalkingData/iview-weapp

9、ZanUI-WeApp(作者已停止维护)

Github地址:https://github.com/youzan/zanui-weapp

10、Vant Weapp (ZanUI-WeApp升级版本)

轻量、可靠的小程序UI组件库。

Github地址:https://github.com/youzan/vant-weapp

11、uni-app

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

官网:https://uniapp.dcloud.io

欢迎大家关注公众号:

bypass分流教程

mrnaas阅读(1W+)

又快到了说年一度的春运时期了,远离家乡工作的同胞们又要开始抢票的工作了,现在推荐一款不错的抢票软件,bypass,是一款分流抢票软件,不用安装即可使用。

官网下载链接:https://www.bypass.cn/

百度网盘下载:

链接1:https://pan.baidu.com/s/1eHrzrMgPIhcL0hQHHr-TKQ 提取码: dgm7

链接2:https://pan.baidu.com/s/1L2iJgvVTvGYgA2tr-V6uag 提取码: ci9q

下载到本地后解压进入软件目录双击  Bypass.exe  即可运行。

 

接下来就是用自己12306的账号登录,服务器可以默认也可以自己选择其他地区,一般默认就好。

登陆成功后就可以开启咱们的抢票之旅了,走你。

 

 

我们添加好往返城市,日期,然后查询车票;

然后选择乘客(拉取的是12306账号的联系人)、席位类型;

已选车次是你在车票列表自己选择合适的然后双击就加到列表中了,同样也提供高铁动车选座,最好也把候补提交也加上,因为候补成功了也不和刷票有冲突;

这些操作做完之后就可以开始抢票了。

 

下图就是已经开始抢票了:

 

 

如果抢票成功会有音乐提示,同样bypass提供了消息通知设置可以qq、微信、邮件通知还有自动支付,但是看着自己的实际情况来配置。

 

好了,基本使用就是这些了,如果有不懂的或者其他问题可以去官网查询亦或者留言我会及时解答。

最后预祝大家抢票成功!疫情还未结束大家出行佩戴好口罩!!!!!

欢迎大家关注公众号: