首页 > 其他分享 >【Vue系列一】—Vue学习历程的知识分享!

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

时间:2024-09-09 09:21:10浏览次数:11  
标签:el 分享 app Vue msg new 历程 data

前言

经过前面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思维导图可获取完整知识导图~

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

标签:el,分享,app,Vue,msg,new,历程,data
From: https://blog.csdn.net/m0_60623820/article/details/141960341

相关文章

  • 常用远程工具分享
    常用远程工具分享我个人远程桌面使用场景是用一台Windows的笔记本连接多个不同地方的windows主机或linux主机,进行编程和Unity相关开发.也尝试过用安卓平板和IPAD来远程办公.因此,尝试过很多的远程方案.对于远程软件在不同系统的兼容性,外网连接的稳定性,不同分辨率的适匹......
  • 基于Node.js+vue基于的营养配餐评价系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着人们生活水平的提高和健康意识的增强,科学合理的膳食搭配成为了现代人追求健康生活方式的重要组成部分。然而,在日常饮食中,许多人因缺乏专业的营养知识和......
  • 基于Node.js+vue应急物资管理平台(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景在自然灾害、公共卫生事件等突发事件频发的背景下,应急物资的高效管理与快速调配成为保障人民生命财产安全、维护社会稳定的关键环节。然而,传统的应急物资管......
  • 基于Node.js+vue基于的外卖订餐系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展和智能手机的普及,外卖订餐服务已成为现代生活中不可或缺的一部分。人们越来越倾向于通过便捷的手机应用解决日常餐饮需求,这不仅节......
  • 基于Node.js+vue基于springboot的茶文化交流平台的设计与实现(开题+程序+论文) 计算机
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景在全球化日益加深的今天,文化的传承与交流显得尤为重要。茶文化作为中国传统文化的瑰宝,不仅承载着深厚的历史底蕴,还蕴含着丰富的哲学思想和审美追求。然而,随......
  • 基于Node.js+vue应急平台(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景在全球化与信息化的时代背景下,自然灾害、公共卫生事件等突发事件频发,对社会稳定、经济发展及人民生命财产安全构成了严重威胁。传统应急响应机制往往面临信......
  • 基于Node.js+vue基于机器学习的高考志愿推荐(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着教育改革的深入和高等教育普及率的提升,高考作为学生生涯中的关键节点,其志愿填报环节日益受到重视。然而,面对海量且复杂的院校、专业信息及不断变化的高......
  • 基于Node.js+vue中医文献管理系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景中医,作为中华民族宝贵的文化遗产,其理论与实践体系博大精深,承载着数千年的医学智慧。随着中医研究的不断深入和全球化传播,中医文献的数量急剧增加,涵盖了古籍......
  • 基于Node.js+vue综合考务管理系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着教育事业的蓬勃发展,学校规模不断扩大,考务管理工作面临着前所未有的挑战。传统的手工或简单的电子化管理方式已难以满足当前复杂多变的考务需求,如院系众......
  • 【开源免费】基于SpringBoot+Vue.JS房屋租赁系统(JAVA毕业设计)
    本文项目编号T020,文末自助获取源码\color{red}{T020,文末自助获取源码}......