es6 字符串

  对页面渲染的几种方式:字符串拼接  文档碎片  dom操作  模板  

  es6 又提供了一种新的对页面渲染的方式:字符串模板(高级版的字符串拼接)

    模板字符串标识符是 反引号 ( `` ) 英文状态下 tab 上面的键,字符串直接写,遇到变量写在 ${} 内;

    var name="hello world";

    案例:var sd=` 这种写法真好 ${name} `;  // 这种写法还会把空格保留下来 ,但是当模板用的话,注意: js 语句 在 `` 中并不友好

  es6 对象

  es6 允许将变量和函数作为对象的属性和方法

  案例:

    var name="zhangsan";

    function fn(){

      console.log(123)

    }

    var obj={

      name:name,    // 可省略为 name   第一个name 属性,第二个name 变量

      fn:fn,      // 可省略为 fn    第一个 fn 属性,第二个是 fn 函数

      [name]:name // 第一个[name] 代表了 name 变量,第二个name 代表了 name 变量

    }

    console.log(obj.name);  // zhangsan   

    obj.fn();    // 123

  以上案例的注意点:

  1. 当变量名和属性名相同的时候才能省略

  2. 将一个变量值写成对象的属性,一定要加 [] , 如果不加 [] 属性,就是 name ,加上 [name] 就是 name 变量的属性值

  对象的两个关键字  set  get

  get 代表取值  set 代表存值

  案例:

    var obj={

      haha:"zhangsan",

      get name(){    // get name 是一个取值的方法 名字必须是 name ,不能随便取名  

        return name  // get 关键字 当 obj.name 是时候就会触发这个函数,但是的是什么,name 的属性就是什么

      },

      set name(val){   // set name 是一个存值的方法 名字必须是 name,不能随便取名

        name=val;   // val  当给 name 赋值的时候,就会触发这个方法

        return name;

      }

    }

    console.log(obj.name);   // 会触发 get name

    obj.name="lisi";  // 会触发 set name

    console.log(obj.name);

  

  less

  变量:

    使用 @ 符 定义变量,用 : 赋值

      案例:@w:100px;

    定义类:案例

        @.po:red;  // 前者变量  后者类名

        @{.po}{  // 这里的 po 就代表了 red 这个类

        }

  混入:将一个选择器混到另一个选择器中

    案例:

      .po{

        position:absolute;

      }

      .p{

        .po;    // 在每个 less 语法后面都要加 ; 号,  引入方式同名即可

        left:10px;

      }

      另一种写法

      .po(){

        position:absolute;

      }

      div{

        .po()

      }

      一个是带() 一个是不带() 这两种写法的区别是什么?

        带() 代表编译后的 css样式,不会在定义的时候显示出来,只会在使用的时候显示出来

        不带() 代表编译后的 css样式,会在定义的时候显示出来,只会在使用的时候显示出来

  嵌套:

    主要是:css 后代,子代,伪类

    less 实现 后代写法

      div{

        p{

      

        }

      }

    less 实现 子代写法

      div{

        >p{

        }

      }

    less 实现伪类写法

      div{

        &:hover{    // & 关键字,是一个连接符,代表当前父类的选择器

        }

      }

  函数的默认值;

    .div($w:100px,$h:100px,$bg:red){  // 默认值,形参默认值写法 ,可以在调用的时候不传值,如果没有默认值的话,在调用的时候,必须输入值,否则就会报错

      width:$w;

      height:$h;

      background:$bg;

    }

  导入:@import "路径"  引入其他的 less 文件

  循环:是迭代循环,函数内部调用函数本身 还需要使用的函数 when()

  案例:

    .loop(@n) when(@n>0){  //使用递归的方法进行循环,这种写法叫迭代  when 作为条件判断

      width:(100px*@n);

      .loop((@n)-1);    // 如果我们对变量使用()的话,他会认为变量是 n-1 就会报错,因为没有这个变量,所以我们使用 () 括起来;

    }

    div{

      .loop(5)

    }

  继承:extend 让一个选择器去继承另一个选择器,就是让我们实现 并级选择器

  为什么使用并级选择器;当我们里面的样式相同的时候,如果我们进行 复制,粘贴操作的话,无疑是增加了我们的代码量;使用并级的话可以减少我们的代码量(但也减不了多少行)

    写法:

      html 结构

      <div class="cla">

        <div class="dd"></div>

      </div>

      .div{    // 这个 div  我们实现一个上下左右居中的效果

        position:absolute;

        top:0;

        left:0;

        right:0;

        bottom:0;

        margin:auto;

        width:200px;

        height:200px;

        background:pink;

      }

    extend 的两种引入方式

    第一种:

      .cla{

        width:400px;

        height:400px;

        position:relative;

        background:green;

        .dd:extend(.div){}  // 这个代码块里,就继承了 .div 定义的代码

      }

    第二种:

      .cla{

        width:400px;

        height:400px;

        position:relative;

        background:green;

        .dd{

          &:extend(.div all);    // 这种写法是和第一种写法一样的效果  all 代表继承了跟 .dd 相关的所有选择器

        }

      }

