SE6扩展和Vue

在上一篇文章末尾已经介绍过几种SE6的扩展了,今天带来一些使用的方法.

字符串扩展

let str = 'asdfohsvckxnlck';
      console.log(str.includes('t'));
      console.log(str.includes('a'));
      console.log(str.startsWith('a'));
      console.log(str.endsWith('k'));
      console.log(str.repeat(5));
</script>

数值扩展

<script type="text/javascript">
    console.log(0b1010);//10
    console.log(0o56);//46

    console.log(Number.isFinite(123));//true
    console.log(Number.isFinite(Infinity));//flase

    console.log(Number.isNaN(NaN));//true

    console.log(Number.isInteger(123));//true
    console.log(Number.isInteger(123.456));//false
    console.log(Number.isInteger(123.0));//true

    console.log(Number.parseInt('123abc456'));//123
    console.log(Number.parseInt('a123abc456'));//NaN

    console.log(Math.trunc('123.123'));//123
</script>

数组扩展

<script type="text/javascript">
    let btns = document.getElementsByTagName('button');
    Array.from(btns).forEach(function(item, index){
        console.log(item);
    })

    let arr = Array.of(1, 4, 'abc', true);
    console.log(arr);

    let arr2 = [2,3,4,2,5,7,3,6,5];
    let result = arr2.find(function(item, index){
        return item > 4;
    });
    console.log(result);//5
    result = arr2.findIndex(function(item, index){
        return item > 4;
    });
    console.log(result);//4
</script>

对象扩展

<script type="text/javascript">
    console.log(0 == -0);//true
    console.log(NaN == NaN);//false

    console.log(Object.is(0, -0));//false
    console.log(Object.is(NaN, NaN));//true

    let obj = {};
    let obj1 = {username:'iverson', age:43};
    let obj2 = {sex: '男'};
    Object.assign(obj, obj1, obj2);
    console.log(obj);

    let obj3 = {};
    let obj4 = {money: 5000000};
    obj3.__proto__ = obj4;
    console.log(obj3);
    console.log(obj3.money);
</script>

对象的深度克隆

1、数据类型：

• 数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型

• 基本数据类型：
  特点： 存储的是该对象的实际数据
• 对象数据类型：
  特点： 存储的是该对象在栈中引用，真实的数据存放在堆内存里

2、复制数据

• 基本数据类型存放的就是实际的数据，可直接复制
  let number2 = 2;
  let number1 = number2;
• 克隆数据：对象/数组
  1、区别： 浅拷贝/深度拷贝
  判断： 拷贝是否产生了新的数据还是拷贝的是数据的引用
  知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用
  let obj = {username: 'kobe'}
  let obj1 = obj; // obj1 复制了obj在栈内存的引用
  2、常用的拷贝技术
  1). arr.concat(): 数组浅拷贝
  2). arr.slice(): 数组浅拷贝
  3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据
  4). 浅拷贝包含函数数据的对象/数组
  5). 深拷贝包含函数数据的对象/数组

<script type="text/javascript">
    // 不会影响原数据
    let str = 'abcd';
    let str2 = str;
    console.log(str2);

    str2 = '';
    console.log(str);

    let bool1 = true;
    let bool2 = bool1;
    bool2 = false;
    console.log(bool1);

    // 拷贝数组/对象时，没有生成新的数据，而是克隆了一份引用
    let obj = {username: 'kobe', age:40};
    let obj1 = obj;
    console.log(obj1);
    obj1.username = 'wade';
    console.log(obj.username);

    let arr = [1, 4, {username: 'kobe', age: 40}];
    let arr2 = arr;
    arr2[0] = 'abcd';
    console.log(arr, arr2);
</script> 

拷贝数据：

• 基本数据类型：
  拷贝后会生成一份新的数据，修改拷贝以后的数据不会影响原数据
• 对象/数组：
  拷贝后不会生成新的数据，而是拷贝了引用。修改拷贝以后的数据会影响原数据
