Vue.js 实战教程-CSDN博客

文章目录

Vue基本代码和MVVM之间对应关系

在这里插入图片描述

v-cloak、v-text、v-html的基本使用

在这里插入图片描述

v-bind指令-缩写是：

在这里插入图片描述

使用v-on指令定义Vue中的事件-缩写是@

在这里插入图片描述

跑马灯效果制作

在这里插入图片描述

<!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>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <input type="button" value="开始" @click="start">
        <input type="button" value="停止" @click="stop">
        <h1>{{msg}}</h1>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '我是中国人',
                ID: null
            },
            methods: {
                start() {
                    if (this.ID != null) return;
                    this.ID = setInterval(() => {
                        var start = this.msg.substring(0, 1);
                        var end = this.msg.substring(1);
                        this.msg = end + start;
                    }, 400);
                },
                stop() {
                    clearInterval(this.ID);
                    this.ID = null;
                }
            }
        });

    </script>
</body>

</html>

事件修饰符的介绍

在这里插入图片描述

v-model实现表单元素的数据双向绑定

在这里插入图片描述

<!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>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <input type="text" v-model="msg">
        <h1>{{msg}}</h1>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '我是中国人',
            },
            methods: {

            }
        });

    </script>
</body>

</html>

使用v-model实现计算器

在这里插入图片描述

<!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>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <input type="text" v-model="n1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2">
        <input type="button" value="=" @click="calc">
        <input type="text" v-model="result">
        <h1>{{result}}</h1>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                n1: 0,
                n2: 0,
                opt: '+',
                result: 0
            },
            methods: {
                calc() {
                    var str = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)';
                    this.result = eval(str);
                }
            }
        });

    </script>
</body>

</html>

vue中通过属性绑定为元素设置class类样式

在这里插入图片描述

vue中通过属性绑定为元素绑定style行内样式

在这里插入图片描述

v-for指令的四种使用方式

在这里插入图片描述

<!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>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <h1 v-for="(item,i) in list">index: {{i}} value:{{item}}</h1>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [1, 2, 3, 4, 5]
            },
            methods: {

            }
        });

    </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>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <h1 v-for="(user,i) in list">index: {{i}} id:{{user.id}} name:{{user.name}}</h1>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: 1, name: "a" },
                    { id: 2, name: "b" },
                    { id: 3, name: "c" },
                    { id: 4, name: "d" },
                ]
            },
            methods: {

            }
        });

    </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>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <h1 v-for="(val,key) in list"> {{val}} {{key}}</h1>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: { id: 1, name: "a" }
            },
            methods: {

            }
        });

    </script>
</body>

</html>

在这里插入图片描述

v-for中key的使用注意事项

在这里插入图片描述

v-if和v-show的使用和特点

在这里插入图片描述

vue实现计数器

在这里插入图片描述

<!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>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <input type="button" value="-" @click="sub">
        <h1>{{result}}</h1>
        <input type="button" value="+" @click="add">
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                result: 1
            },
            methods: {
                add() {
                    if (this.result < 10) {
                        this.result++;
                    } else {
                        alert("不能>10");
                    }
                },
                sub() {
                    if (this.result > 0) {
                        this.result--;
                    } else {
                        alert("不能<0");
                    }
                }
            }
        });

    </script>
</body>

</html>

实现TODO List

在这里插入图片描述

<!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>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <span>输入你的TODO:</span><input type="text" @keyup.enter="add" v-model="inputVal">
        <ul>
            <li v-for="(item,index) in list">
                <h1>{{item}} <input type="button" :value="'删除 '+index" @click="remove(index)"> </h1>
            </li>
            <div v-show="list.length!=0">
                <h1>总数：{{list.length}} <input type="button" value="清空所有" @click="clear"></h1>

            </div>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                inputVal: "TODO",
                list: ["学习Java", "Redis入门", "Java并发编程", "K8S"]
            },
            methods: {
                add() {
                    this.list.push(this.inputVal);
                },
                remove(index) {
                    this.list.splice(index, 1);
                },
                clear() {
                    this.list = [];
                }
            }
        });

    </script>
</body>

</html>