Vue.js之细说Vue指令

小灰灰 2022-05-16 07:51 167阅读 0赞

## 一、\{ \{插值表达式\}\}、v-text、v-html（向HTML插值） ##

这里我们会用到：**\{ \{插值表达式\}\}、v-text、v-html**  
1）概述

<div id="root">
                <h1>lance {
        {
        number}}</h1>
                <hr />
            </div>
            <script>
                new Vue({
                    el: '#root',
                    data: {
                        msg:'hello world',
                        number:123
                    }
                })
            </script>

“\{ \{number\}\}”：我们把\{ \{数据项名称\}\}叫做插值表达式。  
举例：

<div id="root">
                <h1>lance {
        {
        number}}</h1>
                <hr />
                <p v-text="number"></p>
                <hr />
                <p v-html="number"></p>
            </div>

在

表示p中的内容由number变量决定，v-text是vue中的一个指令。  
当然我们也可以使用v-html指令。  
2）v-text和v-html的区别

<div id="root">
                <div v-text="content"></div>
            </div>
            <script>
                new Vue({
                    el: '#root',
                    data: {
                        content:'<h1>hello world</h1>'
                    }
                })
            </script>

我们通过这个例子测试出：v-text会被转义，而v-html(正常显示样式)不会被转义。

## 二、v-on（绑定监听） ##

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，  
如果没有修饰符也可以省略。  
1）v-on  
是一个模板指令，比如

<div id="root">
                <div v-on:click="handleClick">{
        {
        content}}</div>
            </div>
            <script>
                new Vue({
                    el: '#root',
                    data: {
                        content:'hello'
                    },
                    methods: {
                        handleClick: function(){
          
                            alert(123);
                        }
                    }
                })
            </script>

给

<div v-on:click="handleClick">{
        {
        content}}</div>

标签绑定了一个click事件，在它被触发的时候就会去调用handleClick方法，这个方法  
定义在vue实例当中的methods这个对象当中。  
2）需求：把hello变成world？

<div id="root">
                <div v-on:click="handleClick">{
        {
        content}}</div>
            </div>
            <script>
                new Vue({
                    el: '#root',
                    data: {
                        content:'hello'
                    },
                    methods: {
                        handleClick: function(){
          
                            this.content = "world"
                        }
                    }
                })
            </script>

我们只需要在函数中，this.content去改变实例里面的数据，vue实例会监听到你数据的改变。  
自动的帮你对模板进行更新，页面就会自动的跟着变化了。  
所以说现在我们不是在面向dom变成而是在面向数据编程了。  
3）事件绑定的简写  
比如：

<div v-on:click="handleClick">{
        {
        content}}</div>

简写：

<div @click="handleClick">{
        {
        content}}</div>

所以说在之后的编程中绑定某个事件的话，我们直接使用@就可以了。

## 三、v-bind、v-model（属性绑定和双向数据绑定） ##

### 3.1 v-bind（属性绑定） ###

需求：我希望title中的提示语是可变的

<div id="root">
                <div title="this is hello world">hello world</div>
            </div>
    
            <script>
                new Vue({
                    el: '#root'
                })
            </script>

解决：

<div id="root">
                <div title="title">hello world</div>
            </div>
    
            <script>
                new Vue({
                    el: '#root',
                    data: {
                        title: 'this is hello world'
                    }
                })
            </script>

但是这样好像是不行的，只会显示title。那要怎么样才能做好属性的绑定呢？  
v-bind：这时我们需要使用一个新的模板指令v-bind。

<div v-bind:title="title">hello world</div>

当前这个title这个属性和vue实例中title数据项性绑定，，所以v-bind:title=”title”，  
双引号中的title指的就是data中的title。  
2）简写

<div :title="title">hello world</div>

使用v-bind:和使用:的效果是一样的

### 3.2 v-model（双向数据绑定） ###

1）限制与用法

<input>、<select>、<textarea>、components使用

用法：在表单控件或者组件上创建双向绑定。  
2）单向数据绑定

<div id="root">
                <div :title="title">hello world</div>
            </div>
            <hr />
            <input />
            <div>{
        {
        content}}</div>
            <script>
                new Vue({
                    el: '#root',
                    data: {
                        title: 'this is hello world',
                        content: 'this is content'
                    }
                })
            </script>

数据决定页面的显示，但是页面无法决定你数据里的内容。  
3）双向数据绑定

