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

在这里插入图片描述

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

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

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

文章目录

  • 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属性写法方式1data:{  // data是将要展示到HTML标签元素中的数据。message: 'hello world!',}// 方式2// data:function () {//     return {//         'msg':'掀起你的盖头来1！'//     }// }// 方式3data(){   // 单体模式  这种写法用的居多，并且后面学习中有个地方一定要这样写，所以我们就记下来这种写法就可以了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这个值//// }//可以单体模式，省略functiondata: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的选择器都可以用//可以单体模式，省略functiondata(){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语法//可以单体模式，省略functiondata(){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.mzph.cn/news/742504.shtml

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

相关文章

453453

453453

44
阅读更多...
flutter入门

flutter入门

本文真对 Flutter 的技术特性&#xff0c;做了一些略全面的入门级的介绍&#xff0c;如果你听说过Flutter&#xff0c;想去了解它&#xff0c;但是又不想去翻厚厚的API&#xff0c;那么本文就是为你准备的。 随着纯客户端到Hybrid技术&#xff0c;到RN&Weex&#xff0c;再…
阅读更多...
24计算机考研调剂 | 东北石油大学

24计算机考研调剂 | 东北石油大学

东北石油大学智能物探团队招生宣传 考研调剂招生信息 学校:东北石油大学 专业:工学->地质资源与地质工程->矿产普查与勘探 年级:2024 招生人数:2 招生状态:正在招生中 联系方式:********* (为保护个人隐私,联系方式仅限APP查看) 补充内容 团队介绍&#xff1a; …
阅读更多...
基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的血细胞智能检测与计数（深度学习模型+UI界面代码+训练数据集）

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的血细胞智能检测与计数（深度学习模型+UI界面代码+训练数据集）

摘要&#xff1a;开发血细胞智能检测与计数系统对于疾病的预防、诊断和治疗具有关键作用。本篇博客详细介绍了如何运用深度学习构建一个血细胞智能检测与计数系统&#xff0c;并提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并对比了YOLOv7、YOLOv6、YOLOv5&a…
阅读更多...
C++顺序结构实例

C++顺序结构实例

1.计算浮点数相除的余数 计算两个双精度浮点数a和b相除的余数，a和b都是双精度浮点数。这里的余数r的定义是： a=k * 吧+r，其中k是整数，0<=r<b。 输入 一行，包括两个双精度浮点数a和b 输出 一行，a➗b的余数 样例输入 73.263 0.9973 样例输出 0.4301 #i…
阅读更多...
jdk17下载安装图文教程【超详细】

jdk17下载安装图文教程【超详细】

目录 一、下载JDK17 二、安装JDK17 三、配置环境变量 四、测试Java安装是否成功 一、下载JDK17 访问官网&#xff1a;Java Downloads | Oracle 二、安装JDK17 三、配置环境变量 右键点击我的电脑>属性>高级系统设置>环境变量 在【系统变量】中新建JAVA_HOME&…
阅读更多...
ROS2 launch rs_launch.py的说明（设置分辨率、配准、pcl图等）

ROS2 launch rs_launch.py的说明（设置分辨率、配准、pcl图等）

ROS2 launch rs_launch.py的说明&#xff08;设置分辨率、配准、pcl图等&#xff09; 文章目录 前言正文下载安装方式参数示例指令 前言 本文目的是记录下当前ROS2版本apt install 的 realsense-ros的rs_launch文件中参数有哪些及如何配置。 正文 下载安装方式 # 使用apt i…
阅读更多...
记录西门子：SCL设置不同顺序

记录西门子：SCL设置不同顺序

一台搅拌的设备&#xff0c;需要控制三种料的进料顺序和进料重量&#xff0c;顺序和重量可以随便设定&#xff0c;也可以是几十种料。触摸屏上面有A、B、C三种液体原料&#xff0c;需要设定三种液体原料重量&#xff0c;并设定序号。 假设如下面所示设定&#xff1a;那将先打开…
阅读更多...
C#面：System.Array.CopyTo() 和 System.Array.Clon() 的区别

C#面：System.Array.CopyTo() 和 System.Array.Clon() 的区别

二者都是用于复制数组的方法&#xff0c;但它们有一些区别&#xff1a; System.Array.CopyTo()&#xff1a; 方法签名&#xff1a;void CopyTo(Array array, int index)功能&#xff1a;将当前数组的所有元素复制到另一个数组中。参数&#xff1a; array&#xff1a;目标数组…
阅读更多...
AI 技术：改变世界的力量

AI 技术：改变世界的力量

人工智能&#xff08;AI&#xff09;是当今科技领域最热门的话题之一&#xff0c;它已经成为推动社会进步和经济发展的重要力量。AI 技术的应用范围非常广泛&#xff0c;从智能手机、自动驾驶汽车到医疗保健、金融服务等领域&#xff0c;都可以看到 AI 的身影。 那么&#xff0…
阅读更多...
4. 数据库建库建表规范和原理，白话版

4. 数据库建库建表规范和原理，白话版

文章目录 数据库建库建表规范和原理&#xff0c;白话版1. 数据库的字符集&#xff1a;为何utf8成为首选&#xff1f;2. 为什么要注意数据库的排序规则&#xff1f;3. 怎么建表名&#xff1f;4. 为什么表中会创建id和code&#xff1f;5. 主键id的命名规则6. 关联键的命名规则7. …
阅读更多...
【考研数学】打基础用张宇《30讲》还是武忠祥《基础篇》？

【考研数学】打基础用张宇《30讲》还是武忠祥《基础篇》？

基础课不太可能所有的东西全都覆盖&#xff0c;还是先搭起一个知识框架&#xff0c;然后不断的填充和完善。 所以不必太过于在意少一些东西&#xff0c;我们不可能一口吃成胖子&#xff0c;基础知识肯定不会遗漏的&#xff0c;只可能一些技巧不到位。 从自己的情况考虑&#…
阅读更多...
【哈希表算法题记录】15. 三数之和，18. 四数之和——双指针法

【哈希表算法题记录】15. 三数之和，18. 四数之和——双指针法

题目链接 15. 三数之和 思路 这题虽然放在哈希表的分类里面&#xff0c;但是用双指针法会更高效。 之前的双指针我们要么是一头left一尾right&#xff0c;要么是快fast慢slow指针。这里是要计算三个数的和&#xff0c;我们首先对数组进行从小到大的排序&#xff0c;先固定一…
阅读更多...
./gradlew assembleRelease

./gradlew assembleRelease

在 Android 项目中使用 Gradle 进行打包&#xff0c;通常会涉及到配置 build.gradle 文件。其中&#xff0c;你需要指明签名配置&#xff08;signing config&#xff09;和构建类型&#xff08;build type&#xff09;。以下是一个基本的配置示例&#xff1a; 首先&#xff0c…
阅读更多...
Docker 进阶

Docker 进阶

1、容器数据卷 什么是容器数据卷&#xff1f; 就是当容器内存在了mysql&#xff0c;在里面书写了数据&#xff0c;如果容器删除了&#xff0c;那么数据也就没有了&#xff0c;通过容器数据卷的技术&#xff0c;可以让容器内的数据持久化到Linux服务器上 操作 #docker run -…
阅读更多...
三、HarmonyOS 应用开发入门之运行Hello World

三、HarmonyOS 应用开发入门之运行Hello World

目录 1、课程对象 1.1、有移动端开发经验 1.2、无移动端开发经验 1.3、对 HarmonyOS 感兴趣 2、DevEco Studio 的使用 2.1、DevEco Studio 的关键特性 智能代码编辑 低代码开发 多段双向实时预览 多端模拟仿真 2.2、安装配置 DevEco Studio 2.2.1、官网开发工具下载地…
阅读更多...
基于Springboot的面向智慧教育的实习实践系统设计与实现（有报告）。Javaee项目，springboot项目。

基于Springboot的面向智慧教育的实习实践系统设计与实现（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的面向智慧教育的实习实践系统设计与实现&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&…
阅读更多...
_数据_变量_内存

_数据_变量_内存

什么是数据? 存储于内存中代表特定信息的’东东’, 本质就是0101二进制具有可读和可传递的基本特性万物(一切)皆数据, 函数也是数据程序中所有操作的目标: 数据 算术运算逻辑运算赋值调用函数传参 … 什么是内存? 内存条通电后产生的存储空间(临时的)产生和死亡: 内存条(…
阅读更多...
《深入Linux内核架构》第2章 进程管理和调度 （1）

《深入Linux内核架构》第2章 进程管理和调度 （1）

目录 前言 2.1 进程优先级 2.2 进程生命周期 2.3 进程表示 2.3.1 进程类型 2.3.2 命名空间 2.3.3 进程ID号 2.3.4 进程关系 2.4 进程管理相关的系统调用 2.4.1 进程复制 2.4.2 内核线程 2.4.3 启动新程序 2.4.4 退出进程 前言 本章内容太多&#xff0c;分为两篇博…
阅读更多...
游戏开发中的坑之十三 Lut贴图相关问题

游戏开发中的坑之十三 Lut贴图相关问题

1.网上下载的或者游戏截帧得到的Lut贴图贴上之后可能效果如下&#xff0c;需要在PS里垂直方向反转一下贴图。 2.相关设置&#xff1a; &#xff08;1&#xff09;取消勾选sRGB&#xff1b; &#xff08;2&#xff09;像素为1024x32或者512x16&#xff1b; &#xff08;3&#…
阅读更多...
最新文章

Copyright @ 2022~2023