优秀的前端框架vue，原理剖析与实战技巧总结【干货满满】

news2024/11/20 14:15:03

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

所属的专栏：前端零基础教学，实战进阶
景天的主页：景天科技苑

文章目录

  • Vue
    • vue.js库的基本使用
    • vue.js的M-V-VM思想
    • Vue指令系统的常用指令

Vue

Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建， 是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。

vue.js库的下载
vue.js是目前前端web开发最流行的工具库

官方文档

在这里插入图片描述

有开发版本，有生产版本
在这里插入图片描述

它就是个js，跟jquery使用方式类似

可以通过cdn给的网址，把代码下载到本地使用
在这里插入图片描述

vue.js目前有1.x、2.x和3.x 版本，我们学习2.x版本的。2.x到3.x是平滑过渡的，也就是说你之前用2.x写的代码，用3.x的版本的vue.js也是没问题的。

MVVM模型
M：数据操作
V：视图 把html标签称为视图
VM：数据驱动视图的核心功能，自动把数据驱动到视图中去生成

vue.js库的基本使用

在github下载：https://github.com/vuejs/vue/releases
在这里插入图片描述

vue的引入类似于jQuery，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
    
</head>
<body>
<div id="app">
    <!-- {{ message }} 表示把vue对象里面data属性中的对应数据输出到页面中 -->
    <!-- 在双标签中显示数据要通过{{  }}来完成 -->
    <p>{{ message }}</p>
</div>
</body>
  <script>
    
          // vue.js的代码开始于一个Vue对象。所以每次操作数据都要声明Vue对象开始。
        let vm = new Vue({
            el:'#app',   // 设置当前vue对象要控制的标签范围。
              // data属性写法方式1
            data:{  // data是将要展示到HTML标签元素中的数据。
              message: 'hello world!',
            }
              // 方式2
            // data:function () {
            //     return {
            //         'msg':'掀起你的盖头来1！'
            //     }
            // }
                        // 方式3
            data(){   // 单体模式  这种写法用的居多，并且后面学习中有个地方一定要这样写，所以我们就记下来这种写法就可以了
                  return {
                      'msg':'掀起你的盖头来2！',
                  }
              }
            });
    
    </script>
</html>

由于不需要后端框架，我们可以用pycharm新建个python的项目
在这里插入图片描述

将vue的代码拷贝过来，新建个js文件
在这里插入图片描述

在html中引入vue代码
在这里插入图片描述

使用方法：
在这里插入图片描述

浏览器查看，可以看到h标签的内容，就是通过msg变量传递过来的
在这里插入图片描述

MVVM模型过程：
在这里插入图片描述

data 属性有好几种写法，还一种写法是以函数形式，return返回数据。这种方法最常用。因为模块化开发中，定义了vue的组件，必须这样写
在这里插入图片描述

单体模式
在这里插入图片描述
在这里插入图片描述

// 首先先实例化一个vue对象，里面传一些参数
let vm = new Vue({
    el:'#app',   // 此时表示通过vue语法来控制id为app的标签，在这个标签范围内可以使用vue语法
    //通过data属性来接收后端的数据来展示到前端
    // data:{
    //     msg:'aa',  //比如从后端获取到aa这个值
    //
    // }

    //可以单体模式，省略function
    data:function (){
        return {
            msg:'hello word',
        }
    }



})

el:圈地，划地盘，设置vue可以操作的html内容范围，值就是css的id选择器,其他选择器也可以，但是多用id选择器。
data: 保存vue.js中要显示到html页面的数据。

渲染数据的时候，使用{{}}跟Django模板渲染有点像，方便做前后端分离项目
在这里插入图片描述

vue中的变量可以直接进行一些简单直接的js操作

