Vue初体验（二），以 v- 前缀的指令

来源：互联网发布：淘宝公司介绍模板编辑：程序博客网时间：2024/04/30 14:01

1、v-bind指令。指令是Vue模仿angular的一种实现方式，通过指令，我们对界面的属性值进行操作，从而达到改变界面的目的。例如，class是决定界面样式的一个属性，我们进行如下改变。
这是我们不使用Vue最基本的前端界面：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Vue学习</title>    </head>    <style>        .style{            color: red        }    </style>    <body>        <div id="app">            <divclass='style'>                hello! mapbar_front!            </div>        </div>    </body></html>

结果就是hello! mapbar_front!

下面我们使用Vue和指令v-bind，它的方式是这样的：通过指令和表达式的方式操作界面。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Vue学习</title>        <script src="https://unpkg.com/vue/dist/vue.js"></script>    </head>    <style>        .style{            color: red        }    </style>    <body>        <div id="app">            <div v-bind:class="{'style':toggle}">                hello! mapbar_front!            </div>        </div>        <script>            new Vue({                el: '#app',                data: {                    toggle: true                }            })        </script>    </body></html>

我们把toggle的值改变为false，界面上的class不起作用，如果为true，就会起作用，字体颜色变为红色。
这就是今天的第一个指令v-bind。使用语法为
v-bind：属性=“”
属性值里面的‘style’:toggle — 表示如果toggle为true时，style类有效，为false时无效。

2、v-html指令，用于输出html代码。
使用方式：v-html=“变量名”。
代码如下：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Vue学习</title>        <script src="https://unpkg.com/vue/dist/vue.js"></script>    </head>    <style>        .style{            color: red        }    </style>    <body>        <div id="app">            <div v-html='message'>            </div>        </div>        <script>            new Vue({                el: '#app',                data: {                    message: '<h1>mapbar_front</h1>'                }            })        </script>    </body></html>

其中v-html的值是一个变量名。这个变量是一个html的字符串。

3、v-if指令。条件渲染，表明是否进行渲染该代码模块

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Vue学习</title>        <script src="https://unpkg.com/vue/dist/vue.js"></script>    </head>    <style>        .style{            color: red        }    </style>    <body>        <div id="app">            <div v-if='message'>                mapbar_front            </div>        </div>        <script>            new Vue({                el: '#app',                data: {                    message: false                }            })        </script>    </body></html>

把message的值改为true，就能展示文本内容marbar_front

4、v-for指令。列表渲染，可通过数组进行动态创建，渲染出样式相同的内容不同的列表。
语法格式：v-for=”item in array”,其中array是data中的数组，而item代表了每一项，in是语法关键字。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Vue学习</title>        <script src="https://unpkg.com/vue/dist/vue.js"></script>    </head>    <style>        .style{            color: red        }    </style>    <body>        <div id="app">            <ul>                <li v-for='item in message'>{{item.text}}</li>            </ul>        </div>        <script>            new Vue({                el: '#app',                data: {                    message: [                     {text:"前端基础一是HTML"},                     {text:"前端基础二是CSS"},                     {text:"前端基础三是JavaScript"},                    ]                }            })        </script>    </body></html>

输出结果是：
这里写图片描述

5、 v-model 指令。用来实现双向数据绑定。主要用于用户输入的input标签。

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Vue学习</title>        <script src="https://unpkg.com/vue/dist/vue.js"></script>    </head>    <style>        .style{            color: red        }    </style>    <body>        <div id="app">            <input v-model='message'/>            <p>我的输入：{{message}}</p>        </div>        <script>            new Vue({                el: '#app',                data: {                    message: "mapbar_front很厉害！"                }            })        </script>    </body></html>

总结：Vue中，大概常用的指令就这几个，使用v-if进行条件渲染，根据条件展示哪个模块。使用v-for进行列表渲染，根据数组动态生成列表。使用v-model进行用户输入处理，达到数据双向绑定的目的。如果想要动态的进行展示某个html代码模块，可以使用v-html。使用v-bind根据条件对属性进行动态绑定。
至于v-on这个重要的指令，会在单独的事件处理中讲解。

0 0