当前位置: 首页 > news >正文

优秀的前端框架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的强大。

相关文章:

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

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属的专栏&#xff1a;前端零基础教学&#xff0c;实战进阶 景天的主页&#xff1a;景天科技苑 文章目录 Vuevue.js库的基本使用vue.js的M-V-VM思…...

<2024最新>ChatGPT逆向教程

前言 在使用本篇文章用到的项目以及工具时,需要对其有一定的了解,无法访问以及无法使用的问题作者不承担任何责任,可以自行想办法解决遇到的问题​。 文章若有不合适,有问题的地方,请私聊指出,谢谢~ 准备工具 一台至少 2 核 2G 内存的服务器,推荐是位于香港、新加坡或…...

C#编程技巧--2

1.使用泛型: 泛型允许你编写更加灵活和可重用的代码&#xff0c;同时提高类型安全性。 C# 中的泛型功能允许你编写更加灵活和可重用的代码&#xff0c;并且可以增加类型安全性。通过使用泛型&#xff0c;你可以编写适用于不同类型的代码&#xff0c;而无需为每种类型单独重写代…...

设计模式 代理模式

代理模式主要使用了 Java 的多态&#xff0c;主要是接口 干活的是被代理类&#xff0c;代理类主要是接活&#xff0c; 你让我干活&#xff0c;好&#xff0c;我交给幕后的类去干&#xff0c;你满意就成&#xff0c;那怎么知道被代理类能不能干呢&#xff1f; 同根就成&#xff…...

关于学习时间

这篇文章我来说一下我对于我最近学习时间的一些思考。 早上和下午是我最为活跃和高效的时间段。 我能够专注地工作&#xff0c;不容易分心。 然而&#xff0c;到了晚上&#xff0c;我的状态开始下降&#xff0c;这是很正常的情况。 由于早上和下午的专注学习&#xff0c;我的大…...

Github:Your browser did something unexpected. Please try again.

问题概述 Github&#xff1a;Your browser did something unexpected. Please try again. If the error continues, try disabling all browser extensions. 问题原因&#xff1a; 提示是插件出了问题&#xff0c;关闭了所有插件也无法解决&#xff0c;搜索了一下说是VPN的问题…...

Django性能优化

1.服务器CPU太高的优化 在Django项目中使用line_profiler进行性能剖析&#xff0c;您需要遵循以下步骤来设置并使用它&#xff1a; 1. **安装line_profiler**&#xff1a; 在命令行中执行以下命令来安装line_profiler&#xff1a; pip install line_profiler …...

全网最详细Docker命令(分类总结)

默认存储容器地址 cd /var/lib/docker 容器生命周期 Docker 命令 开启docker &#xff1a; systemctl start docker 查看docker状态 &#xff1a;systemctl status docker 停止&#xff1a;systemctl stop docker 重启: systemctl restart docker docker开机自启&#xf…...

运维自动化之ANSIBLE

一、Ansible的发展史及功能 官网&#xff1a;https://www.ansible.com/ 官方文档&#xff1a;https://docs.ansible.com/ 1、Ansible功能 2、Ansible特性 批量执行远程命令,可以对远程的多台主机同时进行命令的执行 批量安装和配置软件服务&#xff0c;可以对远程的多台主机…...

算法训练day42leetcode01背包问题 416. 分割等和子集

01 背包 题目描述 有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品只能用一次&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 题目分析 每一件物品其实只有两个状态&#xff0c;取或者不取&…...

VulnHub - DarkHole

希望和各位大佬一起学习&#xff0c;如果文章内容有错请多多指正&#xff0c;谢谢&#xff01; 个人博客链接&#xff1a;CH4SER的个人BLOG – Welcome To Ch4sers Blog DarkHole 靶机下载地址&#xff1a;DarkHole: 1 ~ VulnHub 0x01 信息收集 Nmap扫描目标主机&#xf…...

前端学习笔记 | WebAPIs(DOM+BOM)

一、作用和分类 1、基本概念 作用&#xff1a;使用JS去操作HTML和浏览器 分类&#xff1a;DOM&#xff08;文档对象模型&#xff09;和BOM&#xff08;浏览器对象模型&#xff09; html的标签JS的DOM对象 2、获取DOM对象-参数必须加引号 &#xff08;1&#xff09;选择匹配的第…...

简易内存池(100%用例)C卷(JavaPythonC++Node.jsC语言)

请实现一个简易内存池 , 根据请求命令完成内存分配和释放。 内存池支持两种操作命令,REQUEST和RELEASE,其格式为: REQUEST=请求的内存大小 表示请求分配指定大小内存,如果分配成功,返回分配到的内存首地址;如果内存不足,或指定的大小为 0 ,则输出error。 RELEASE=释放的…...

【算法与数据结构】队列的实现详解

文章目录 &#x1f4dd;队列的概念及结构&#x1f320; 队列的顺序实现&#x1f309;初始化&#x1f320;入队&#x1f309;出队&#x1f320;获取队列首元素&#x1f309;获取队列尾部元素&#x1f320;获取队列中有效元素个数&#x1f309; 队列是否为空&#x1f320;查看队列…...

GPT-3后的下一步:大型语言模型的未来方向

摘要&#xff1a; 本文将概述GPT-3后的下一步&#xff1a;大型语言模型的未来方向&#xff0c;包括技术发展趋势、应用场景、挑战与机遇。 引言&#xff1a; GPT-3是OpenAI于2020年发布的一款大型语言模型&#xff0c;它在自然语言处理领域取得了突破性进展。GPT-3的出现标志…...

基于机器学习的曲面拟合方法

随着科技的不断发展&#xff0c;机器学习成为了最近最热门的技术之一&#xff0c;也被广泛应用于各个领域。其中&#xff0c;基于机器学习的曲面拟合方法也备受研究者们的关注。曲面拟合是三维模型处理中的重要技术&#xff0c;其目的是用一组数据点拟合出平滑的曲面&#xff0…...

【C++从练气到飞升】03---构造函数和析构函数

&#x1f388;个人主页&#xff1a;库库的里昂 ✨收录专栏&#xff1a;C从练气到飞升 &#x1f389;鸟欲高飞先振翅&#xff0c;人求上进先读书。 目录 ⛳️推荐 一、类的6个默认成员函数 二、构造函数 1. 构造函数的概念 2. 构造函数的定义 3. 构造函数的特性 三、析构函…...

mybatis转义字符

编写SQL中会用到<,>,<,> 等&#xff0c;但是在mybatis中不可以这么写&#xff0c;与xml文件的元素<>冲突&#xff0c;所以需要转义。整理转义字符如下&#xff1a; 符号原始字符转义字符大于>>大于等于>>小于<<小于等于<<和&&a…...

vue3 实现一个tab切换组件

一. 效果图 二. 代码 文件 WqTab.vue: <template><div ref"wqTabs" class"wq-tab"><template v-for"tab in tabs" :key"tab"><div class"tab-item" :class"{ ac: tabActive tab.key }" c…...

JSONObject在Android Main方法中无法实例化问题

目录 前言一、Main(非安卓环境)方法下运行二、安卓坏境下运行三、why? 前言 原生的json,即org.json.JSONObject; 在Android Studio中的Main方法里运行报错&#xff0c;但在安卓程序运行过程正常 一、Main(非安卓环境)方法下运行 static void test() {try {// 创建一个 JSON …...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...