1.指令

什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

例如我们在入门案例中的v-on，代表绑定事件。

1.1.插值表达式

1.1.1.大括号

格式：

{{表达式}}

说明：

该表达式支持JS语法，可以调用js内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
可以直接获取Vue实例中定义的数据或函数

示例：

HTML：

<div id="app">{{name}}</div>

JS:

var app = new Vue({
    el:"#app",
    data:{
        name:"奇哥"
    }
})

1.1.2.插值闪烁

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。

我们将网速调慢一些，然后试试看刚才的案例：

【必看】Vue的几个简单的基本指令

刷新页面：

【必看】Vue的几个简单的基本指令

1.1.3.v-text和v-html

使用v-text和v-html指令来替代{{}}

说明：

v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

示例：

HTML:

<div id="app">
    <span v-text="hello"></span><br>
    <span v-html="hello"></span>

</div>

JS:

var vm = new Vue({
       el:"#app",
       data:{
           hello:'大家好，我是奇哥'
       }
    });

效果：

【必看】Vue的几个简单的基本指令

并且不会出现插值闪烁，当没有数据时，会显示空白。

1.2.v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

input
select
textarea
checkbox
radio
components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

1.2.1 input

Html:

<div id="app">
    <input type="text" v-model="num">
    <h2>{{num}}</h2>
    <input type="button" value="+" v-on:click="num++">
    <input type="button" value="-" v-on:click="num--">
</div>

<script>
    var vm = new Vue({
       el:"#app",
       data:{
           num:1
       }
    });

</script>

效果：

【必看】Vue的几个简单的基本指令

1.2.2 checkbox

html：

<div id="app">
    <input type="checkbox" v-model="language" value="Java" />Java<br/>
    <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
    <input type="checkbox" v-model="language" value="Swift" />Swift<br/>
    <h1>
        你选择了：{{language.join(',')}}
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            language: []
        }
    })
</script>

多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
radio对应的值是input的value值
input 和textarea 默认对应的model是字符串
select单选对应字符串，多选对应也是数组

效果：
【必看】Vue的几个简单的基本指令

1.2.3 radio

html：

<div id="app">
    <input type="radio" value="male" v-model="sex">男
    <input type="radio"  value="female" v-model="sex">女
    <h2>{{sex}}</h2>
</div>

<script src="vue-2.5.17.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           sex:'male'
       }
    });
</script>

效果：

【必看】Vue的几个简单的基本指令

1.2.4 textarea

html：

<div id="app">
    <input type="radio" value="male" v-model="sex">男
    <input type="radio"  value="female" v-model="sex">女
    <h2>{{sex}}</h2>
    <textarea v-model="sex"></textarea>
</div>

<script src="vue-2.5.17.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           sex:'male'
       }
    });
</script>

效果：

【必看】Vue的几个简单的基本指令

###5.2.5 select

html：

<div id="app">
    <input type="radio" value="male" v-model="sex">男
    <input type="radio"  value="female" v-model="sex">女
    <h2>{{sex}}</h2>
    <textarea v-model="sex"></textarea><br>
    <select v-model="favor">
        <option v-for="item in items" :value="item">{{item}}</option>
    </select>


</div>

<script src="vue-2.5.17.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           sex:'male',
           favor:'弹琴',
           items:['唱歌','跳舞','弹琴']
       }
    });
</script>

1.3.v-on：基本用法

v-on指令用于给页面元素绑定事件。

语法：

v-on:事件名="js片段或函数名"

示例：

<div id="app">
    <!--事件中直接写js片段-->
    <button v-on:click="num++">增加</button><br/>
    <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
    <button v-on:click="decrement">减少</button><br/>
    <h1>num: {{num}}</h1>
</div>
<script src="vue-2.5.17.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            decrement(){
                this.num--;
            }
        }
    })
</script>

效果：

【必看】Vue的几个简单的基本指令

另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

1.4.v-for

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

1.4.1.遍历数组