<div id="app">
    <!-- vue的模板语法，和django的模板语法类似 -->
    <h2>{{ msg }}</h2> <!-- 放一个变量，会到data属性中去找对应的值 -->
    <!-- 有人说，我们直接这样写数据不就行吗，但是你注意，我们将来的数据都是从后端动态取出来的，不能写死这些数据啊，你说对不对 -->
    <h2>{{ 'hello beautiful girl!' }}</h2>  <!-- 直接放一个字符串 -->
    <h2>{{ num+1 }}</h2>  <!-- 四则运算 -->
      <h2>{{ 2+1 }}</h2>  <!-- 四则运算 -->
    <h2>{{ {'name':'chao'} }}</h2> <!-- 直接放一个自定义对象 -->
    <h2>{{ person.name }}</h2>  <!-- 下面data属性里面的person属性中的name属性的值 -->

在这里插入图片描述
在这里插入图片描述

<h2>{{ 1>2?'真的':'假的' }}</h2>  <!-- js的三元运算 -->

在这里插入图片描述
在这里插入图片描述

<h2>{{ msg2.split('').reverse().join('') }}</h2>  <!-- 字符串反转 -->

在这里插入图片描述

在这里插入图片描述

查看vm对象的成员
取属性，都要加$

在这里插入图片描述
在这里插入图片描述

调数据属性，不用$
在这里插入图片描述

在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据
console.log(vm.KaTeX parse error: Expected 'EOF', got '#' at position 9: el) #̲ #box vm对象可以控制…data); # vm对象要显示到页面中的数据
console.log(vm.message);# 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.

vue.js的M-V-VM思想

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。

Model 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。

View 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。

ViewModel 指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，通过双向数据绑定来实现视图与模型的自动同步的.
所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。

Vue指令系统的常用指令

在jquery中，我们有很多标签操作方法，找标签，获取标签，生成标签，在标签里面塞文本等等。这些现在都可以用vue的指令系统来实现
指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。
在vue中，提供了很多指令，常用的有：v-html、v-text、v-if、v-model、v-for等等。

v-text
以文本字符串方式显示
我们在M模块设置的变量。到V那里展示，默认是以字符串方式展示
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

使用v-text方式，也是以字符串方式展示，v-text= 属性名。它和{{}}做的事情是一样的
在这里插入图片描述
在这里插入图片描述

如果想把v-text放到 其他标签中，直接加进去就可以
在这里插入图片描述
在这里插入图片描述

里面可以用js的语法
在这里插入图片描述
在这里插入图片描述

v-html
如果M那里是html标签，想展示成标签效果，可以使用v-html
在这里插入图片描述

就展示成了a链接效果
在这里插入图片描述

v-if 和v-show
vue中提供了两个指令可以用于判断是否要 显示元素，分别是v-if和v-show。

<!--    这里表示num如果大于20，浏览器就展示a链接，否则不显示。根据判断的布尔结果值来判断-->
    <a href="http://www.baidu.com" v-if="num >20">百度</a>

在这里插入图片描述

现在啥也没显示
在这里插入图片描述

把num的值改为21，浏览器就展示了a链接
在这里插入图片描述

可以结合v-else-if v-else
把num的值改为20
在这里插入图片描述
在这里插入图片描述

数据一旦发生变化，视图就会自动发生变化，这就是数据驱动视图,以后视图的效果都是通过数据来控制的
动态生成和动态添加，页面需要渲染，页面渲染开销大，效率比较低，所以频繁的显示，不显示，使用动态的隐藏和展示v-show

v-show

标签元素：
            <h1 v-show="ok">Hello!</h1>
  data数据：
          data:{
              ok:false    // true则是显示，false是隐藏
      }

满足条件就显示，不满足就隐藏
在这里插入图片描述
在这里插入图片描述

把num的值改为9
在这里插入图片描述

看到标签display:none 被隐藏，并不是删除
在这里插入图片描述

v-show可以直接等于布尔值，决定显示还是隐藏
在这里插入图片描述
在这里插入图片描述

简单总结v-if和v-show

v-show后面不能v-else或者v-else-if

v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[DOM操作中的remove]

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

操作属性v-bind

做动态标签属性

格式：
<标签名 :标签属性="data属性"></标签名>
<!-- v-bind:动态的标签属性控制，简写: -->

在这里插入图片描述

显示wifi密码效果：配合v-on事件绑定

v-on 绑定事件 v-on:事件名称= ‘函数’ 简写 @事件名称= ‘函数’

