【Vue系列一】—Vue学习历程的知识分享！

最新推荐文章于 2024-10-17 10:08:04 发布

Star Universe

最新推荐文章于 2024-10-17 10:08:04 发布

阅读量922

点赞数 30

分类专栏：星星的学习历程文章标签： vue.js 学习 javascript 前端经验分享 vue

本文链接：https://blog.csdn.net/m0_60623820/article/details/141960341

版权

星星的学习历程专栏收录该内容

17 篇文章 0 订阅

订阅专栏

前言

经过前面Js部分的学习和理解，我们已经掌握的差不多了，我们接下来学习目前前端框架中最易上手和理解的Vue2框架的基本使用和学习

一、Vue框架的优点

渐进式 JS 框架
渐进式：可以只使用单独的一部分模块，由浅到深，由简单到复杂
声明式渲染 -> 组件系统 -> 客户端路由 ->集中式状态管理 -> 项目构建
易用性、灵活性、渲染高效性
体积小
效率高
双向数据绑定
生态丰富，学习成本低

二、基本使用

引入Vue.js

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

使用Vue的语法

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello world'
    }
});

填充数据到标签里

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

综合如下：

<div id="app">{{ msg }}</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello world'
        }
    });
</script>

三、Vue模板语法

前端渲染

通过模板语法把数据填充到HTML标签内

原生JS拼接字符串

原理：基本上就是将数据以字符串的方式拼接到 HTML 标签中
缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来

使用前端模板引擎

优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护
缺点：没有提供事件机制，事件的处理一般依赖事件委托

使用Vue特有的模板语法

插值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构

四、Vue指令

本质是Vue的自定义属性，以 v- 开头

v-clock

可以隐藏未编译的 Mustache 标签直到实例准备完毕

问题：先出现大括号之后，再出现内容

解决：

先隐藏模板语法，替换好之后会再显示最终的值

<div id="app" v-cloak>{{ msg }}</div>




<style>
[v-cloak]{
    display: none;
}
</style>

v-text

填充纯文本
没有“闪动”的问题，注意这里“闪动”的意思是：先出现“Mustache”语法 (双大括号) 再出现内容

v-html

填充 HTML 片段
存在安全性问题，关于 XSS攻击
一般本网站数据可以使用，来自第三方的数据或者用户数据的数据要小心使用

v-pre

填充原始信息，注意用法和上面两个不一样
显示原始信息，跳过编译过程

v-once

只编译一次，一旦显示内容之后不再具有响应式功能
应用场景：如果显示的信息后续不需要再修改，提高性能！

v-model

双向数据绑定：数据引起视图变化，视图也会引起数据变化

<div id="app" v-cloak>
    <p>{{ msg }}</p>
    <input type="text" v-model="msg">
</div>

底层原理是通过 Object.defineProperty 实现的

关于底层源码探索有兴趣的可以私信我获取~

MVVM思想

M 数据
V 视图
VM （ViewModel）负责视图到数据、数据到视图的逻辑处理
视图到数据通过 DOM Listeners
数据到视图通过 Data Bindings

五、事件绑定

v-on：和@符号

<p @click='handle'>{{ num }}</p>
<p @click='handle()'>{{ num }}</p>




var vm = new Vue({
    el: '#app',
    data: {
        num: 1
    },
    methods: {
        // 这里函数的3种写法
        handle: function() {
            // this 是 Vue 的实例，注意这里不能用箭头函数
            this.num++;
        }
    },
});

参数传递和事件对象

不传其他参数的情况下写不写 $event 都能够拿到事件对象，否则必须要写 $event

<button @click="handleClick">+</button>

<button @click="handleClick($event)">+</button>

传递其他参数的情况下要通过 $event 拿到事件对象，与 $event 的书写位置无关

事件修饰符

阻止冒泡

阻止默认行为

<form v-on:submit.prevent="onSubmit"></form>

注意点：

相同点是点击自己的时候，自己绑定的事件肯定会触发，默认行为也会阻止
不同点是：默认行为是否可以被儿子触发

@click.self.prevent，默认行为可以被儿子触发
@click.prevent.self，默认行为将不会被触发（无论是点击自己还是点击儿子）

绑定多个事件

绑定多个不同的事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<body>
    <div>
        <p>{{msg}}</p>
        <button v-on="{ click: handleClick, mouseover: handleMouseover }">按钮</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            name: 'App',
            data: {
                msg: 'hello'
            },
            methods: {
                handleClick() {
                    this.msg = 'handleClick';
                },
                handleMouseover() {
                    this.msg = 'handleMouseover';
                }
            },
        });
    </script>
</body>

</html>

绑定多个相同的事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<body>
    <div>
        <p>{{msg1}}</p>
        <p>{{msg2}}</p>
        <button v-on:click="handleClick1(), handleClick2()">按钮</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            name: 'App',
            data: {
                msg1: 'hello',
                msg2: 'hello'
            },
            methods: {
                handleClick1() {
                    this.msg1 = 'handleClick1';
                },
                handleClick2() {
                    this.msg2 = 'handleClick2';
                }
            },
        });
    </script>
