Vue.js常用指令分享

Eren_acd

已于 2023-12-28 10:36:35 修改

阅读量1.7k

点赞数 51

文章标签： vue.js 前端 javascript

于 2023-12-28 10:35:31 首次发布

本文链接：https://blog.csdn.net/Eren_acd/article/details/135260550

版权

一、data数据对象

data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。

var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

data定义的数据通过插值语法(“{{}}”)绑定到DOM节点，data数据对象有以下两种写法：

1.对象的形式：

 <div id="app">
        <p>{{msg}}</p>
        <p>姓名：{{name}}年龄：{{year}}</p>
    </div>
    <script>
        var app= new Vue(
            {
                el:'#app',
                data: {
                    msg: 'hello!',
                    name:'张三',
                    year:18
                }
            }
        );
        
    </script>

2.函数的形式：

 <div id="app">
        <p>{{msg}}</p>
        <p>姓名：{{name}}年龄：{{year}}</p>
    </div>
    <script>
        var app= new Vue(
            {
                el:'#app',
                data(){
                    return:{
                        msg: 'hello!',
                        name:'张三',
                        year:18
                    }
                    
                }
            }
        );
        
    </script>

运行结果：

二、methods方法

methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。

在methods方法中访问 data 的数据，可以直接通过 this.属性名的形式来访问，this表示Vue实例

1.使用实例：

<div id="app">
        <div>
            <p>tip:点击按钮把{{msg}}字样修改为“新文本”</p>
            <button v-on:click="btnClick">点击</button>
        </div>

    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "旧文本"
            },
            methods:{
                btnClick(){
                    this.msg="新文本"
                }
            }
        })
    </script>

运行结果：

三、常用指令

指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。

Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-bind、v-on等。

1.v-text：

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

<div id="app" v-text="msg"></div>
    <script>
        var app= new Vue(
            {
                el:'#app',
                data:{
                    msg:"Hello,v-text"
                },
                methods:{      
                }
            }  
        );
    </script>

运行结果：

2.v- html：

v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。

 <div id="app" v-html="msg"></div>
    <script>
        var app= new Vue(
            {
                el:'#app',
                data:{
                    msg:"<h1>Hello,v-text</h1>"
                },
                methods:{      
                }
            }  
        );
    </script>

运行结果：

3.v-bind：

v-bind指令用于实现单向动态数据绑定，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="../vue.js"></script>
    <style>
        .box1{
            color: pink;
        }

    </style>
</head>
<body>
    <div id="app">
        <div :class="className1">{{msg}}</div>
    </div>
    <script>
        var app= new Vue(
            {
                el:'#app',
                data(){
                    return{
                        msg:"hello v-bind",
                        className1:'box1'
                    }
                },
                methods:{      
                }
            }  
        );
    </script>
</body>
</html>

运行结果：

4.v-on：

v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="../vue.js"></script>
    <style>
        .active{
            background-color: red;
        }
        .gray{
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="length++">边长+1</button>
        <button @click="change1">边长+1</button>
        <button @click="change2(3)">边长+3</button>
        <button @click="change3" value="10">边长+10</button>
        <button @click="change4(3,$event)" value="100">边长+3*100</button>
        <h1>正方形的边长是{{length}}</h1>
    </div>
    <script>
        var app= new Vue(
            {
                el:'#app',
                data :function() {
                    return{
                        length:2
                    }
                },
                methods:{
                    change1(){
                        this.length++;
                    },
                    change2(n){
                        this.length+=n;
                    },
                    change3(event){
                        this.length+=Number(event.target.value);
                    },
                    change4(num,event){
                        this.length+=Number(event.target.value)*num;
                    }
                }
            }  
        );
        
    </script>
</body>
</html>

运行结果：

5.vo-for：

v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for，它需要结合着in或者of来使用。

<div id="app">
        <ul>
            <li v-for="(item,index) of school" :key="index">
                {{item}}
            </li>
        </ul>
    </div>
    <script>
        var app= new Vue(
            {
                el:'#app',
                data:{
                    school: ['小学','初中','高中','大学']
                },
                methods:{
                    
                }
            }  
        );
        
    </script>

运行结果：

6.v-model：

v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。

<div id="app">
        <p>{{msg}}</p>
            <div>
                <p><input type="text" v-bind:value="msg" v-on:input="changMsg"></p>
                <p><input type="text" v-model="msg"></p>
            </div>
    </div>
    
    <script>
        var app= new Vue(
            {
                el:'#app',
                data :{
                    msg:"11",
                },
                methods:{
                    changMsg(e){
                        this.msg=e.target.value
                    }
                }
            }  
        );
        
    </script>

运行结果：

7.v- if和v-else

v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。

<div id="app">
        <p v-if="seen">1</p>
        <p v-else>0</p>

        <p v-if="score>=90">优秀</p>
        <p v-else-if="score>=80">良好</p>
        <p v-else-if="score>=70">一般</p>
        <p v-else>0</p>
        
       
    </div>
    
    <script>
        var app= new Vue(
            {
                el:'#app',
                data :{
                    seen: true,
                    score:90,
                },
                methods:{
                    
                }
            }  
        );
        
    </script>

运行结果：

8、v-show

v-show是另一个条件渲染语句，用于根据条件展示元素，用法与v-if大致一样。

带有v-show的元素始终会被渲染并保留在DOM中，v-show指令使用css样式来控制元素的显示/隐藏。值得注意的是，注意，v-show不支持<template>元素，也不支持v-else。

<div id="app">
        <p v-show="seen">3</p>
        <p v-show="!seen">4</p>
    </div>
    
    <script>
        var app= new Vue(
            {
                el:'#app',
                data :{
                    seen: true
                },
                methods:{
                    
                }
            }  
        );
        
    </script>

运行结果：