框架的使用

什么是框架?

盖房子,框架结构

框架结构就是房子主体,基本功能

把很多基础功能已经实现(封装了)

框架:在基础语言之上,对各种基础功能进行封装,方便开发者,提高开发效率

举例:操作网页

现在:点击一个按钮,触发事件,获得我们要操作的标签,再对标签内容进行操作

框架:操作网页时,程序员之关注要操作的内容即可,对标签内容的更新等操作都由框架完成

Vue官网:Vue.js (vuejs.org)

前端框架

Vue.Js 是一个js框架,不是代替js的,是对js进行了封装。

Vue官网:Vue.js (vuejs.org)

后端Java框架

mybatis--jdbc

spring...

今天先来入门Vue.js

什么是 Vue.js

Vue (读音 /vju ː /,类似于 view) 是一套用于构建用户界面的渐进式框架。Vue
的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
Vue.js 是前端的主流框架之一,和 Angular.js、React.js 一起,并成为前端三
大主流框架! https://v2.cn.vuejs.org/

Vue.js 优点

1.体积小 压缩后 33K
2.更高的运行效率
用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的
时候,浏览器要不停的渲染新的 DOM 树,导致页面看起来非常卡顿。
基于虚拟 dom,一种可以预先通过 JavaScript 进行各种计算,把最终的
DOM 操作计算出来并优化的技术,最后在计算完毕才真正将 DOM 操作提交。
3.双向数据绑定,简化 Dom 操作
通过 MVVM 思想实现数据的双向绑定,让开发者不用再操作 dom 对象,
把更多的精力投入到业务逻辑上.
MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View 的
状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。

如图:

view就是网页标签

viewmodel是vue框架

model是js中的数据对象

4 生态丰富、学习成本低
市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件!来即用实现
快速开发!对初学者友好、入门容易、学习资料多.
vue.js是一个js框架,不是代替js的,是对js进行了封装

element.UI框架:将前端常用的一些组件(表单,表格,消息提示)进行封装(对html和css进行了封装)

Vue 安装

方式 1:直接用 <script> 引入
下载 Vue.js 并导入 js 文件
<script src="js/vue.js"></script>

方式 2:命令行工具 (CLI) *不推荐新手使用
安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使
用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时。

Vue 指令

指令带有前缀 v- 开头,以表示它们是 Vue 提供的特殊属性。
v-text
作用是设置标签的文本内容
默认写法会替换全部内容,使用差值表达式可以替换指定内容
内部支持写表达式
<p v-text="message"></p>
<p>{{message}}</p>
v-html
作用是设置元素的 innerHTML
内容中有 html 结构会被解析为标签
内部支持写表达式
<p v-html="message"></p>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="file:///C:/code/web/vuepro/js/v2.6.10/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></head><body><!-- 创建一个标签{{message}}插入一个值,不影响标签中的其他内容v-html="message",v-text="message"会覆盖标签中的其他内容{{message}},v-text="message" 不能解析标签中的html标签{{message}},v-html="message" 可以解析标签中的html标签--><div id="app">{{ message }}<p v-text="message">aaa</p><p v-html="message">1</p></div><script>// 创建了一个vue对象var app = new Vue({el: '#app',/* 绑定挂载点 */data: {message: 'Hello Vue!',}})</script></body>
</html>
v-on
作用是为元素绑定事件
事件名不需要写 on 指令可以简写为@
绑定的方法定义在 methods 属性中,可以传入自定义参数
<input type="button" value="按钮" v-on:click="test(1,2)" />
<input type="button" value="按钮" @click="test" />
methods:{
test(a,b){ alert(a);
}
}
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="file:///C:/code/web/vuepro/js/v2.6.10/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></head><body><!-- 创建一个标签{{message}}插入一个值,不影响标签中的其他内容v-html="message",v-text="message"会覆盖标签中的其他内容{{message}},v-text="message" 不能解析标签中的html标签{{message}},v-html="message" 可以解析标签中的html标签--><div id="app"><!-- {{ message }}<p v-text="message">aaa</p><p v-html="message">1</p> --><input type="button" value="按钮1" v-on:click="test1()"/><input type="button" value="按钮2" @click="test2()"></div><script>// 创建了一个vue对象var app = new Vue({el: '#app',/* 绑定挂载点 */data: {message: '<b>Hello Vue!</b>',},methods:{test1(){alert(this.message = "aaaaaa");},test2(){alert(this.message);}}})</script></body>
</html>
v-model
作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<---->表单元素的值 双向数据绑定
<input type="text" v-model="message"/>
<p>{{message}}</p>
data:{
message:""
}
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="file:///C:/code/web/vuepro/js/v2.6.10/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></head><body><!-- 创建一个标签{{message}}插入一个值,不影响标签中的其他内容v-html="message",v-text="message"会覆盖标签中的其他内容{{message}},v-text="message" 不能解析标签中的html标签{{message}},v-html="message" 可以解析标签中的html标签--><div id="app"><!-- {{ message }}<p v-text="message">aaa</p><p v-html="message">1</p> --><input type="button" value="按钮1" v-on:click="test1()"/><input type="button" value="按钮2" @click="test2()"><input v-model="name" /><p>{{ message }}</p><p>{{ name }}</p></div><script>// 创建了一个vue对象var app = new Vue({el: '#app',/* 绑定挂载点 */data: {message: '<b>Hello Vue!</b>',name:""},methods:{test1(){alert(this.message.split('').reverse().join(''));//翻转},test2(){this.name = "tom";}}})</script></body>
</html>

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

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

