Java 后端学习笔记

提示

本文主要讲解 Vue 中的常用指令。@ermo

# 指令

# 文本

使用 Vue 最常用的方法就是使用双大括号语法动态插入文本值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">the site is: {{message}}</div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'ermo.cc'
            }
        });
    </script>
</body>
</html>

# v-text

v-text 代表设置标签的文本，更新元素的 textContent 内容。

v-text 的缺点就是替换的是标签内的全部内容，如果想要替换部分内容，应该使用双大括号语法。

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="app">
        <h2 v-text="message"></h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

此外 v-text 中的值还支持表达式语法。

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="app">
        <h2 v-text="message"></h2>
        <h2 v-text="message === null ? message + '1' : message + '2'"></h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

输出结果为。

Hello Vue!
Hello Vue!2

# v-html

v-html 的作用是设置元素 innerHTML 内容。

v-html 和 v-text 的区别就是前者可以渲染 html 元素，后者只能作为文本内容输出。

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                content: '<a href="#">超链接</a>'
            }
        });
    </script>
</body>
</html>

显示结果如下。

超链接

<a href="#">超链接</a>

# v-on

v-on 代表绑定事件监听器。

这里以监听 click 事件作为演示。

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="app">
        <input type="button" value="v-on演示" v-on:click="alertMessage">
        <input type="button" value="@演示" @click="alertMessage">
        <input type="button" value="dbclick演示" @dblclick="alertMessage">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: '#app',
            methods: {
                alertMessage: function() {
                    alert("v-on click");
                }
            }
        });
    </script>
    
</body>
</html>

在浏览器打开当前 html 文件，点击对应的 button 就会有 alert 弹窗出现。

v-on 的缩写形式为 @。

在事件绑定中如何传递参数呢？

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="app">
        <h2 @click="concatName"> {{personName}} </h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                personName: '张三'
            },
            methods: {
                concatName: function() {
                    this.personName += "三";
                }
            }
        });
    </script>
    
</body>
</html>

通过 this 就可以获取到当前绑定函数对应的 dom 数据值。

上述例子每点击一次“张三”，会在末尾拼接一个“三”字。

# v-show

v-show 指令根据表达式的真假可以切换 CSS display 属性。

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="app">
        <input type="text" value="一段简单的文字" v-show="isShow">
        <button @click="showMessage">切换文字显示</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isShow: false
            },
            methods: {
                showMessage: function() {
                    this.isShow = !this.isShow;
                }
            }
        });
    </script>
</body>
</html>

上述例子点击 button 可以显示和隐藏 input 内容。

# v-if、v-else、v-else-if

v-if 和 v-show 不同的是，前者不是通过样式来控制 dom 元素的隐藏与展示，而是直接进行创建和销毁 dom 元素。

v-else-if 和 v-if 的用法相同，适用于多个条件的情况。

v-else 不需要加任何条件表达式。

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="app">
        <div v-if="word == 'A'">A</div>
        <div v-else-if="word == 'B'">B</div>
        <div v-else-if="word == 'C'">C</div>
        <div v-else>Other word</div>

        <button @click="showMessage">切换文字显示</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                word: 'A'
            },
            methods: {
                showMessage: function() {
                    if (this.word == 'A') {
                        this.word = 'B';
                    } else if (this.word == 'B') {
                        this.word = 'C';
                    } else if (this.word == 'C') {
                        this.word = 'D';
                    } else {
                        this.word = 'A';
                    }
                }
            }
        });
    </script>
</body>
</html>

# v-bind

v-bind 的作用就是给元素动态绑定一个或者多个属性。

比如给一个样式做动态绑定可以这样写 v-bind:class="isActive ? 'active' : ''"，也可以简写为 :class="isActive ? 'active' : '' "

常用的属性有：src、class、title 等。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <span :class="isActive? 'active': ''" @click="clickSpan">一个 span 元素</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isActive: false
            },
            methods: {
                clickSpan: function() {
                    this.isActive = !this.isActive;
                }
            }
        });
    </script>
</body>
</html>

# v-for

v-for 可以遍历元素进行多次渲染。使用 v-for 有特定的语法 alias in expression。

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="app">
        <!-- 写法一 -->
        <ul>
            <li v-for="item in arr">
                {{item}}
            </li>
        </ul>
        <!-- 写法二 -->
        <ul>
            <li v-for="(item, index) in arr">
                索引：{{index}}，值：{{item}}
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                arr: [1, 2, 3, 4, 5]
            }
        });
    </script>
</body>

</html>

# v-model

v-model 可以获取和设置表单元素的值。对表单元素的值和 Vue 实例上对应的 data 数据进行双向绑定。修改任何一方，另一方的数据会实时更改。

（1）单行文本

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="app">
        <input type="text" v-model="message" placeholder="输入文字">
        <p>您输入的文字是：{{message}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: ""
            }
        });
    </script>
</body>
</html>

（2）复选框

下例为单个复选框的示例代码。

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="app">
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                checked: false
            }
        });
    </script>
</body>
</html>

多个复选框的数据绑定。

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="app">
        <input type="checkbox" id="java" value="java" v-model="selectLanguages">
        <label for="java">Java</label>
        <input type="checkbox" id="PHP" value="PHP" v-model="selectLanguages">
        <label for="PHP">PHP</label>
        <input type="checkbox" id="JavaScript" value="JavaScript" v-model="selectLanguages">
        <label for="JavaScript">JavaScript</label>
        <br>
        <span>选中的语言：{{selectLanguages}}</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                selectLanguages: []
            }
        });
    </script>
</body>
</html>

（3）单选按钮

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="app">
        <input type="radio" id="java" value="java" v-model="language">
        <label for="java">java</label>

        <input type="radio" id="php" value="php" v-model="language">
        <label for="php">php</label>

        <input type="radio" id="javascript" value="javascript" v-model="language">
        <label for="javascript">javascript</label>
        <br>
        <p>您选择的语言是：{{language}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                language: ''
            }
        });
    </script>
</body>
</html>

（4）选择框

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="app">
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option >Java</option>
            <option >PHP</option>
            <option >JavaScript</option>
        </select>

        <span>您的选择是：{{selected}}</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                selected: ''
            }
        });
    </script>
</body>
</html>
上次更新: 2/15/2023, 7:38:01 AM

← 模板语法 →