语法：<button v-on:click="showp">{{msg}}</button>
可以简写：<button @click="showp">{{msg}}</button>  <!-- v-on:事件名称简写 @事件名称 -->

<div id="app" >

<!--    <input :type="tt"><button v-on:click="show">{{msg}}</button>-->
    <input :type="tt"><button @click="show">{{msg}}</button>

</div>

<script src="vue.js"></script>
<!--另起一个script标签来写我们的js-->
<script>
    // 首先先实例化一个vue对象，里面传一些参数
    let vm = new Vue({
        el:'#app',   // 此时表示通过vue语法来控制id为app的标签，在这个标签范围内可以使用vue语法，css的选择器都可以用
        
        //可以单体模式，省略function
        data(){
            return {
                // xxattr:'ss',
                tt:'password',
                msg:'显示密码'

            }

        },
        //methods里面写方法，使用单体模式，methods里面的方法，this指的就是vue对象
        methods:{
            show(){
                if (this.tt === 'password'){
                    this.tt ='text';
                    this.msg = '隐藏密码';
                }else {
                    this.tt ='password';
                    this.msg = '显示密码';
                }

            }
        }



    })

</script>

v-on 也可以直接操作数据，进行js运算

v-on控制数据属性的方式
<button v-on:click="num++">按钮</button>   <!-- v-on 是vue1.x版本的写法 -->
<button @click="num+=5">按钮2</button>

1. 使用@事件名来进行事件的绑定
   语法：
      <h1 @click="num++">{{num}}</h1>

2. 绑定的事件的事件名，全部都是js的事件名：
   @submit   --->  onsubmit
   @focus    --->  onfocus

商品动态加减示例

<div id="app" >
    <button @click="num+=1">+1</button>
    <input type="text" :value="num">
    <button  @click="num-=1">-1</button>


</div>

在这里插入图片描述

如果不控制，可以减到负数，所以通过方法控制下。遇到复杂的逻辑处理时，要给指定各方法做

<script>
    // 首先先实例化一个vue对象，里面传一些参数
    let vm = new Vue({
        el:'#app',   // 此时表示通过vue语法来控制id为app的标签，在这个标签范围内可以使用vue语法
        
        //可以单体模式，省略function
        data(){
            return {
                num: 10
            }
        },
        //里面写方法
        methods:{
            jian() {
                if (this.num > 0) {
                    this.num -= 1
                }
            }
        }
        
    })

</script>

在这里插入图片描述

v-model双向数据绑定
v-model数据双向绑定，实现改一个标签的数据，其他标签使用相同属性的字段也同步被修改 代表着这些标签value的属性值，所以取值更快捷了
凡是用户输入数据的地方都可以使用
input select textarea等都可以使用
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

修改input标签value的值，vue中的data属性值也会发生变化
修改vue中的data属性值，input标签value的值也会发生变化 双向绑定的，双向变化

使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以使用@input代替v-model
在这里插入图片描述

单选按钮上使用
单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为否时不选。

好了，本章先讲到这里，相信到这里，很多小伙伴已经掌握到了vue的一些基本用法，后续我们还会持续更新vue更多，更高阶的用法，感兴趣的朋友不妨点赞关注，后面继续体验vue的强大。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1514054.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CountDownLatch介绍和使用

CountDownLatch介绍和使用

1. CountDownLatch是什么 CountDownLatch 是 Java.util.concurrent 包中的一个同步工具类&#xff0c;用于控制线程的执行顺序。它的主要作用是让一个或多个线程等待其他线程完成操作后再继续执行。 2. CountDownLatch 类常用方法 CountDownLatch(int count) 是 CountDownLa…
阅读更多...
网工内推 | 国企、上市公司网工、运维，CCNA即可，补贴福利多

网工内推 | 国企、上市公司网工、运维，CCNA即可，补贴福利多

01 深圳新思 招聘岗位&#xff1a;网络工程师&#xff08;中电集团&#xff09; 职责描述&#xff1a; 1&#xff1a;负责办公室电脑的桌面运维&#xff0c;主要是windows维护与应用维护&#xff1b; 2&#xff1a;负责办公室网络设备配置&#xff0c;如防火墙&#xff0c;交换…
阅读更多...
应用工程中获取Shapefile文件的图形信息并显示