<div id="root">
                <div :title="title">hello world</div>
                <input :value="content" />
                <div>{
        {
        content}}</div>
            </div>
            <hr />
            <script>
                new Vue({
                    el: '#root',
                    data: {
                        title: 'this is hello world',
                        content: 'this is content'
                    }
                })
            </script>

我们改变input框中的值，但data中的content数据项的内容没有发生改变。

<div id="root">
                <div :title="title">hello world</div>
                
                <input v-model="content" />
                <div>{
        {
        content}}</div>
            </div>
            <hr />
            <script>
                new Vue({
                    el: '#root',
                    data: {
                        title: 'this is hello world',
                        content: 'this is content'
                    }
                })
            </script>

## 四、v-if、v-show、v-else、v-else-if（判断） ##

### 4.1 v-if、v-show ###

1）需求

<div id="root">
                <div> hello world</div>
                <button>点击N下</button>
            </div>
    
            <script>
                new Vue({
                    el: '#root'
                })
            </script>

效果：  
![KtC0SFh.png][]  
当我点击按钮的时候，hello world能关闭，再次点击有可以出来。。。  
2）实现

<div id="root">
                <div v-if="show"> hello world</div>
                <button @click="handleClick">点击N下</button>
            </div>
    
            <script>
                new Vue({
                    el: '#root',
                    data: {
                        show: true
                    },
                    methods:{
                        handleClick: function(){
         
                            this.show = !this.show;
                        }
                    }
                })
            </script>

当然我们也可以使用v-show实现这个功能：

<div id="root">
                
                <div v-show="show"> hello world</div>
                <button @click="handleClick">点击N下</button>
            </div>

3)v-if与v-show的区别  
v-show是在挂载点的节点中添加了display:none;的CSS属性。  
![gPHAr2C.png][]  
而：v-if是直接的注释掉挂载点  
![u7jIODF.png][]  
分析：当我们频繁：关闭和开启某个节点的时候，性能好的应该是v-show。  
因为它不会去频繁增删节点。如果不是很频繁则使用v-if。

### 4.2 v-else ###

1）限制  
前一兄弟元素必须有 v-if 或 v-else-if  
2）用法  
为 v-if 或者 v-else-if 添加“else 块”。

### 4.3 v-else-if ###

1）限制  
前一兄弟元素必须有 v-if 或 v-else-if。  
2)用法  
表示 v-if 的 “else if 块”。可以链式调用。

## 五、v-for（循环） ##

### 5.1 基础概念 ###

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定  
语法 alias in expression ，为当前遍历的元素提供别名：

另外也可以为数组索引指定别名 (或者用于对象的键)：  
我们去循环items这个数组，每一项我会放到item中，每一下的坐标我会放到index中去。

v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供  
一个 key 的特殊属性：  
:key属性：可以提升每一项的渲染效率

### 5.2 实例一 ###

html:

<ul id="example-1">
      <li v-for="item in items">
        {
        { item.message }}
      </li>
    </ul>

js：

var example1 = new Vue({
      el: '#example-1',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    })

结果：  
![hMphEmJ.png][]

### 5.3 一个对象的v-for ###

html：

<ul id="v-for-object" class="demo">
      <li v-for="value in object">
        {
        { value }}
      </li>
    </ul>

js:

el: '#v-for-object',
      data: {
        object: {
          firstName: 'John',
          lastName: 'Doe',
          age: 30
        }
      }
    })

结果：  
![KMKqD5D.png][]  
你也可以提供第二个的参数为键名：

<div v-for="(value, key) in object">
      {
        { key }}: {
        { value }}
    </div>

结果：  
![ToZu3nZ.png][]  
第三个参数为索引：

<div v-for="(value, key, index) in object">
      {
        { index }}. {
        { key }}: {
        { value }}
    </div>

结果：  
![BSDI1RN.png][]

[KtC0SFh.png]: https://i.imgur.com/KtC0SFh.png
[gPHAr2C.png]: https://i.imgur.com/gPHAr2C.png
[u7jIODF.png]: https://i.imgur.com/u7jIODF.png
[hMphEmJ.png]: https://i.imgur.com/hMphEmJ.png
[KMKqD5D.png]: https://i.imgur.com/KMKqD5D.png
[ToZu3nZ.png]: https://i.imgur.com/ToZu3nZ.png
[BSDI1RN.png]: https://i.imgur.com/BSDI1RN.png