vuejs学习(7)

本文对比两种条件渲染, v-ifv-show

测试代码TodoItem.vue如下:

<template>
<div id="todoitem">
    <div v-if="flag">你好</div>
    <div v-show="flag">你好</div>
    <div v-if="flag1">你好</div>
    <div v-show="flag1">你好</div>
</div>
</template>

<script>
export default {
    data: function () {
        return {
            flag: true,
            flag1: false,
        }
    },
}
</script>

<style scoped>
</style>

很明显,输出结果是两行“你好”。貌似v-if和v-show没什么区别,这里需要注意:

v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换使用的话, v-show 较好,而如果在运行时条件不大可能发生改变,则使用 v-if 较好。

JavaScript中==和===的对比

JavaScript中的==和===一直是个复杂的问题。对此我们进行了实验,代码如下:

<template>
<div id="todoitem">
    <pre>
        var a = {'1': 'a', '2': 'b'};
        var b = {'1': 'a', '2': 'b'};
        var c = a;
    </pre>
    <table>
        <tr class="header">
            <td>A</td>
            <td>B</td>
            <td>A==B</td>
            <td>A===B</td>
        </tr>
        <tr v-for="item in items">
            <td>
                {{item[0]}}
            </td>
            <td>
                {{item[1]}}
            </td>
            <td>
                {{item[2]}}
            </td>
            <td>
                {{item[3]}}
            </td>
        </tr>
    </table>
</div>
</template>
<script>
    export default {
        data: function () {
            var a = {'1': 'a', '2': 'b'};
            var b = {'1': 'a', '2': 'b'};
            var c = a;
            return {
                items: [
                    ["1", "1", 1==1, 1===1],
                    ["1", "'1'", 1=='1', 1==='1'],
                    ["String(1)", "'1'", String(1)=='1', String(1)==='1'],
                    ["parseInt('1')", "1", parseInt('1')==1, parseInt('1')===1],
                    ["1.1", "'1.1'", 1.1=='1.1', 1.1==='1.1'],
                    ["a", "b", a==b, a===b],
                    ["a", "c", a==c, a===c],
                    ["null", "undefined", null==undefined, null===undefined],
                    ["NaN", "0", NaN==0, NaN===0],
                    ["NaN", "null", NaN==null, NaN===null],
                    ["NaN", "undefined", NaN==undefined, NaN===undefined],
                ]
            }
        },
    }
</script>
<style scoped>
    .header td{
        color: blue;
    }
    table {
        border-collapse: collapse;
    }
    table td{
        border: solid 2px green;
    }
</style>

输出结果:

https://github.com/longlongpicture/myblogpicture/raw/master/jsequal.PNG

我只想说,如果===结果符合测试预期,我一定会一直用===,直到哪天发现==有实际价值,再记住使用的环境。

vuejs学习(6)

本文进一步学习条件渲染。

我们修改了TodoItem.vue文件,代码如下:

<template>
    <div id="todoitem">
        <div v-if="flag===1">星期一</div>
        <div v-else-if="flag===2">星期二</div>
        <div v-else-if="flag===3">星期三</div>
        <div v-else-if="flag===4">星期四</div>
        <div v-else-if="flag===5">星期五</div>
        <div v-else-if="flag===6">星期六</div>
        <div v-else-if="flag===7">星期日</div>
        <div v-else>参数错误</div>
    </div>
</template>
<script>
    export default {
        data: function () {
            return {
                flag: 6,
            }
        },
    }
</script>

<style scoped>
</style>

在上述的代码中,我们需要学到以下几个问题:

  1. 可以实现多分支渲染。
  2. 注意js中==和===的区别,我想这个问题可以单独写篇文章了……

vuejs学习(5)

本文初步学习一下样式的动态绑定和计算属性的使用。

我们修改 TodoList.vue 文件,代码如下:

<template>
<div id="todolist">
    <TodoItem></TodoItem>
</div>
</template>

<script>
import TodoItem from './components/TodoItem'

export default {
    components: {
        TodoItem
    }
}
</script>