应用工程中获取Shapefile文件的图形信息并显示

本文用纯前端获取shp文件以及前后端交互的方式获取Shapefile文件中的图形信息 1.案例说明 在日常的WebGIS开发中&#xff0c;我们往往会面对&#xff0c;需要用户选择矢量数据&#xff0c;通过矢量数据中的空间范围信息&#xff0c;显示在界面上&#xff0c;并给用户的下一步…
阅读更多...
目标检测C-RNN,Fast C-RNN,Faster C-RNN,SSD,Mask R-CNN 理论简单介绍

目标检测C-RNN,Fast C-RNN,Faster C-RNN,SSD,Mask R-CNN 理论简单介绍

参考&#xff1a; https://zh-v2.d2l.ai/chapter_computer-vision/multiscale-object-detection.html R-CNN 及系列 区域卷积神经网络 region-based CNN R-CNN R-CNN首先从输入图像中选取若干&#xff08;例如2000个&#xff09;提议区域&#xff0c;并标注它们的类别和边界…
阅读更多...
两个笔记本如何将一个笔记本作为另一个笔记本的拓展屏

两个笔记本如何将一个笔记本作为另一个笔记本的拓展屏

需求是有两个笔记本&#xff0c;一个笔记本闲置&#xff0c;另一个笔记本是主力本。想将另一个闲置的笔记本连接到主力本上作为拓展屏使用。网上搜了好久&#xff0c;有一些人提到了&#xff0c;也有一些视频但是文章比较少。简单总结一下吧 上述需求有两种方式 第一种&#x…
阅读更多...
学习vue3第五节（reactive 及其相关）

学习vue3第五节（reactive 及其相关）

1、定义 reactive() 创建一个响应式代理对象&#xff0c;不同于ref()可以创建任意类型的数据&#xff0c;而reactive()只能是对象&#xff0c;会响应式的深层次解包任何属性&#xff0c;将其标注为响应式 响应式是基于ES6的proxy实现的代理对象&#xff0c;该proxy对象与原对象…
阅读更多...
【C++】C++的初步认识

【C++】C++的初步认识

&#x1f338;博主主页&#xff1a;釉色清风&#x1f338;文章专栏&#xff1a;C&#x1f338;今日语录&#xff1a;自律以修身&#xff0c;自省以观己。自学以长识&#xff0c;自处以蓄力。 &#x1f33b;Hi~大家好&#xff0c;这次文章是C的初步认识&#xff0c;包括从C语言到…
阅读更多...
【LeetCode: 2864. 最大二进制奇数 + 模拟 + 位运算】

【LeetCode: 2864. 最大二进制奇数 + 模拟 + 位运算】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
基于SSH的物流配送管理系统的设计与实现

基于SSH的物流配送管理系统的设计与实现

摘 要 当今社会&#xff0c;物流配送已成为影响经济发展的显著因素。而随着社会信息化发展&#xff0c;建立有效的物流配送管理体系不仅能够减少物流成本&#xff0c;更能够提升工作人员的工作效率与客户的满意度。而基于B/S架构的物流配送管理体系&#xff0c;不仅具有良好的…
阅读更多...
Navicat操作MYSQL

Navicat操作MYSQL

Navicat操作MYSQL 数据表的操作-创建表数据表的操作-修改、删除表数据的操作数据类型与约束常用数据类型数据约束 数据库备份与还原数据库的备份数据表的还原 数据表的操作-创建表 数据表的操作-修改、删除表 数据的操作 数据类型与约束 常用数据类型 整型&#xff1a;int 有符…
阅读更多...
这是一份简单到没朋友的上手图数据库的图文教程

这是一份简单到没朋友的上手图数据库的图文教程

前几天和社区小伙伴友好交流&#xff08;闲聊&#xff09;&#xff0c;不少加入 NebulaGraph 的小伙伴虽然对图感兴趣&#xff0c;但是因为业务调整或者是时间缘故&#xff0c;最终没能用上 NebulaGraph。而他们当中不少的小伙伴说&#xff0c;春节我打算好好学习一番。既然大家…
阅读更多...
打造你的HTML5打地鼠游戏：零基础入门教程

