vue基础学习笔记

相较于v-show，v-if操纵的是dom树，表达式的值为true,元素存在于dom树中,为false,从dom树中移除；而v-show操纵的是display。v-on可以简写成@。数组长度的更新会同步到页面上,是响应式的。根据后面布尔表达式的真假实现元素的隐藏。获取和设置表单元素的值（双向数据绑定），绑定的数据会和表单元素值相关联。设置标签的文本值，将标签内的内容完全替换为v-text绑定的值。

丘丘用户思思澪

245人浏览 · 2023-03-02 15:22:31

丘丘用户思思澪 · 2023-03-02 15:22:31 发布

1.v-text
设置标签的文本值，将标签内的内容完全替换为v-text绑定的值。
如果想要保留标签内的值，可以采用差值表达式的方式（<h2>text{{message}}</h2>）
内部值支持拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-text="message">{{message}}</h2>
        <!-- 测试全覆盖 -->
        <h2 v-text="message">Hi!</h2>
        <!-- 差值表达式 -->
        <h2>Hi!{{message}}</h2>
        <!-- 这样是不行的 -->
        <h2 v-text="message">Hi!{{message}}</h2>
        <!-- 测试拼接 -->
        <h2 v-text="message+'123'">{{message}}</h2>
        <h2>{{message+'456'}}</h2>

    </div>

    <script>
        const { createApp } = Vue
        createApp({
        data() {
        return {
            message: 'Hello!'
        }
        }
    }).mount('#app')
    </script>
    
</body>

在这里插入图片描述
2.v-html
设置标签的innerHTML。
如果内容是文本，与v-text功能一致。如果内容是html，则会解析为标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
        <p v-html="href"></p>
        <!-- 测试文本 -->
        <p v-html="message"></p>
        <!-- 测试v-text -->
        <p v-text="href">{{href}}</p>
        <!-- 测试优先级 -->
        <p v-html="href" v-text="href">{{href}}</p>

    </div>

    <script>
        const { createApp } = Vue
        createApp({
        data() {
        return {
            message:"hello!",
            href:"<a href='https://www.baidu.com'>baidu</a>",
        }
        }
    }).mount('#app')
    </script>
    
</body>

在这里插入图片描述
3.v-on
为元素绑定事件。事件绑定的方法写在methods中。v-on可以简写成@。而在方法中想要拿到data中数据，可以使用this关键字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
        <!-- <input type="button" value="事件" v-on:click="方法"> -->
        <input type="button" value="1" v-on:click="doit">
        <input type="button" value="2" v-on:dblclick="doit">
        <input type="button" value="3" v-on:monseenter="doit">
        <input type="button" value="4" @click="doit">

        <h2 @click="changefood">{{food}}</h2>
    </div>

    <script>
        const { createApp } = Vue
        createApp({
        data() {
            return {
                food:"食物",
            }
        },
        methods:{
            doit:function(){
                alert("123456");

            },
            changefood:function(){
                //使用this获取data中的food数据
                this.food += "好吃";
                console.log(this.food)
            },
        }
    }).mount('#app')
    </script>
    
</body>

在这里插入图片描述
4.v-show
根据后面布尔表达式的真假实现元素的隐藏。true为显示，false为隐藏。原理是修改元素的display,实现显示隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
        <img src="./bg.jpg" v-show="false">
        <img src="./bg.jpg" v-show="age>18">
        <img src="./cover.png" v-show="true">
        <img src="./cover.png" v-show="age<18">
    </div>

    <script>
        const { createApp } = Vue
        createApp({
        data() {
            return {
                age:17
            }
        }
    }).mount('#app')
    </script>
    
</body>

在这里插入图片描述
5.v-if
根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）。
相较于v-show，v-if操纵的是dom树，表达式的值为true,元素存在于dom树中,为false,从dom树中移除；而v-show操纵的是display。
频繁操作时选用v-show，反之采用v-if。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
        <input type="button" value="切换显示" @click="change">
        <p v-if="isshow">v-if hello!</p>
        <p v-show="isshow">v-show hello!</p>
    </div>

    <script>
        const { createApp } = Vue
        createApp({
        data() {
            return {
                isshow:false
            }
        },
        methods:{
            change:function(){
                this.isshow=!this.isshow
            }
        }
    }).mount('#app')
    </script>
    
</body>

在这里插入图片描述

6.v-bind
为元素绑定属性。可以缩写为：。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
        <img src="./cover.png">
        <br>
        <img :src="picurl" v-bind:title="imgtitle" v-bind:class="{active:isshow}" @click="change">
    </div>

    <script>
        const { createApp } = Vue
        createApp({
        data() {
            return {
                picurl:"./cover.png",
                imgtitle:"图片",
                isshow:false
            }
        },
        methods:{
            change:function(){
                this.isshow=!this.isshow
            }
        }
    }).mount('#app')
    </script>
    
</body>

在这里插入图片描述
7.v-for
根据数据生成列表结构。经常与数组结合使用。语法为( item,index ) in 数据。数组长度的更新会同步到页面上,是响应式的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        <li v-for="(item,index) in something">
            <div class="view">
                <span class="index">{{index+1}}.</span>
                <label>{{item}}</label>
                <button class="destory" @click="remove(index)">x</button>
                <button class="add" @click="add">o</button>
            </div>
        </li>
    </div>

    <script>
        const { createApp } = Vue
        createApp({
        data() {
            return{
                something:["1",'2','3','4','5']
            }
        },
        methods:{
            add:function(){
                this.something.push('666');
            },
            remove:function(index){
                console.log(index)
            }
        }
    }).mount('#app')
    </script>
    
</body>

在这里插入图片描述
8.v-model
获取和设置表单元素的值（双向数据绑定），绑定的数据会和表单元素值相关联。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        <input type="text" v-model="message" @keyup.enter="showmassage">
        <br>
        {{message}}

        <input type="button" value="changemassage" @click="changemassage">
    </div>

    <script>
        const { createApp } = Vue
        createApp({
        data() {
            return{
                message:"hello!"
            }
        },
        methods:{
            showmassage:function(){
                alert(this.message)
            },
            changemassage:function(){
                this.message = "hi!"
            }
        }
    }).mount('#app')
    </script>
    
</body>

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^