2020.07-Study_update.5-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46146882/article/details/107604998

week 7.27-8.2

-	Study-update
-Mon	Js，数据类型
-Tue	函数,apply,原型
-Wes	location，dom
-Thu	操作表单
-Fri	Study-update
-Sat	Vue
-Sun	Axios

7.27 Monday

严格检查模式
避免javaScript的随意性产生问题

'use strict';//必须写在第一行

字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    console.log('a');
    console.log("a");
    console.log("a\'");//转义字符
    //多行字符串
    let msg = `
    1 nihao
    2 hello
    `
    console.log(msg);
    // 模板字符串
    let name = "xiaoliu";
    let age = 12;
    let msg1 = `你好,${name},${age}`;
    console.log(msg1);
</script>
</body>
</html>

数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    console.log('a');
    console.log("a");
    console.log("a\'");//转义字符
    //多行字符串
    let msg = `
    1 nihao
    2 hello
    `;
    console.log(msg);
    // 模板字符串
    let name = "xiaoliu";
    let age = 12;
    let msg1 = `你好,${name},${age}`;
    console.log(msg1);

    //数组
    let nums=[1,2,3,4,5];
    console.log(nums);
    //slice() 截取数组的一部分 返回一个新数组 类似于String中的subString
    //push 在后面添加元素 增加长度
    //pop弹出尾部的元素

    //unshift 往头部压入元素
    //shift 往头部弹出元素
    //concat 拼接 返回了新数组
    //连接符join 
</script>
</body>
</html>

js中的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    //对象是若干个键值对
    var user = {
        name: 'xiaoliu',
        age: 12
    };
    //可以通过delete动态删除属性
    delete user.age;
    //增加
    user.age = 1;
    //判断属性是否在对象中
    console.log('name' in user);
    //判断这个对象自身是否拥有该属性
    console.log(user.hasOwnProperty('name'));

</script>
</body>
</html>

7.28 Tuesday

函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //定义函数
    function abs(x) {
        if (x >= 0) {
            return x;
        } else {
            return -x;
        }
    }

    //定义函数二
    var abs2 = function (x) {
        //手动判断异常
        if (typeof x != 'number') {
            throw 'Not a number';
        }
        if (x >= 0) {
            return x;
        } else {
            return -x;
        }
    }

    //arguments 代表所有的参数
    function arg(x) {
        console.log('x>=' + x);
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    }

    //rest 去除所需参数 留下多余参数
    function r(a, b, ...rest) {
        console.log(rest);
    }
</script>
</body>
</html>

apply
可以控制this指向。
原型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';
    var student = {
        name: 'xiaoming',
        age: 12,
        run: function () {
            console.log(this.name + ' run...')
        }
    };
    var xiaocheng = {
        name: 'xiaocheng',
    };
    //student是xiaocheng的原型
    xiaocheng.__proto__ = student;
</script>
</body>
</html>

面向对象class继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict';

    //定义一个类 属性 方法
    class Student {
        constructor(name) {
            this.name = name;
        }

        hello() {
            alert("hi");
        }
    }

    var xiaoming = new Student("小明");
    var xiaocheng = new Student('小城');

    class child extends Student {
        constructor(name, age) {
            super(name);
            this.age = age;
        }

        myage() {
            alert("我一年级了");
        }
    }

    var xiaohong = new child('xiaohong', 12);
</script>
</body>
</html>

7.29 Wednesday

location
location页面代表当前页面的url信息

常用方法
location.reload() 刷新页面
设置新的地址
location.assign(www.baidu.con)
histroy
history.back（）后退网页
history.forward（）前进网页

dom

浏览器网页就是一个dom树形结构。

更新更新dom节点
遍历遍历得到dom节点
删除删除一个dom节点
增加增加一个dom节点
要操作一个dom节点，必须先获取到这个节点。

获得dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">
    <h1>hi</h1>
    <p id="p1">1</p>
    <p class="p2">1</p>
</div>


<script>
    //dom
    'use strict';
    var e1 = document.getElementsByTagName('h1');
    var e2 = document.getElementById('p1');
    var e3 = document.getElementsByClassName('p2');
    var father = document.getElementById('div1');

    console.log(e1);
    console.log(e2);
    console.log(e3);
    //找到父类下的节点
    var children = father.children;

       
</script>
</body>
</html>

修改dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">

</div>
<script>
    //修改text
    var e = document.getElementById('d1');
    e.innerText = 'hello world!';
    //转义
    e.innerHTML = '<strong>修改e2节点的值，转义</strong>';
    //操作css
    e.style.color = 'red';
</script>
</body>
</html>