打造你的HTML5打地鼠游戏：零基础入门教程

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…
阅读更多...
mysql基于mycat实现读写分离

mysql基于mycat实现读写分离

试验环境 基于mysql主从复制已经实现 mycat主机192.168.199.149&#xff0c;安装好java和jdk 数据库主机192.168.199.150 数据库从机192.168.199.151 149配置 下载mycat并解压 vim /root/mycat/conf/server.xml vim /root/mycat/conf/schema.xml 150是主数据库&#xff0…
阅读更多...
[Linux][CentOs][Mysql]基于Linux-CentOs7.9系统安装并配置开机自启Mysql-8.0.28数据库

[Linux][CentOs][Mysql]基于Linux-CentOs7.9系统安装并配置开机自启Mysql-8.0.28数据库

目录 一、准备工作&#xff1a;获取安装包和相应工具 &#xff08;一&#xff09;所需安装包 &#xff08;二&#xff09;安装包下载链接 &#xff08;三&#xff09;在服务器上创建文件夹并上传安装包 二、安装MySql &#xff08;一&#xff09;删除系统自带的mariadb …
阅读更多...
OceanBase原理之内存管理

OceanBase原理之内存管理

第1章 前言 1.1 多租户管理简介 OceanBase数据库中&#xff0c;应用了单集群多租户的设计&#xff0c;使得一个集群内能够创建多个彼此独立的租户。在OceanBase数据库&#xff0c;租户成为了资源分配的单位&#xff0c;同时还是数据库对象管理和资源管理的基础。 在某种程度…
阅读更多...
代码随想录算法训练营Day44 ||leetCode 完全背包 || 518. 零钱兑换 II || 377. 组合总和 Ⅳ

代码随想录算法训练营Day44 ||leetCode 完全背包 || 518. 零钱兑换 II || 377. 组合总和 Ⅳ

完全背包 518. 零钱兑换 II 遍历硬币和金额&#xff0c;累加所有可能 class Solution { public:int change(int amount, vector<int>& coins) {vector<int> dp(amount1,0);dp[0]1;for (int i 0; i < coins.size();i){for(int j coins[i]; j < amount;…
阅读更多...
安装PyTorch详细过程

安装PyTorch详细过程

安装anaconda 登录anaconda的官网下载&#xff0c;anaconda是一个集成的工具软件不需要我们再次下载。anaconda官网 跳转到这个页面如果你的Python版本正好是3.8版&#xff0c;那便可以直接根据系统去选择自己相应的下载版本就可以了。 但是如果你的Python版本号不是当前页面…
阅读更多...
linux驱动——中断

linux驱动——中断

1.Cortex-A系列的中断的简介 中断的基本概念&#xff1a;(interrupt) 中断本质上是系统内部的异常机制,当中断产生之后&#xff0c;他会停下当前正在执行的任务&#xff0c;转而去做其他的事情,在停下当前正在执行的任务之前,要先入栈&#xff08;保护现场,其他的事情做完之后…
阅读更多...
漏洞原理 | CORS跨域学习篇

漏洞原理 | CORS跨域学习篇

0x01&#xff1a;原理 1、 什么是CORS 全称跨域资源共享&#xff0c;用来绕过SOP(同源策略)来实现跨域访问的一种技术。 CORS漏洞利用CORS技术窃取用户敏感信息 2、 同源策略简介 同源策略是浏览器最核心也是最基本的安全功能&#xff0c;不同源的客户端脚本在没有明确授权…
阅读更多...
UDP连接树莓派时提高连接速度，降低卡顿感

UDP连接树莓派时提高连接速度，降低卡顿感

背景 树莓派4B刷的是ubuntu20.4系统&#xff0c;使用win10自带的远程桌面连接和其连接&#xff0c;卡的一批&#xff0c;于是探索并记录下如何降低连接卡顿感 步骤一 点击显示选项&#xff0c; 降低显示配置和颜色深度&#xff1a; 步骤二 我的树莓派是通过电脑移动热点的方式…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023