2022-08-27 学习Vue


const app = new Vue({
    // el用来给Vue实例一个作用域
    el:"#app",//根据获取选择器的方式:id=app
    data: {
        // 用来给Vue定义一些相关的数据
        msg: "欢迎使用Vue",
        },
});

插值表达式

Vue专门的一种方式：用两个大括号包括Vue里的数据


<div id="app">
    
    <h1>{{msg}}h1>
div>

多种存取方式:


const app = new Vue({
    el: "#app",
    data: {
        user: {
            msg:"hello Vue",
            name :"admin",
            password: "123456",
        },
        lists: ["北京","上海","广州","深圳","杭州"],//数组
        users: [{name:"小强",age:25},{name:"小红",age:18}]
     },
});

怎么获取这些值呢？


<div id="app">
    <h1>{{user.msg}} --- {{user.name}} --- {{user.password}}h1>
    <h1>{{lists[0]}}---{{lists[3]}}---{{lists[4]}}h1>
    <h1>{{users[0].name}} --- {{users[0].age}}h1>
    <h1>{{user.msg.indexOf('u')}}h1>//获取下标
div>

插值闪烁问题：

什么是插值闪烁:

当网络环境不好的时候会出现插值表达式，然后等到网络环境好的时候才能成功翻译成功

插值闪烁会先出现：{{msg}},等到网络好嘞会出现:Vue内容

避免插值闪烁：

在标签内添加Vue属性:

或者

属性/事件

属性绑定(v-bind:src)--简写:src

可以通过Vue---data写src属性，来赋值

事件绑定(v-on:click)---简写@click

可以通过Vue--methods写函数事件:click里可以传参数,并在方法里可以获取到

通过实例来简单了解以下click事件：


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <h1>年龄：{{age}}</h1>
            <input type="button" value="通过Vue的事件改变年龄每次+1" v-on:click="addage">
            <input type="button" value="通过Vue的事件改变年龄每次-1" @click="subage">
        </div>
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    msg:"hello Vue",
                    age: 23,
                },
                methods: {
                    addage: function() {
                        // 想办法拿到data中的age属性，让它自增
                        // this代表的是整个的vue实例
                        this.age ++;
                    },
                    subage() {
                        this.age --;
                    }
                }
            });
        </script>
    </body>
</html>

显示/隐藏

v-show/v-if:效果都是一样的都可以赋值true/false----可以控制显示或者隐藏

代码：


        <div id="app">
            <h1 v-show="flag">欢迎光临</h1>
            <button @click="toggle">显示 / 隐藏</button>
        </div>
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    flag:true,
                },
                methods: {
                    toggle() {
                        this.flag = !this.flag;
                    }
                },
            });
        </script>

面试题：

v-if和v-show的区别：

v-if直接操作DOM元素，底层---------浏览器不会出现任何的相关标签;

v-show是通过css控制DOM元素-----浏览器里标签的display属性设置为none;

鼠标移动事件

@mouseover-------鼠标移动

@mouseout---------鼠标移除

v-for属性

v-for写在哪一个标签中，就会生成多个对应的标签

ps:在使用v-for的时候，一定要加入:key,用来给vue内部提供重用和排序的唯一的值

例子：


        <div id="app">
            <span v-for="(value,key,index) in user">
                {{index}} --- {{key}} --- {{value}}<br>
            </span>
            <ul>
                <li v-for="(value,index) in lists">
                    {{index}} --- {{value}}
                </li>
            </ul>
            <ol>
                <li v-for="(u,index) in users" :key="u.id">
                    {{index}} --- {{u.name}} --- {{u.age}}
                </li>
            </ol>
        </div>
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                
                el: "#app",
                data: {
                    user:{name:"小强",age:23},
                    lists: ["北京","上海","广州","深圳","杭州"],
                    users: [{name:"小强",age:25},{name:"小红",age:18}]
                },
            });
 
        </script>

Vue核心双向绑定

1、HTML部分发生变化，Vue实例中对应的属性也会变化

2、Vue中发生变化，HTML中同样变化

1、使用v-model指定可以实现数据的双向绑定

2、所谓的双向绑定，表单中的数据和Vue实例中data的数据变化是同步的MVVM架构：双向绑定机制

Model：数据

View：页面，页面展示数据

VM：ViewModel 监听器

文本框示例：


    <div id="app">
        <input type="text" v-model="message">
        <br>
        <input type="text" v-model="message" value="message">
        <br>
        <span>{{message}}</span>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app= new Vue({
            el:"#app",
            data:{
                message:'',
            },
        });
    </script>

单选框:

必须设置name="gender",然后可以通过设置gender的Vue属性来设置选中


        <input type="radio" name="gender" value="m" V-model="gender">男
        <input type="radio" name="gender" value="w" V-model="gender">女

多选框:

设置hobby的属性必须设置为数组eg:hobby:[],否则会失效，选一个就会全选。


        <input type="checkbox" v-model="hobby" value="A">A
        <input type="checkbox" v-model="hobby" value="B">B
        <input type="checkbox" v-model="hobby" value="C">C
        <input type="checkbox" v-model="hobby" value="D">D

下拉框:

获取的是选中的value值


        <select name="" id="" v-model="sel">
            <option value="x">X</option>
            <option value="y">Y</option>
            <option value="z">Z</option>
        </select>

在Vue里给数组增删改查的方式:

末尾增加元素	.push()
删除末尾元素	.pop()
反转元素	.reverse()
从小到大排序	.sort()
查找	.find()
包含	.includes()
从指定位置删除指定个数元素	.splice(x,x)

案例：写一个简易的记事本的实例：


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="x">
            <button @click="add">添加</button>
            <ul>
                <li v-for="(value,index) in lists">{{value}}<a href="#"
                        @click="del(index)">删除</a></li>
            </ul>
            <span>总数量:{{span}}</span>
            <button @click="delAll">删除所有</button>
        </div>
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
            el:"#app",
            data: {
                span:"2",
                x:'',
                lists:["a","b"],
            },
            methods:{
                add(){
                    this.span=this.lists.length+1;
                    this.lists.push(this.x);
                    this.x='';
                },
                del(index){
                    this.span=this.lists.length-1;
                    this.lists.splice(index,1);
                },
                delAll(){
                    this.lists=[];
                    this.span=0;
                }
            },
        });
    </script>
    </body>
</html>

其实大家细心的话，可以看出来，vue的解析过程，最终展现出来的HTML页面,是没有vue语法的，所以说，vue很厉害，他会解析成css+html组合使用应用到浏览器上

相关阅读:
银行招聘问题集锦
 软件测试面试题：黑盒测试、白盒测试以及单元测试、集成测试、系统测试、验收测试的区别与联系？
openGauss学习笔记-239 openGauss性能调优-SQL调优-调优流程
 心电贴技术方案芯片LH001-91
ICCV, ECCV, CVPR，IEEE的关系
 用嘉立创查找元件的原理图
 Ardunio开发——I2C协议通讯——控制2x16LCD
一文5000字从0到1使用Jmeter实现轻量级的接口自动化测试（图文并茂）
vue3+antdv 表格封装
 基于or-tools的护士排班问题建模求解
原文地址：https://blog.csdn.net/weixin_49627122/article/details/126559427