Vue 学习 - 基础语法

Posted Mazey

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 学习 - 基础语法相关的知识，希望对你有一定的参考价值。

Vue

Vue.js 的指令是以 v- 开头的，它们作用于 html 元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的 HTML 特性（attribute）。

v-if 指令

v-if 是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：

v-if="expression"

expression 是一个返回 bool 值的表达式，表达式可以是一个 bool 属性，也可以是一个返回 bool 的运算式。例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf(\'jack\') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: \'#app\',
            data: {
                yes: true,
                no: false,
                age: 28,
                name: \'keepfool\'
            }
        })
    </script>
</html>

v-show 指令

v-show 也是条件渲染指令，和 v-if 指令不同的是，使用 v-show 指令的元素始终会被渲染到 HTML，它只是简单地为元素设置 CSS 的 style 属性（display: none;）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-show="yes">Yes!</h1>
            <h1 v-show="no">No!</h1>
            <h1 v-show="age >= 25">Age: {{ age }}</h1>
            <h1 v-show="name.indexOf(\'jack\') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: \'#app\',
            data: {
                yes: true,
                no: false,
                age: 28,
                name: \'keepfool\'
            }
        })
    </script>
</html>

v-else 指令

可以用 v-else 指令为 v-if 或 v-show 添加一个“else 块”。v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-else>Name: {{ name }}</h1>
            <h1>---------------------分割线---------------------</h1>
            <h1 v-show="name.indexOf(\'keep\') >= 0">Name: {{ name }}</h1>
            <h1 v-else>Sex: {{ sex }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: \'#app\',
            data: {
                age: 28,
                name: \'keepfool\',
                sex: \'Male\'
            }
        })
    </script>
</html>

v-else 元素是否渲染在 HTML 中，取决于前面使用的是 v-if 还是 v-show 指令。这段代码中 v-if 为 true，后面的 v-else 不会渲染到 HTML；v-show 为 true，但是后面的 v-else 仍然渲染到 HTML 了。

v-for 指令

v-for 指令基于一个数组渲染一个列表，它和 javascript 的遍历语法相似：

v-for="item in items"

items 是一个数组，item 是当前被遍历的数组元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>
    <body>
        <div id="app">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Sex</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="person in people">
                        <td>{{ person.name  }}</td>
                        <td>{{ person.age  }}</td>
                        <td>{{ person.sex  }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: \'#app\',
            data: {
                people: [{
                    name: \'Jack\',
                    age: 30,
                    sex: \'Male\'
                }, {
                    name: \'Bill\',
                    age: 26,
                    sex: \'Male\'
                }, {
                    name: \'Tracy\',
                    age: 22,
                    sex: \'Female\'
                }, {
                    name: \'Chris\',
                    age: 36,
                    sex: \'Male\'
                }]
            }
        })
    </script>
</html>

v-bind 指令

v-bind 指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是 HTML 元素的特性（attribute），例如：v-bind:class。

v-bind:argument="expression"

下面这段代码构建了一个简单的分页条，v-bind 指令作用于元素的 class 特性上。

这个指令包含一个表达式，表达式的含义是：高亮当前页。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>
    <body>
        <div id="app">
            <ul class="pagination">
                <li v-for="n in pageCount">
                    <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? \'active\' : \'\'">{{ n + 1 }}</a>
                </li>
            </ul>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: \'#app\',
            data: {
                activeNumber: 1,
                pageCount: 10
            }
        })
    </script>
</html>

注意 v-for="n in pageCount" 这行代码，pageCount 是一个整数，遍历时 n 从 0 开始，然后遍历到 pageCount – 1 结束。

v-on 指令

v-on 指令用于给监听 DOM 事件，它的用语法和 v-bind 是类似的，例如监听 <a> 元素的点击事件：

<a v-on:click="doSomething">

有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。

Greet 按钮将它的单击事件直接绑定到 greet() 方法，而Hi按钮则是调用 say() 方法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <p><input type="text" v-model="message"></p>
            <p>
                <!--click事件直接绑定一个方法-->
                <button v-on:click="greet">Greet</button>
            </p>
            <p>
                <!--click事件使用内联语句-->
                <button v-on:click="say(\'Hi\')">Hi</button>
            </p>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: \'#app\',
            data: {
                message: \'Hello, Vue.js!\'
            },
            // 在 `methods` 对象中定义方法
            methods: {
                greet: function() {
                    // // 方法内 `this` 指向 vm
                    alert(this.message)
                },
                say: function(msg) {
                    alert(msg)
                }
            }
        })
    </script>
</html>

v-bind 和 v-on 的缩写

Vue.js 为最常用的两个指令 v-bind 和 v-on 提供了缩写方式。v-bind 指令可以缩写为一个冒号，v-on 指令可以缩写为 @ 符号。

<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? \'active\' : \'\'">{{ n + 1 }}</a>
<!--缩写语法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? \'active\' : \'\'">{{ n + 1 }}</a>
<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button>

综合示例

现在我们已经介绍了一些 Vue.js 的基础知识了，结合以上知识我们可以来做个小 Demo。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>
    <body>
        <div id="app">
            <fieldset>
                <legend>
                    Create New Person
                </legend>
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" v-model="newPerson.name"/>
                </div>
                <div class="form-group">
                    <label>Age:</label>
                    <input type="text" v-model="newPerson.age"/>
                </div>
                <div class="form-group">
                    <label>Sex:</label>
                    <select v-model="newPerson.sex">
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
                </div>
                <div class="form-group">
                    <label></label>
                    <button @click="createPerson">Create</button>
                </div>
        </fieldset>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Sex</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="person in people">
                    <td>{{ person.name }}</td>
                    <td>{{ person.age }}</td>
                    <td>{{ person.sex }}</td>
                    <td :class="\'text-center\'"><button @click="deletePerson($index)">Delete</button></td>
                </tr>
            </tbody>
        </table>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: \'#app\',
            data: {
                newPerson: {
                    name: \'\',
                    age: 0,
                    sex: \'Male\'
                },
                people: [{
                    name: \'Jack\',
                    age: 30,
                    sex: \'Male\'
                }, {
                    name: \'Bill\',
                    age: 26,
                    sex: \'Male\'
                }, {
                    name: \'Tracy\',
                    age: 22,
                    sex: \'Female\'
                }, {
                    name: \'Chris\',
                    age: 36,
                    sex: \'Male\'
                }]
            },
            methods:{
                createPerson: function(){
                    this.people.push(this.newPerson);
                    // 添加完newPerson对象后，重置newPerson对象
                    this.newPerson = {name: \'\', age: 0, sex: \'Male\'}
                },
                deletePerson: function(index){
                    // 删一个数组元素
                    this.people.splice(index,1);
                }
            }
        })
    </script>
</html>

附录

阅读原文：https://blog.mazey.net/1953.html

以上是关于Vue 学习 - 基础语法的主要内容，如果未能解决你的问题，请参考以下文章

vue3.2 基础及常用方法

vue2.0 代码功能片段

Vue 学习 - 基础语法

Vue学习计划(基础二)-模板语法,计算属性,侦听器

后端 学习 前端 Vue 框架基础知识

后端 学习 前端 Vue 框架基础知识