vue - 码农教程

知识总结

"""
1、vue框架的优势
2、vue如何在页面中引入
    1）通过script标签引入vue.js环境
    2）创建vue实例
    3）通过el进行挂载
3、插值表达式
    {{ 变量以及变量的简单运算 }}
4、文本指令
    {{ }} | v-text | v-html | v-once
5、方法指令
    v-on:事件="变量" | @事件="变量" | @事件="变量()" | @事件="变量($event, ...)"
6、属性指令
    v-bind:属性="变量"  |  :属性="变量"
    
    :title="t1"
    :class="c1"  |  :class="[c1, c2]"  |   :class="{c1: true}"
    :style="s1"  |  :style="{color: c1, fontSize: f1}"
        s1是字典变量，c1和f1变量分别控制字体颜色和大小
7、js补充
    function可以作为类，内部会有this
    箭头函数内部没有this
    {}里面出现的函数称之为方法： 方法名(){}
"""

1、按照上方知识点总结模块，总结今天所学知识点

2、有红、黄、蓝三个按钮，以及一个200x200矩形框box，点击不同的按钮，box的颜色会被切换为指定的颜色

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <!--需求：当前点击者高亮-->
            <button @click="changeColor('red')">红</button>
            <button @click="changeColor('yellow')">黄</button>
            <button @click="changeColor('blue')">蓝</button>
        </div>
        <div class="box" :style="{backgroundColor: bgColor}"></div>
        <!--(div>button*3)+.box-->
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            bgColor: 'black'
        },
        methods: {
            changeColor(color) {
                this.bgColor = color;
            }
        }
    })
</script>
</html>

3、有一个200x200矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色，依次类推

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrap {
            width: 200px;
            height: 200px;
            /*background-color: black;*/
            color: white;
            font: bold 50px/200px 'STSong';
            text-align: center;
            user-select: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="wrap" @click="actionFn" :style="{backgroundColor: bgColor}">{{ count }}</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            count: 0,
            bgColor: 'black',
            colorArr: ['cyan', 'pink', 'green']
        },
        methods: {
            actionFn() {
                this.count ++;
                this.bgColor = this.colorArr[this.count % 3]
            }
        }
    })
</script>
</html>

1、如图：图形初始左红右绿，点击一下后变成上红下绿，再点击变成右红左绿，再点击变成下红上绿，依次类推
2、可以将图编程自动旋转

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrap {
            border: 3px solid black;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
            margin: 50px auto 0;
            position: relative;
        }
        .red, .green {
            width: 100px;
            height: 200px;
            position: absolute;
        }
        .red { background-color: red; }
        .green { background-color: green; }

        .l {
            width: 100px;
            height: 200px;
            left: 0;
        }
        .t {
            width: 200px;
            height: 100px;
            top: 0;
        }
        .r {
            width: 100px;
            height: 200px;
            right: 0;
        }
        .b {
            width: 200px;
            height: 100px;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="wrap" @click="actionFn">
            <div class="red" :class="red_class"></div>
            <div class="green" :class="green_class"></div>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            count: 0,
            red_class: 'l',
            green_class: 'r',
            red_arr: ['l', 't', 'r', 'b'],
            green_arr: ['r', 'b', 'l', 't'],
        },
        methods: {
            actionFn() {
                this.count ++;
                this.red_class = this.red_arr[this.count % 4];
                this.green_class = this.green_arr[this.count % 4];
            }
        }
    })
</script>
</html>

原文地址：https://www.cnblogs.com/jinhongquan/p/12055584.html