es6 字符串 对象 拓展 及 less 的语法的更多相关文章

  1. ES6字符串的拓展

    字符串的遍历接口 for...of循环遍历. for (let codePoint of 'foo') { console.log(codePoint) } // "f" // & ...

  2. ES6之对象的语法糖

    本文介绍下ES6中对象的一些拓展功能. 这三个语法糖在实际的项目开发中经常会见到.

  3. ES6 随记(3.1)-- 字符串的拓展

    上一章请见: 1. ES6 随记(1)-- let 与 const 2. ES6 随记(2)-- 解构赋值 4. 拓展 a. 字符串的拓展 有些字符需要 4 个字节储存,比如 \uD83D\uDE80 ...

  4. ES6 对象拓展方法

    一,ES6 对象拓展方法 ES6为对象提供了一些拓展方法,下面列举几个比较常见的对象拓展方法.

  5. ES6中对象的扩展

    ES6不仅为字符串.数值和数组带来了扩展,也为对象带来了很多新特性.这一节,我们来一起学习一下对象的扩展. 对象的传统表示法 我们回顾一下,对象的传统表示法: let person = { " ...

  6. ES6 数组方法拓展

    ES6 数组方法拓展 1.Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括E ...

  7. 【ES6】更易于继承的类语法

    和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 ...

  8. js-string字符串对象

    js-string字符串对象 一.String 对象描述 字符串是 JavaScript 的一种基本的数据类型. String 对象的 length 属性声明了该字符串中的字符数. String 类定 ...

  9. JavaScript原生对象拓展

    JavaScript原生对象拓展 在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏 ...

随机推荐

  1. Arduino控制LED灯(开关控制)

    问题:当使用"digitalRead(BUT) == 1"控制LED灯时会出现"digitalWrite(LED, ledState);"的值出现跳动. 原因: ...

  2. svn add 忽略node_modules

    一劳永逸 这个窗口怎么打开 桌面右键,TortoiseSvn,然后点settings,加如下代码,要加空格 node_modules 参考: https://www.leixuesong.cn/336 ...

  3. NGINX工作原理(2)

    Nginx由内核和模块组成. Nginx本身做的工作实际很少,当它接到一个HTTP请求时,它仅仅是通过查找配置文件将此次请求映射到一个location block,而此location中所配置的各个指 ...

  4. Java 计算两点间的全部路径(二)

    一.有向线段,存储开始点与结束点 /** * 有方向的线段 * * @author Gm * */ public class DirectionLine implements Cloneable { ...

  5. Windows Electron初探

    最近闲来无事,玩玩electron. 1.安装nodejs 下载地址:http://nodejs.cn/download/,下载64位.安装完成后,打开C:\Program Files\nodejs\ ...

  6. linux使用iptable做网关

    首先在能上外网的机器上增加一块网卡 我这里两块网卡配置如下 [root@muban1 ~]# cat /etc/sysconfig/network-scripts/ifcfg-eth0 外网卡 DEV ...

  7. Rinetd 通过ECS端口转发到内网RDS

    前置条件 实现目的:开发本地电脑需要连接没有外网地址的RDS,通过ECS进行转发连接到RDS数据库 客户 PC 终端可以 ssh 登录有公网的 ECS 服务器. 有公网的 ECS 服务器可以通过内网访 ...

  8. mvc 母版页中登录注册和问候的处理

    方式一:    在母版页直接调用方法返回,用户的session["userName"]也在母版页判断 2. 创建一个局部视图,在局部试图中将代码和数据调用写好引用单母版页 3. 自 ...

  9. MXNetError: [05:53:50] src/operator/nn/./cudnn/cudnn_convolution-inl.h:287

    insightface train.py 报错:mxnet.base.MXNetError: [05:53:50] src/operator/nn/./cudnn/cudnn_convolution- ...

  10. python ddt及logging(九)

    一.安装 ①执行语句: pip install ddt ②在单元测试中DDT用来进行数据驱动,数据与测试代码分离(数据发生变化时,用例可以保持不变),一组数据来执行相同的操作. 一般进行接口测试时,每 ...