2020-02-2432e1e6e69c69e6610918dd3303309a7a

99+ frontEnd4 minutes 读完 (大约 615 个字)

front end tricks 202002

[toc]

JavaScript 倒计时关闭页面-蚂蚁部落

<script type="text/javascript"> 
var otimer;
var second=10;
function timer(){
  otimer.innerHTML=second;
  if(second>0){
    second=second-1;
    return false;
  }
  window.close();
} 
window.onload=function(){
  otimer=document.getElementById("timer");
  setInterval(timer,1000);
}

以上代码实现了我们想要的功能，可以倒计时10秒之后关闭页面。

原理非常的简单，利用定时器setInterval()方法，不断调用timer()函数，每调用一次秒数减一，直到秒数变为零就执行window.close()，将页面关闭。同时每次调用函数都会将当前的剩余秒数写入div中，于是实现了倒计时效果。

相关阅读：

（1）.innerHTML属性参阅JavaScript innerHTML一章节。

（2）.setInterval()方法参阅JavaScript setInterval()一章节。

JavaScript 获取倒数第二个li元素-蚂蚁部落

<script type="text/javascript">
window.onload=function(){
  var obox=document.getElementById("box");
  var oshow=document.getElementById("show");
  var lis=obox.getElementsByTagName("li");
  oshow.innerHTML=lis[lis.length-2].innerHTML;
}
</script>

JavaScript 获取网页脚本代码内容-蚂蚁部落

function evalscript(s){
  if(s.indexOf('<script') == -1) return s;
  var p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig;
  var arr = [];
  while(arr = p.exec(s)){
    var p1 = /<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i;
    var arr1 = [];
    arr1 = p1.exec(arr[0]);
    if(arr1){
      appendscript(arr1[1], '', arr1[2], arr1[3]);
    } 
    else{
      p1 = /<script(.*?)>([^\x00]+?)<\/script>/i;
      arr1 = p1.exec(arr[0]);
      appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);
    }
  }
  return s;
}

给出了核心代码，直接套用即可。

JavaScript 替换字符串全部指定内容-蚂蚁部落

将字符串中所有的字符”n”替换为字符”b”

String.prototype.replaceAll=function(str,repaceStr) {
  return this.replace(new RegExp(str,"gmi"),repaceStr) // "gmi" ? 
}
var str="antzone";
console.log(str.replaceAll("n","b"));

正则表达式删除字符串两端空格-蚂蚁部落

String.prototype.trim=function(){
  var reExtraSpace=/^\s*(.*?)\s+$/;
  return this.replace(reExtraSpace,"$1");
}
var str="  antzone ";
console.log(str.length);
var strNew=str.trim();
console.log(strNew.length);

CSS 紧邻下一个兄弟元素-蚂蚁部落

1
2
3

.antzone+li{
  color:red;
}

代码将class属性值为antzone的li元素的紧邻下一个兄弟li元素的字体颜色设置为红色。

+选择器可以参阅CSS的相邻选择符(E+F)一章节。

CSS 获取所有紧邻兄弟元素-蚂蚁部落

1
2
3

.ant ~ li{
  color:red;
}

将class属性值为”ant”元素后面的li元素字体颜色设置为红色，具体参阅CSS E~F 兄弟选择器一章节。

2019-12-07fcf6f2b4e417e15c23aad4e5a1b12c5f

99+ frontEnd7 minutes 读完 (大约 991 个字)

vue.js2.5基础入门视频教程-慕课网

1-1 课程介绍.mp4

vue官方文档

2-1 创建第一个Vue实例.mp4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 入门</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>hello {{msg}}</h1>
    </div>
    <script>
        new Vue({
            //el确定挂载点
            el: "#root",
            data: {
                msg: "world"
            }
        })
    </script>
</body>
</html>

2-2 挂载点，模版与实例.mp4

挂载点、模板、实例之间的关系
vue中的el确定挂载点。
模板：挂载点里面的全部内容，可以直接写，也可以在Vue里面添加template