<style scoped>

</style>

可以看出我们把父容器清空了,只添加了一个子容器<TodoItem></TodoItem>。这样做主要是为了保持项目结构,为更复杂的试验做准备。

下面是主角,TodoItem.vue。

<template>
<div id="todoitem">
    <button v-on:click="changecolor">更改颜色</button>
    <div class="box" v-bind:class="classObj"></div>
</div>
</template>

<script>
export default {
    data: function(){
        return{
            flag: true,
        }
    },
    methods: {
        changecolor: function () {
            this.flag = !this.flag;
        }
    },
    computed: {
        classObj: function () {
            return {
                green: this.flag,
                blue: !this.flag,
            }
        }
    }
}
</script>

<style>
.box {
    display: block;
    width: 100px;
    height: 100px;
    margin: 50px;
}
.blue {
    background-color: blue;
}
.green {
    background-color: green;
}
</style>

在上述的代码中,我们需要学到以下几个问题:

  1. class是可以通过v-bind:class绑定的,绑定的目标classObj应该是一个字典结构,并且值是布尔类型,例如{class_a:true, class_b:false},这就意味着class_a是有效的,class_b是无效的。
  2. 可以通过computed引入计算属性。由于classObj函数中存在this.flag,当点击按钮触发changecolor函数修改flag时,会激活computed中的classObj函数,对其返回值进行更新。如果classObj函数中不存在this.flag,那么classObj函数在点击按钮触发changecolor函数时不会被执行,这样实现了高效的基于缓存局部数据更新。而普通的methods在每次调用时都会执行一遍运算,效率会比较低。

上述代码还可以这样写:

<template>
<div id="todoitem">
    <button v-on:click="changecolor">更改颜色</button>
    <div v-bind:class="[flag ? 'blue': 'green', 'box’]"></div>
</div>
</template>

<script>
export default {
    data: function(){
        return{
            flag: true,
        }
    },
    methods: {
        changecolor: function () {
            this.flag = !this.flag;
        }
    },
}
</script>

<style>
.box {
    display: block;
    width: 100px;
    height: 100px;
    margin: 50px;
}
.blue {
    background-color: blue;
}
.green {
    background-color: green;
}
</style>

在上述的代码中,我们需要学到以下几个问题:

  1. 可以使用条件表达式选择有效的类名。
  2. 当同时使用多个类名时,要使用方括号。

win10双屏下隐藏非主屏任务栏

win10双屏下默认都有任务栏,貌似占用了有限的可视空间,可以通过如下方法关闭非主屏的任务栏。

  1. 通过“设置”->“系统”->“显示”,设置主屏;
  2. 右击任务栏,点击“属性”;
  3. 去掉“在所有显示器上显示任务栏”前面的勾,点击“确定”即可。

vuejs学习(4)

本文初步学习一下引入外部库函数的方法,我们接着文章 https://codinglonglong.github.io/posts/vuejsxue-xi-3/ 的代码做。

我们修改 TodoList.vue 文件,代码如下:

<template>
<div id="todolist">
    <ul>
        <TodoItem v-for="item in getrange(1, 10, 2)" v-bind:todomessage="addhead(item)"></TodoItem>
    </ul>
</div>
</template>

<script>
import TodoItem from './components/TodoItem'
import _ from 'lodash'

export default {
    methods: {
        getrange: function (start, end, step) {
            return _.range(start, end, step);
        },
        addhead: function (tempstr) {
            return "容器" + tempstr;
        }
    },
    components: {
        TodoItem
    }
}
</script>

<style scoped>
li{
    color: blue;
}
</style>

在上述的代码中,我们需要学到以下几个问题:

  1. v-for指令中in的后面可以是一个函数。
  2. v-bind指令可以绑定子组件中props涉及到的变量。
  3. 绑定的变量可以进行进一步的计算,也就是计算属性。
  4. 想引入外部库函数时,可以先用内部函数封装一下,就可以在template中使用了。
  5. lodash提供了很多js内置库中没有的工具函数。