• 拷贝数据的方法：
  1、直接赋值给一个变量 //浅拷贝
  2、Object.assign() //浅拷贝
  3、Array.prototype.concat() //浅拷贝
  4、Array.prototype.slice() //浅拷贝
  5、JSON.parse(JSON.stringify()) //深拷贝（深度克隆），拷贝的数据里不能有函数，因为它处理不了
• 拷贝（对象/数组）：
• 特点：拷贝的引用，修改拷贝以后的数据会影响原数据，使得原数据不安全
• 深拷贝（深度克隆）
  特点：拷贝的时候生成新数据，修改拷贝以后的数据不会影响原数据

<script type="text/javascript">
        let obj = {username: 'kobe'};
    let obj2 = Object.assign(obj);
    console.log(obj2);
    obj2.username = 'wade';
    console.log(obj);

    let arr = [1, 3, {username: 'kobe'}, function fun(){}];
    let testArr = [2,4];
    // let arr2 = arr.concat(testArr);
    let arr2 = arr.concat();
    // arr2[0] = 1;
    console.log(arr2);
    arr2[2].username = 'wade';
    console.log(arr);

    let arr3 = arr.slice();
    arr3[2].username = 'iverson';
    console.log(arr);

    let arr4 = JSON.parse(JSON.stringify(arr));
    console.log(arr4);
    arr4[2].username = 'duncan';
    console.log(arr, arr4);
</script> 

知识点储备

• 如何判断数据类型： arr-->Array null-->Null
  1、typeof返回的数据类型： String、Number、Boolean、Undefined、Object、Function
  2、Object.prototype.toString.call(obj)
• for in循环 对象（属性名）、数组（下标）

<script type="text/javascript">
        let result = 'abcd';
    result = null;
    result = [1,3];
    console.log(Object.prototype.toString.call(result).slice(8, -1));
    // console.log(typeof Object.prototype.toString.call(result));

    // for in循环
    let obj = {username: 'kobe', age:40};
    for(let i in obj){
        console.log(i);
    }
    let arr = [1,3,'abc'];
    for(let i in arr){
        console.log(i);
    }

    // 定义检测数据类型的功能函数
    function checkedType(target){
        return Object.prototype.toString.call(target).slice(8, -1);
    }
    // console.log(checkedType(result));

    //实现深度克隆 --> 对象/数组
    function clone(target){
        // 判断拷贝的数据类型
        // 初始化变量result成为最终克隆的数据
        let result, targetType = checkedType(target);
        if(targetType === 'Object'){
            result = {};
        }else if(targetType === 'Array'){
            result = [];
        }else{
            return target;
        }

        //遍历目标数据
        for(let i in target){
            // 获取遍历数据结构的每一项值
            let value = target[i];
            //判断目标结构里的每一项值是否存在对象/数组
            if(checkedType(value) === 'Object' || checkedType(value) === 'Array' ){//对象/数组里嵌套了对象/数组
                // 继续遍历获取到的value值
                result[i] = clone(value);
            }else{//获取到的value值是基本的数据类型或者是函数
                result[i] = value;
            }
        }

        return result;
    }

    let arr3 = [1,2,{username: 'kobe', age:40}];
    let arr4 = clone(arr3);
    console.log(arr4);
    arr4[2].username = 'wade';
    console.log(arr3, arr4);

    let obj3 = {username: 'kobe', age: 40};
    let obj4 = clone(obj3);
    console.log(obj4);
    obj4.username = 'wade';
    console.log(obj3, obj4);
</script> 

Set和Map数据结构

1. Set容器 : 无序不可重复的多个value的集合体

• Set()
• Set(array)
• add(value)
• delete(value)
• has(value)
• clear()
• size

<script type="text/javascript">
    let set = new Set([1,2,4,5,2,3,6]);
    console.log(set);
    set.add(7);
    console.log(set.size, set);
    set.delete(3);
    console.log(set);
    console.log(set.has(8));//false
    console.log(set.has(7));//true
    set.clear();
    console.log(set);
</script> 

2. Map容器 : 无序的 key不重复的多个key-value的集合体

• Map()
• Map(array)
• set(key, value)//添加
• get(key)
• delete(key)
• has(key)
• clear()
• size