<!--    <div id="root">-->
<!--        <h1>hello {{msg}}</h1>-->
<!--    </div>-->
<div id="root">
</div>
<script>
    new Vue({
        //el确定挂载点
        el: "#root",
        template: '<h1>hello {{msg}}</h1>',
        data: {
            msg: "world"
        }
    })
</script>

2-3 Vue实例中的数据,事件和方法.mp4

插值表达式

a在 new Vue({data: {a: 123}}) 中定义

<h1>{{a}}</h1>
使用a-text也可实现同样的效果
<h1 a-text="a"></h1>
或
<h1 a-html="content"></h1>

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue 入门</title>
    <script src="vue.js"></script>
</head>
<body>
<!--添加点击事件-->
    <!--添加方法1-->
    <div id="root" @click="handleClick">
    <!--添加方法2-->
<!--    <div id="root" v-on:click="handleClick">-->
        {{msg}}
    </div>
    <script>
        new Vue({
            //el确定挂载点
            el: "#root",
            data: {
                msg: "world"
            },
            methods:{
                //定义方法
                handleClick: function(){
                    this.msg="hello";
                }
            }
        })
    </script>
</body>
</html>

2-4 Vue中的属性绑定和双向数据绑定.mp4

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue 入门</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <div title="this is title1">hello world</div>
<!--属性绑定-->
<!--        方法1：-->
<!--        <div v-bind:title="title">hello world</div>-->
<!--        方法2（缩写，更常用）：-->
        <div :title="title">hello world</div>
<!-- 双向数据绑定-->
<!--        对比，单向：:value -->
<!--        <input :value="content">-->
<!--        对比，双向 v-model -->
        <input v-model="content">
        <div>{{content}}</div>
    </div>
    <script>
        new Vue({
            //el确定挂载点
            el: "#root",
            data: {
                msg: "world",
                title: "this is title2",
                content: "content"
            },
            methods:{

            }
        })
    </script>
</body>
</html>

2-5 Vue中的计算属性和侦听器.mp4

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue 入门</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        姓: <input v-model="firstName">
        名: <input v-model="lastName">
        <div>{{firstName}} {{lastName}}</div>
        <div>{{fullName}}</div>
        <div>{{count}}</div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: '',
                lastName: '',
                count: 0,
            },
            // 计算属性
            computed:{
                fullName: function () {
                    return this.firstName + ' ' + this.lastName
                }
            },
            // 监听器
            watch: {
                lastName: function () {
                    this.count ++;
                },
                firstName: function () {
                    this.count ++;
                }
            },
            methods:{
            }
        })
    </script>
</body>
</html>

2-6 v-if, v-show与v-for指令.mp4

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue 入门</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
<!--        v-if 删除或添加元素-->
        <div v-if="show">hello world</div>
<!--        v-show 隐藏或显示元素-->
        <div v-show="show">hello world</div>
        <button @click="toggle">toggle</button>