相关文章

JavaFX 图像视图

JavaFX ImageView 控件可以在 JavaFX GUI 中显示图像。ImageView 控件必须添加到场景图中才能可见。JavaFX ImageView 控件由类表示 javafx.scene.image.ImageView。 创建一个 ImageView 通过创建类的实例来创建 ImageView 控件实例ImageView。类的构造函数ImageView需要一个…

02 设计过程概述

02 设计过程概述 2-1 设计需求2-2 飞机设计的各个阶段2-2-1 概念设计2-2-2 初步设计2-2-3 详细设计 2-3 飞机概念设计的流程2-4 集成产品开发和飞机设计2-5 补充2-5-1 布局设计&#xff08;Configuration Design&#xff09;关键任务&#xff1a;作用和重要性&#xff1a;使用领…

设置systemctl 启动PostgreSQL

1、在/etc/systemd/system目录下&#xff0c;新建配置文件 postgresql.service vi /etc/systemd/system/postgresql.service [Unit] # 简短描述 Descriptionpostgresql.service # 在network.target服务之后运行&#xff0c;这里可以不要 Afternetwork.target [Service] Type…

ARIMA模型与ARIMA-GARCH模型预测时间序列

上世纪 70 年代初&#xff0c;Ljung 等人提出 ARIMA 模型&#xff0c;又称求和自回归移动平均模型。其思想 是针对于非平稳时间序列进行数学建模&#xff0c;将其通过差分运算后 进行相关数据刻画 &#xff0c;变为一个平稳的新序列&#xff0c;进而进行相关数据的刻画。 自 1…

Sping源码(九)—— Bean的初始化(非懒加载)— Bean的创建方式(自定义BeanPostProcessor)

序言 之前文章有介绍采用FactoryBean的方式创建对象&#xff0c;以及使用反射创建对象。 这篇文章继续介绍Spring中创建Bean的形式之一——自定义BeanPostProcessor。 之前在介绍BeanPostProcessor的文章中有提到&#xff0c;BeanPostProcessor接口的实现中有一个Instantiatio…

[文献解读]:斯坦福最新研究-HumanPlus:人形机器人跟踪和模仿人类

摘要 制造具有与人类相似外形的机器人的关键论点之一是&#xff0c;我们可以利用大量人类数据进行训练。然而&#xff0c;由于人形机器人感知和控制的复杂性、人形机器人与人类在形态和驱动方面仍然存在的物理差距&#xff0c;以及人形机器人缺乏从自我中心视觉学习自主技能的…

马克·雷伯特访谈:机器人的未来及波士顿动力的创新之路

引言 机器人技术作为现代科技的前沿领域&#xff0c;始终吸引着大量的关注与研究。波士顿动力公司作为这一领域的领军者&#xff0c;其创始人兼前CEO马克雷伯特&#xff08;Marc Raibert&#xff09;近日在主持人莱克斯弗里德曼&#xff08;Lex Fridman&#xff09;的播客节目…

如何用 ChatGPT DALL-E3绘画(10个案例)

如何用ChatGPT绘画——10个案例&#xff08;附提示词&#xff09; DALL•E 3可以在ChatGPT plus里直接使用了。 如果想免费使用&#xff0c;可以用新必应免费使用。 上次有个朋友问&#xff1a;DALL•E 3 有什么用。 这里用十个案例&#xff0c;来解释一下这个问题。 1.创…

爱心代码来喽