</body>

</html>

按键修饰符

可以限制那个按键按下的时候才触发，一般配合 keyup 使用

定义的时候不能使用 camelCase（驼峰写法）

enter

关键字写法

<input v-on:keyup.enter='submit'>

keyCode 写法

<input v-on:keyup.13="submit">

delete

<input v-on:keyup.delete='clearAll'>

六、用Vue实现一个计算器的效果

重点：v-model

<!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>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <span>数值A：</span>
            <input type="text" v-model="a">
        </div>
        <div>
            <span>数值B：</span>
            <input type="text" v-model="b">
        </div>
        <div>
            <button v-on:click='handle'>计算</button>
            <span v-text="result"></span>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                a: '',
                b: '',
                result: ''
            },
            methods: {
                handle: function () {
                    this.result = parseInt(this.a) + parseInt(this.b);
                }
            },
        });
    </script>
</body>

</html>

七、属性绑定

动态属性绑定

<div id="app">
    <a v-bind:href="url">百度</a>
    <!-- <a :href="url">百度</a> -->
    <button v-on:click='handle'>切换</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    Vue.config.keyCodes.aaa = 65;
    var vm = new Vue({
        el: '#app',
        data: {
            url: 'http://www.baidu.com'
        },
        methods: {
            handle: function () {
                this.url = 'http://www.qq.com';
            }
        },
    });
</script>

v-model的实现分析

<div id="app">
    {{ msg }}
    <input type="text" v-bind:value="msg" v-on:input='handle'>
    // 另一种写法
    <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    Vue.config.keyCodes.aaa = 65;
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        },
        methods: {
            handle: function(event) {
                this.msg = event.target.value;
            }
        },
    });
</script>

class样式处理

对象语法

<div id="app">
    <div v-bind:class="{active: isActive, bor: isBor}">
        {{ msg }}
    </div>
    <button v-on:click="handle">切换</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    Vue.config.keyCodes.aaa = 65;
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello world',
            isActive: true,
            isBor: true
        },
        methods: {
            handle: function() {
                this.isActive = !this.isActive;
                this.isBor = !this.isBor;
            }
        },
    });
</script>

数组语法

<div id="app">
    <div v-bind:class="[activeClass, borClass]">
    // 或者
    <div v-bind:class="['active', 'bor']">
        {{ msg }}
    </div>
    <button v-on:click="handle">切换</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    Vue.config.keyCodes.aaa = 65;
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello world',
            activeClass: 'active',
            borClass: 'bor'
        },
        methods: {
            handle: function() {
                this.activeClass = '';
                this.borClass = '';
            }
        },
    });
</script>

对象绑定和数组绑定可以结合使用
class绑定的值可以放在data里
默认自带的class会保留

八、循环结构

v-if

<div id="root">
    <div v-if='score>=90'>优秀</div>
    <div v-else-if='score>=80'>良好</div>
    <div v-else-if='score>=60'>一般</div>
    <div v-else>差</div>
</div>

v-show

<div id="app">
    <div v-if='flag'>测试</div>
    <div v-show='flag'>测试</div>
    <button v-on:click='handle'>切换</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    Vue.config.keyCodes.aaa = 65;
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello world',
            flag: false
        },
        methods: {
            handle: function() {
                this.flag = !this.flag;
            }
        },
    });
</script>

v-if和v-show的区别

v-if: 是否渲染到页面
v-show: 是否显示到页面

v-for

可以遍历数组和对象

代码为遍历数组

<div id="app">
    <div v-for="item in fruits">{{item}}</div>
    <div v-for="(item, index) in fruits">{{item + '--' + index}}</div>
    <div v-for="item in myFruits">
        <span>{{item.ename}}</span>
        <span>---</span>
        <span>{{item.cname}}</span>
    </div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            fruits: ['apple', 'orange', 'banana'],
            myFruits: [{
                ename: 'apple',
                cname: '苹果'
            },{
                ename: 'orange',
                cname: '橘子'
            },{
                ename: 'banana',
                cname: '香蕉'
            }]
        }
    });
</script>

key的作用：帮助Vue区分不同的元素，从而提高性能

v-if和v-for结合使用

<div id="app">
    <!-- 如果 value 等于 xxx 才渲染 -->
    <div v-if='value=="xxx"' v-for="(value, key, index) in obj">
        {{value + '~~~' + key + '~~~' + index}}
    </div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    Vue.config.keyCodes.aaa = 65;
    var vm = new Vue({
        el: '#app',
        data: {
            obj: {
                uname: 'xxx',
                age: 18,
                gender: 'male'
            }
        }
    });
</script>

最后，给大家留个小案例实现一下，用本篇内容实现Tab选项卡案例

留言区留言或者私信我可以获取案例代码~

有不明白的或者有其他问题的可以评论区留言噢

私信回复JS思维导图可获取完整知识导图~

今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步，成为更好的自己！