<!--        v-for -->
        <ul>
            <li v-for="item of list">{{item}}</li>
            <li v-for="(item, index) of list" key="index">{{index}} {{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                show: true,
                list: [1, 1, 3, 4, 5],
            },
            // 计算属性
            computed:{
            },
            // 监听器
            watch: {
            },
            methods:{
                toggle: function () {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>
</html>

3-1 todolist功能开发.mp4

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue 入门</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <div>
            <input v-model="thing">
            <button @click="submit">submit</button>
        </div>
        <ul>
            <li v-for="item of list">{{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                thing: "",
                list: [],
            },
            // 计算属性
            computed:{
            },
            // 监听器
            watch: {
            },
            methods:{
                submit: function () {
                    if (this.thing.trim()==="")
                        return;
                    this.list.push(this.thing);
                    // append 失败
                    // this.list.append(this.thing);
                    this.thing = "";
                }
            }
        })
    </script>
</body>
</html>

3-2 todolist组件拆分-1.5.mp4

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue 入门</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <div>
            <input v-model="thing">
            <button @click="submit">submit</button>
        </div>
        <ul>
            <!--  3. 属性传值  -->
            <todo-item
                    v-for="(item, index) of list"
                    :key="index"
                    :content="item">全局组件</todo-item>
<!--            <todo-item1>局部组件</todo-item1>-->
<!--            <li v-for="item of list">{{item}}</li>-->
        </ul>
    </div>
    <script>
        <!--全局组件-->
        // 注册后即可直接在HTML中使用
        Vue.component('todo-item', {
            // 1. 定义属性
            props: ['content'],
            // 2. 使用属性
            template: '<li>{{content}}</li>'
        });
        //局部组件
        // 声明后，在Vue中添加components
        // var todoItem = {
        //     template: '<li>item</li>'
        // };

        new Vue({
            el: "#root",
            // components: {
            //     'todo-item1': todoItem,
            // },
            data: {
                thing: "",
                list: [],
            },
            // 计算属性
            computed:{
            },
            // 监听器
            watch: {
            },
            methods:{
                submit: function () {
                    if (this.thing.trim()==="")
                        return;
                    this.list.push(this.thing);
                    // append 失败
                    // this.list.append(this.thing);
                    this.thing = "";
                }
            }
        })
    </script>
</body>
</html>

3-3 组件与实例的关系.mp4

组件也是实例, 也可以添加methods data等属性
new Vue(){} 实例中的template属性没有定义时，为挂载点下的HTML

<!--全局组件-->
        // 注册后即可直接在HTML中使用
        Vue.component('todo-item', {
            // 1. 定义属性
            props: ['content'],
            // 2. 使用属性
            template: '<li @click="itemClicked">{{content}}</li>',
            methods: {
                itemClicked: function () {
                    alert('clicked');
                }
            }
        });

3-4 实现todolist的删除功能.mp4

组件之间通过属性传递值

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue 入门</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <div>
            <input v-model="thing">
            <button @click="submit">submit</button>
        </div>
        <ul>
<!--            @delete 或 v-on:delete 监听子组件-->
            <todo-item
                    v-for="(item, index) of list"
                    :key="index"
                    :content="item"
                    :index="index"
                    @delete="handleDelete"
            >全局组件</todo-item>
        </ul>
    </div>
    <script>
        Vue.component('todo-item', {
            props: ['content', 'index'],
            template: '<li @click="itemClicked">{{content}}</li>',
            methods: {
                itemClicked: function () {
                    // 子组件被点击，通知父组件删除
                    this.$emit("delete", this.index);
                }
            }
        });

        new Vue({
            el: "#root",
            // components: {
            //     'todo-item1': todoItem,
            // },
            data: {
                thing: "",
                list: [],
            },
            computed:{
            },
            watch: {
            },
            methods:{
                submit: function () {
                    if (this.thing.trim()==="")
                        return;
                    this.list.push(this.thing);
                    this.thing = "";
                },
                handleDelete: function (index) {
                    // delete 失败
                    // delete this.list[index]
                    // 从index开始删除1项
                    this.list.splice(index, 1);
                }
            }
        })
    </script>
</body>
</html>

4-1 vue-cli的简介与使用-1.5.mp4

https://cli.vuejs.org/zh/
npm install -g @vue/cli
npm install -g @vue/cli-init

➜  WebstormProjects vue init webpack todolist

? Project name todolist
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

To get started:

cd todolist
npm run dev

components: {App} // {‘App’: App} 键值相等可简写
单文件组件
app.vue
template script style 3个标签
template 下只可有一个元素

网页自动刷新

4-2 使用vue-cli开发TodoList.mp4

npm run dev 执行的命令定义在package.json scripts中

1
2

4-3 全局样式与局部样式.mp4

scoped : 局部的样式
<style scoped>

</style>

4-4 课程总结-1.5.mp4

1
2

js script

引入json文件

Vue对list的增删改查

删除

新增

开发工具

在挂载点及其子节点中生效