优秀的前端框架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,原理剖析与实战技巧总结【干货满满】
✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 所属的专栏:前端零基础教学,实战进阶 景天的主页:景天科技苑 文章目录 Vuevue.js库的基本使用vue.js的M-V-VM思…...

<2024最新>ChatGPT逆向教程
前言 在使用本篇文章用到的项目以及工具时,需要对其有一定的了解,无法访问以及无法使用的问题作者不承担任何责任,可以自行想办法解决遇到的问题。 文章若有不合适,有问题的地方,请私聊指出,谢谢~ 准备工具 一台至少 2 核 2G 内存的服务器,推荐是位于香港、新加坡或…...
C#编程技巧--2
1.使用泛型: 泛型允许你编写更加灵活和可重用的代码,同时提高类型安全性。 C# 中的泛型功能允许你编写更加灵活和可重用的代码,并且可以增加类型安全性。通过使用泛型,你可以编写适用于不同类型的代码,而无需为每种类型单独重写代…...

设计模式 代理模式
代理模式主要使用了 Java 的多态,主要是接口 干活的是被代理类,代理类主要是接活, 你让我干活,好,我交给幕后的类去干,你满意就成,那怎么知道被代理类能不能干呢? 同根就成ÿ…...
关于学习时间
这篇文章我来说一下我对于我最近学习时间的一些思考。 早上和下午是我最为活跃和高效的时间段。 我能够专注地工作,不容易分心。 然而,到了晚上,我的状态开始下降,这是很正常的情况。 由于早上和下午的专注学习,我的大…...

Github:Your browser did something unexpected. Please try again.
问题概述 Github:Your browser did something unexpected. Please try again. If the error continues, try disabling all browser extensions. 问题原因: 提示是插件出了问题,关闭了所有插件也无法解决,搜索了一下说是VPN的问题…...
Django性能优化
1.服务器CPU太高的优化 在Django项目中使用line_profiler进行性能剖析,您需要遵循以下步骤来设置并使用它: 1. **安装line_profiler**: 在命令行中执行以下命令来安装line_profiler: pip install line_profiler …...

全网最详细Docker命令(分类总结)
默认存储容器地址 cd /var/lib/docker 容器生命周期 Docker 命令 开启docker : systemctl start docker 查看docker状态 :systemctl status docker 停止:systemctl stop docker 重启: systemctl restart docker docker开机自启…...

运维自动化之ANSIBLE
一、Ansible的发展史及功能 官网:https://www.ansible.com/ 官方文档:https://docs.ansible.com/ 1、Ansible功能 2、Ansible特性 批量执行远程命令,可以对远程的多台主机同时进行命令的执行 批量安装和配置软件服务,可以对远程的多台主机…...
算法训练day42leetcode01背包问题 416. 分割等和子集
01 背包 题目描述 有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i],得到的价值是value[i] 。每件物品只能用一次,求解将哪些物品装入背包里物品价值总和最大。 题目分析 每一件物品其实只有两个状态,取或者不取&…...

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

前端学习笔记 | WebAPIs(DOM+BOM)
一、作用和分类 1、基本概念 作用:使用JS去操作HTML和浏览器 分类:DOM(文档对象模型)和BOM(浏览器对象模型) html的标签JS的DOM对象 2、获取DOM对象-参数必须加引号 (1)选择匹配的第…...
简易内存池(100%用例)C卷(JavaPythonC++Node.jsC语言)
请实现一个简易内存池 , 根据请求命令完成内存分配和释放。 内存池支持两种操作命令,REQUEST和RELEASE,其格式为: REQUEST=请求的内存大小 表示请求分配指定大小内存,如果分配成功,返回分配到的内存首地址;如果内存不足,或指定的大小为 0 ,则输出error。 RELEASE=释放的…...

【算法与数据结构】队列的实现详解
文章目录 📝队列的概念及结构🌠 队列的顺序实现🌉初始化🌠入队🌉出队🌠获取队列首元素🌉获取队列尾部元素🌠获取队列中有效元素个数🌉 队列是否为空🌠查看队列…...
GPT-3后的下一步:大型语言模型的未来方向
摘要: 本文将概述GPT-3后的下一步:大型语言模型的未来方向,包括技术发展趋势、应用场景、挑战与机遇。 引言: GPT-3是OpenAI于2020年发布的一款大型语言模型,它在自然语言处理领域取得了突破性进展。GPT-3的出现标志…...

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

【C++从练气到飞升】03---构造函数和析构函数
🎈个人主页:库库的里昂 ✨收录专栏:C从练气到飞升 🎉鸟欲高飞先振翅,人求上进先读书。 目录 ⛳️推荐 一、类的6个默认成员函数 二、构造函数 1. 构造函数的概念 2. 构造函数的定义 3. 构造函数的特性 三、析构函…...
mybatis转义字符
编写SQL中会用到<,>,<,> 等,但是在mybatis中不可以这么写,与xml文件的元素<>冲突,所以需要转义。整理转义字符如下: 符号原始字符转义字符大于>>大于等于>>小于<<小于等于<<和&&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方法里运行报错,但在安卓程序运行过程正常 一、Main(非安卓环境)方法下运行 static void test() {try {// 创建一个 JSON …...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...

PL0语法,分析器实现!
简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

(转)什么是DockerCompose?它有什么作用?
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用,而无需手动一个个创建和运行容器。 Compose文件是一个文本文件,通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...

JVM 内存结构 详解
内存结构 运行时数据区: Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器: 线程私有,程序控制流的指示器,分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时,Again增益0db变化为6DB,画面的变化只有2倍DN的增益,比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析: 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1)准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2)服务端安装软件:bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

【C++】纯虚函数类外可以写实现吗?
1. 答案 先说答案,可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...
区块链技术概述
区块链技术是一种去中心化、分布式账本技术,通过密码学、共识机制和智能合约等核心组件,实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点:数据存储在网络中的多个节点(计算机),而非…...