插入节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="js">javaScript</p>
    <div id="list">
        <p id="se">javaSe</p>
        <p id="ee">javaEe</p>
        <p id="me">javaMe</p>
    </div>
    <script>
        var js = document.getElementById('js');
        var list = document.getElementById('list');

        //把js追加到list 作为子节点
        // list.appendChild(js);

        //增加一个新节点
        // var newp=document.createElement('p');
        // newp.id='newp';
        // list.append(newp);
        // newp.innerText='hello';

        //用setAttribute()
        var newp=document.createElement('p');
        newp.setAttribute('id','newp');
        list.append(newp);
        newp.innerText='hello';

        //创建一个style标签
        var mystyle=document.createElement('style');
        mystyle.setAttribute('type','text/css');
        //设置标签内容
        document.getElementsByTagName('head')[0].appendChild(mystyle);
        //添加到head
        document.getElementsByTagName('head')[0].appendChild(mystyle);

        </script>

</body>
</html>

7.30 thuesday

操作表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <span>用户名</span>
    <input type="text" id="username">
    <span>性别</span>
    <input type="radio" name="gender" value="male" id="boy">男
    <input type="radio" name="gender" value="female" id="women">女
</form>
<script>
    //获取输入框的值
    var input_username = document.getElementById('username');
    //单选框
    var boy = document.getElementById('boy');
    var women = document.getElementById('women');
    boy.checked;//是否被选中
</script>
</body>
</html>

提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="1" method="post">
    <span>名字</span>
    <input type="text" id="username" name="username">
    <button type="submit" onclick="a()">提交</button>
</form>
<script>
    'use strict';

    function a() {
        var username = document.getElementById('username');
        //MD5加密
        username.value = md5(username.value);
        alert(username.value);
    }
</script>
</body>
</html>

jquery
选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<a href="" id="text-jquery">点我</a>

<script>
    //公式 $(selector).action
    //# id选择器

    $('#text-jquery').click(function () {
        alert("hi");
    });

    //标签选择器
    $('p').click();
    //id选择器
    $('#id').click();
    //类选择器
    $('.class').click();
</script>
</body>
</html>

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        #zone {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<button id="btn1">？？？</button>

mouse:<span id="mouseLocation"></span>
<div id="zone">移动鼠标</div>

<script>
    $('#btn1').mouseenter(function () {
        alert("看啥呢兄弟");
    });
    //当网页加载完毕 响应事件 获取鼠标位置
    $(function () {
        $('#zone').mousemove(function (e) {
            $('#mouseLocation').text('X:' + e.pageX + 'Y:' + e.pageY)
        })
    })
</script>
</body>
</html>

8.1 Saturday

控制是否显示元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制是否显示元素</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-3">
<!--    if else-->
    <p v-if="seen==='A'">现在你看到我了</p>
    <p v-else-if="seen==='B'">B</p>
    <p v-else>状况之外</p>

</div>

<script>
    var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: 'A'
        }
    })
</script>
</body>
</html>

循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        <ul v-for="todo in todos">
            <li>{{todo.text}}</li>
        </ul>
    </div>

    <script>
        var app= new Vue({
            el: '#app',
            data: {
                todos: [
                    {text: '学习javaScript'},
                    {text: '学习Vue'},
                    {text: '做个大项目'}
                ]
            }
        })
    </script>
</body>
</html>

处理用户输入

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">反转消息</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello world!'
        },
        methods: {
            reverseMessage: function () {
                this.message = '憨憨浩然'
            }
        }
    })
</script>
</body>
</html>

下拉框双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="select-user">
    <select name="user" v-model="selected">
        <option value="" disabled>请选择</option>
        <option value="小刘" >小刘</option>
        <option value="阿然" >阿然</option>
        <option value="阿猪" >阿猪</option>
    </select>
    <h1>{{selected}}</h1>
</div>


<script>
    var app = new Vue({
        el: '#select-user',
        data: {
            selected: ''
        }
    })
</script>
</body>
</html>

组件化应用构建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <mytag></mytag>
</div>
<div id="app2">
    {{message}}
    <mytag></mytag>
</div>


<script>
    //定义一个vue组件
    Vue.component('mytag', {
        template: '<h1>21</hi>'
    });
    var app = new Vue({
        el: '#app',
        data: {
            items: ['java', 'mybatis', 'linux']
        }
    });
    var app2 = new Vue({
        el: '#app2',
        data: {
            message: 'Halo'
        }
    })
</script>


</body>
</html>

组件化应用构建2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>

<div id="app">
    <ol>
        <component1 v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></component1>
    </ol>

</div>

<script>
    Vue.component('component1', {
        props: ['todo'],
        template: '<li>{{todo.text}}</li>'
    });

    var app = new Vue({
        el: '#app',
        data: {
            groceryList: [
                {id: 0, text: '蔬菜'},
                {id: 1, text: '菠萝'},
                {id: 2, text: '香蕉'},
            ]
        }
    })
</script>
</body>
</html>