vue 指令-优快云博客

本文深入探讨了Vue.js框架的核心特性，包括数据驱动视图、MVVM模式、声明式指令等。详细解析了条件渲染（v-if、v-show）、列表渲染（v-for）、事件监听（v-on）、计算属性及v-model的双向数据绑定机制。通过实例演示了如何使用Vue.js进行高效、灵活的前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心思想：数据驱动视图

MVVM

声明式指令

一、条件渲染

1、v-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>
    other
</div>

script

var app = new Vue({
    el: '#app',
    data: {
        name: "tom",
        age: 24,
        show: false,
        type: 'B',
        isShow: false,
    },

2、v-show

<h2 v-show="isShow">嘿嘿嘿</h2>

注意：区别

v-if : 真正的条件渲染，切换开销高

v-show: 惰性条件渲染，初始化开销高，利用css的display:none

3、v-if与v-for一起使用

v-for的优先级高于v-if，一般v-if和v-for不一起使用

二、class 与 style

1、v-bind

绑定字符串

与属性进行绑定

格式：v-bind:属性名称="变量名称"

<img v-bind:src="imgSrc" v-bind:alt="alt" v-bind:title="title">

currentTime = new Date().toLocaleString();

data

imgSrc: "./images/1.jpg",
title: '老婆',
// 模板字符串
alt: `加载时间${currentTime}`,

绑定style

style

<style>
    .c1 {
        height: 200px;
        width: 200px;
        background-color: brown;
    }
    .c2 {
        height: 200px;
        width: 200px;
        background-color: blue;
    }
</style>

html

<div class="c1" v-bind:class="{c2: isBlue}"></div>
<button v-on:click="changeColor">切换颜色</button>

data

isBlue: false,

methods

changeColor(){
    this.isBlue = !this.isBlue;
}

绑定html

v-html

<div v-html="s"></div>

s:"Hi",

三、事件监听

v-on:操作="函数名"

简写@操作="函数名"

methods

1.clcik
2.mouseenter
3.mouseleave

四、列表渲染

<div>
    <img v-bind:src="currentSrc" alt="">
    <ul>
        <li v-for="(item, index) in imgArr" @click="clickImg(item)">{{index+1}}</li>
    </ul>
</div>

data

imgArr: [
    {id:1, src: "./images/1.jpg"},
    {id:2, src: "./images/2.jpg"},
    {id:3, src: "./images/3.jpg"},
    {id:4, src: "./images/4.jpg"},
],
currentSrc: "./images/1.jpg",
currentIndex: 0,

methods

clickImg(item){
    // console.log
    this.currentSrc = item.src;
},
nextImg(){
    // alert(123)
    console.log(this.currentIndex)
    console.log(this.imgArr.length-1)
    if(this.currentIndex==this.imgArr.length-1){
        this.currentIndex = 0;
    }
    this.currentIndex += 1;
    console.log(this.imgArr[this.currentIndex].src);
    this.currentSrc = this.imgArr[this.currentIndex].src;
}

五、声明周期

created(){}方法

六、计算属性

computed

<div id="computed">
    <div>
       {{reverseStr}} 
    </div>
    <button @click="clickHandler">修改</button>
</div>

computed:{
    reverseStr(){
        return this.msg.split('').reverse().join('');
    },
},

methods:{
    clickHandler(){
        // alert(123)
        this.msg = "Hello China";
    },
},

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性</title>
</head>
<body>
    <div id="computed">
        <div>
           {{reverseStr}} 
        </div>
        <button @click="clickHandler">修改</button>
    </div>
    <script src="./js/vue.js"></script>
    
    <script>
        var com = new Vue({
            el: '#computed',
            data:{
                msg: "Hello World",     
            },
            methods:{
                clickHandler(){
                    // alert(123)
                    // this.msg = "Hello China";
                    this.reverseStr = "Hello China";
                },
            },
            computed:{
                reverseStr:{
                    set:function(newValue){
                        this.msg = newValue;
                    },
                    get:function(){
                        return this.msg.split('').reverse().join('');
                    },
                },
            },
        })
    </script>
</body>
</html>

六、v-model 只和form组件有关

双向监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="computed">
        <input type="text" v-model='msg'>
        <p>{{msg}}</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var con = new Vue({
            el: "#computed",
            data:{
                msg: "123",        
            },
            methods:{},
            computed:{},
        })
    </script>
</body>
</html>

双向监听 = 单向监听 + UI

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="computed">
        <!-- <input type="text" v-model='msg'> -->
        <input type="text" :value="getValue" @input="msgChange">
        <p>{{getValue}}</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var con = new Vue({
            el: "#computed",
            data:{
                msg: "",        
            },
            methods:{
                msgChange(e){
                    this.getValue = e.target.value;
                },
            },
            computed:{
                getValue:{
                    set:function(newValue){
                        this.msg = newValue;
                    },
                    get:function(){
                        return this.msg;
                    }
                },
            },
        })
    </script>
</body>
</html>

lazy

<input type="text" v-model.lazy='msg'>

当点击其它地方时，数据同步

number

<input type="number" v-model.number='msg'>

只显示数字

trim

<input type="text" v-model.trim='msg'>

去除前后空格

阻止表单提交

<form id="computed" @submit.prevent>
        <!-- <input type="text" v-model='msg'> -->
        <!-- <input type="text" v-model.lazy='msg'> -->
        <input type="text" v-model.trim='msg'>
        <!-- <input type="text" :value="getValue" @input="msgChange"> -->
        <p>{{msg}}</p>
        <input type="submit" value="提交">
</form>

转载于:https://www.cnblogs.com/wt7018/p/11489357.html