语法：

v-for="item in items"

items：要遍历的数组，需要在vue的data中定义好。
item：迭代得到的数组元素的别名

示例：ul显示

<div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} : {{user.gender}} : {{user.age}}
        </li>
    </ul>

</div>
<script src="vue-2.5.17.js"></script>
<script>
    var vm = new Vue({
       el:"#app",
       data:{
           users:[
               {name:"张三",gender:"男",age:21},
               {name:"李四",gender:"男",age:22},
               {name:"王二",gender:"女",age:23},
               {name:"赵六",gender:"男",age:24},
               {name:"孙七",gender:"男",age:25}
           ]
       }
    });
</script>

效果：
【必看】Vue的几个简单的基本指令

示例：表格显示

html代码：

<table border="1" cellpadding="0" cellspacing="0" width="300" height="200">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr v-for="user in users">
        <td>{{user.name}}</td>
        <td>{{user.gender}}</td>
        <td>{{user.age}}</td>
    </tr>

</table>

效果：

【必看】Vue的几个简单的基本指令

1.4.2.数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法

v-for="(item,index) in items"

items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从0开始。

示例

    <div id="app">
        <ul>
            <li v-for="(user,index) in users">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            </li>
        </ul>
    </div>

效果：

【必看】Vue的几个简单的基本指令

1.5.v-if和v-show

1.5.1.基本使用

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

语法：

v-if="布尔表达式"

示例：

    <div id="app">
        <!--事件中直接写js片段-->
        <button v-on:click="show = !show">点击切换</button><br/>
        <h1 v-if="show">
            你好
        </h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                show:true
            }
        })
    </script>

效果：

【必看】Vue的几个简单的基本指令

1.5.2.与v-for结合

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

示例：

    <div id="app">
        <ul>
            <li v-for="(user,index) in users" v-if="user.gender === '女'">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            </li>
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                users:[
               {name:"张三",gender:"男",age:21},
               {name:"李四",gender:"男",age:22},
               {name:"王二",gender:"女",age:23},
               {name:"赵六",gender:"男",age:24},
               {name:"孙七",gender:"男",age:25}
           ]
            }
        })
    </script>

效果：

1.5.3.v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”：

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

1.5.4.v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

示例：

    <div id="app">
        <!--事件中直接写js片段-->
        <button v-on:click="show = !show">点击切换</button><br/>
        <h1 v-if="show">
            你好
        </h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                show:true
            }
        })
    </script>

代码：

【必看】Vue的几个简单的基本指令

1.6.v-bind

1.6.1.绑定class样式

假如我们想动态的修改页面元素的属性，比如class属性，这样写是错误的：

<div class="{{isAcctive}}"></div>

因为插值表达式不能用在属性的值中。

Vue对class属性进行了特殊处理，可以接收数组或对象格式：

数组语法

我们可以借助于v-bind指令来实现：

HTML：

<div v-bind:class="isActive"></div>

你的data属性：

data:{
    isActive:['active','hasError']
}

渲染后的效果：

<div class="active hasError"></div>

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。

你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板:

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

和如下 data：

data: {
  isActive: true,
  hasError: false
}

结果渲染为：

<div class="static active"></div>

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError的值为 true，class 列表将变为 "static active text-danger"。

1.6.2.简写

v-bind:class可以简写为:class

【必看】Vue的几个简单的基本指令

1.指令

1.1.插值表达式

1.1.1.大括号

1.1.2.插值闪烁

1.1.3.v-text和v-html

1.2.v-model

1.2.1 input

1.2.2 checkbox

1.2.3 radio

1.2.4 textarea

1.3.v-on：基本用法

1.4.v-for

1.4.1.遍历数组

1.4.2.数组角标

1.5.v-if和v-show

1.5.1.基本使用

1.5.2.与v-for结合

1.5.3.v-else

1.5.4.v-show

1.6.v-bind

1.6.1.绑定class样式

1.6.2.简写

相关推荐