今天给大家分享一个爱心代码&#xff0c;送给我的粉丝们。愿你们天天开心&#xff0c;事事顺利&#xff0c;学业和事业有成。 下面是运行代码&#xff1a; #include<stdio.h> #include<Windows.h> int main() { system(" color 0c"); printf(&q…

简单说一下STL中的map容器的特点、底层实现和应用场景【面试】

特点&#xff1a; 基于红黑树&#xff1a;std::map利用红黑树的自平衡特性&#xff0c;确保操作的平衡性。有序容器&#xff1a;元素根据键的顺序自动排序&#xff0c;排序依据是预定义的键比较函数。唯一键值&#xff1a;容器保证每个键的唯一性&#xff0c;不允许重复键存在…

mysql中对时间的操作

SQL 语句中对时间的操作主要包括以下几种: 提取时间元素 YEAR(date_column): 提取年份MONTH(date_column): 提取月份DAY(date_column): 提取日HOUR(time_column): 提取小时MINUTE(time_column): 提取分钟SECOND(time_column): 提取秒 时间计算 DATE_ADD(date, INTERVAL expr un…

Web前端:深入剖析前端专业的核心领域

Web前端&#xff1a;深入剖析前端专业的核心领域 在数字化时代&#xff0c;Web前端作为前端专业的重要组成部分&#xff0c;扮演着至关重要的角色。它不仅涉及到网页的展示和交互&#xff0c;还关乎用户体验和产品的整体质量。那么&#xff0c;Web前端是否等同于前端专业&…

对接钉钉Stream模式考勤打卡相关事件的指南

钉钉之前的accessToken是公司级别的&#xff0c;现在的accessToken是基于应用的&#xff0c;接口的权限也是基于应用的。所以第一步是在钉钉开放平台&#xff08;https://open-dev.dingtalk.com/&#xff09;创建一个应用。 创建好应用之后&#xff0c;因为我们后续还需要调用钉…

ssm题库分享

ssm题库分享 1、&#xff08;2分&#xff09;以下哪个选项描述了在 SSM 框架集成中&#xff0c;MyBatis 的作用&#xff1f; A、实现容器管理和事务控制等功能 B、实现数据访问和对象映射等功能 C、实现 Inversion of Control 和依赖注入等功能 D、实现面向切面编程和声明…

docker拉取镜像太慢解决方案

前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 创建daemon.json文件,输入以下信息 vim /etc/docker/daemon.json{"registry-mirrors": ["https://9cpn8tt6.mirror…

“Dream Machine“震撼登场!免费推出的AI电影级巨制在网络上引爆热潮

"巅峰初现&#xff01;视频AI新星‘梦幻制造者’华美登场&#xff01; 在视频生成技术的赛道上&#xff0c;Luma AI昨日骄傲地揭开了其旗舰创新——梦幻制造者&#xff08;Dream Machine&#xff09;的神秘面纱&#xff0c;凭借无与伦比的文本到视频及图像到视频转换技术…

如何准备迎接等保测评

准备迎接等保测评的步骤 1. 确定信息系统的等级 根据信息系统的重要性、涉密程度、业务影响等因素&#xff0c;确定信息系统的安全保护等级。这是进行等保测评的第一步&#xff0c;也是整个过程的基础。 2. 系统备案 在确定等级后&#xff0c;需要向属地公安机关部门提交《…

【尚庭公寓SpringBoot + Vue 项目实战】看房预约管理(十三)

【尚庭公寓SpringBoot Vue 项目实战】看房预约管理&#xff08;十三&#xff09; 文章目录 【尚庭公寓SpringBoot Vue 项目实战】看房预约管理&#xff08;十三&#xff09;1、业务说明2、代码开发2.1、根据条件分页查询预约信息2.2、根据ID更新预约状态 1、业务说明 看房预约…

RaphaelScriptHelper(拉斐尔脚本助手)山海经钓鱼脚本开发

缘起 大家周末好,我在玩的游戏山海经出了钓鱼玩法,一天180体力,钓一次鱼差不多得十几秒,也就是用完体力得一直集中精力的操作半个小时,瞬间感觉肝度太高了。因为我玩这个游戏就是有碎片时间点几下,所以我打算自己动手搞一个自动化脚本来解放一下自己的双手。 目前写手机…

Python 踩坑记 -- 调优

前言 继续解决问题 慢 一个服务运行有点慢&#xff0c;当然 Python 本身不快&#xff0c;如果再编码不当那这个可能就是量级上的劣化。 整个 Code 主线逻辑 1700&#xff0c;各依赖封装 3000&#xff0c;主线逻辑也是很久远的痕迹&#xff0c;长函数都很难看清楚一个 if els…