<script type="text/javascript">
        let map = new Map([['aaa', 'username', 25], [36, 'age']]);
    console.log(map);
    map.set(78, 'haha');
    console.log(map);
    let value = map.get(78)
    console.log(value);
    map.delete(36);
    console.log(map);
</script>

for_of循环

for(let value of target){}循环遍历

• 1. 遍历数组
• 2. 遍历Set
• 3. 遍历Map
• 4. 遍历字符串
• 5. 遍历伪数组

<body>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>

<script type="text/javascript">
    let arr = [1,2,3,4,5,5,6,2];
    let arr1 = [];
    let set = new Set(arr);
    for(let i of set){
        console.log(i);
        arr1.push(i);
    }
    console.log(arr1);

    let map = new Map([['aaa', 'username', 25], [36, 'age']]);
    for(let i of map){
        console.log(i);
    }
</script>
</body>

Vue 的基本认识

1）英文官网: https://vuejs.org/

2）中文官网: https://cn.vuejs.org/

介绍描述

• 1）渐进式 JavaScript 框架
• 2）作者: 尤雨溪(一位华裔前 Google 工程师)
• 3）作用: 动态构建用户界面

Vue 的特点

1）遵循 MVVM 模式
2）编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目

与其它前端 JS 框架的关联

1）借鉴 angular 的模板和数据绑定技术
2）借鉴 react 的组件化和虚拟 DOM 技术

Vue 扩展插件

1）vue-cli: vue 脚手架
2）vue-resource(axios): ajax 请求
3）vue-router: 路由
4）vuex: 状态管理
5）vue-lazyload: 图片懒加载
6）vue-scroller: 页面滑动相关
7）mint-ui: 基于 vue 的 UI 组件库(移动端)
8）element-ui: 基于 vue 的 UI 组件库(PC 端)
9）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目

Vue 的基本使用

编码

<div  id="app">
    <input  type="text"  v-model="username">
    <p>Hello,  {{username}}</p>
</div>
# 导入vue.js文件
<script  type="text/javascript"  src="../js/vue.js"></script>
<script  type="text/javascript"> 
    new  Vue({
        el:  '#app', 
        data:  {
            username:  'vue'
        }
    })
</script>

使用 vue 开发者工具调试
安装vue-devtools.crx（v_4.1.3）

理解 Vue 的 MVVM

理解 Vue 的 MVVM

模板语法

模板的理解

1）动态的 html 页面
2）包含了一些 JS 语法代码

• a.双大括号表达式
• b.指令(以 v-开头的自定义标签属性)

双大括号表达式

1）语法: {{exp}}
2）功能: 向页面输出数据
3）可以调用对象的方法

<div id="app">
    <h2>1. 双大括号表达式</h2>
    <p>{{msg}}</p><!-- textContent -->
    <p>{{msg.toUpperCase()}}</p>
    <p v-text="msg"></p><!-- textContent -->
    <p v-html="msg"></p><!-- innerHTML -->

    <h2>2. 指令一: 强制数据绑定</h2>
    <!-- <img src="imgUrl" alt="大V"> -->
    <!-- <img v-bind:src="imgUrl" alt="大V"> -->
    <img :src="imgUrl" alt="大V">

    <h2>3. 指令二: 绑定事件监听</h2>
    <button v-on:click="test">test1</button>
    <!-- <button @click="test2('abc')">test2</button> -->
    <button @click="test2(msg)">test2</button>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            // msg: 'I Will Back!'
            msg: '<a href="http://www.baidu.com">百度网</a>',
            imgUrl: 'https://cn.vuejs.org/images/logo.png'
        },
        methods: {
            test(){
                alert('hihi~~');
            },
            test2(content){
                alert(content);
            }
        }
    })
</script>

指令一: 强制数据绑定

1）功能: 指定变化的属性值

• 2）完整写法:

v-bind:xxx='yyy'    //yyy 会作为表达式解析执行

• 3）简洁写法:

:xxx='yyy'

指令二: 绑定事件监听

1）功能: 绑定指定事件名的回调函数

• 2）完整写法:

v-on:keyup='xxx'
v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'

• 3）简洁写法:

@keyup='xxx' @keyup.enter='xxx'