2022-08-27 学习Vue

最新推荐文章于 2024-09-30 16:19:08 发布

激进的土豆

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量413

点赞数 3

分类专栏： html+css+js 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_49627122/article/details/126559427

版权

html+css+js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

Vue介绍

Vue--可以说是一个JavaScript的框架，由我们国家的大神尤雨溪制作的

首先需要导入vue.js：

<script src="js/vue.js"></script>

然后需要建立一个Vue实例，所有的操作都需要在Vue实例里完成：

ps:每个元素之间用,间隔

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属性:<h1 v-text="msg"></h1>或者<h1 v-html="msg"></h1>

属性/事件

属性绑定(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组合使用应用到浏览器上