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

框架的使用

什么是框架?

盖房子,框架结构

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

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

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

举例:操作网页

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

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

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.lryc.cn/news/374305.html

相关文章:

  • Autosar-DEM诊断事件管理流程
  • LabVIEW输送机动态特性参数监测系统
  • 绿色版DirectoryOpus功能强大且高度可定制的Windows文件管理器
  • Cocos Creator,Youtube 小游戏!
  • 分层解耦
  • GenICam标准(六)
  • JavaFX VBox
  • xss+csrf项目实例
  • 速盾:cdn加速怎么计费?
  • Vue3 中 props 与 emit 用法
  • 【python】如何import 另一个路径下的py文件内容
  • C/C++ Adaline自适应线性神经网络算法详解及源码
  • UniApp+Vue3使用Vant-微信小程序组件
  • python IP 端口 socket tcp 介绍
  • 【动态规划】| 路径问题之最小路径和 力扣64
  • 如何在vector中插入和删除元素?
  • 独具韵味的移动端 UI 风格
  • 【SpringBoot】SpringBoot:构建实时聊天应用
  • 基于Matlab的车牌识别停车场出入库计时计费管理系统(含GUI界面)【W6】
  • 大众点评js逆向过程(未完)
  • web前端如何设置单元格:深入解析与实用技巧
  • 龙迅LT9611UXC 2 PORT MIPIDSI/CSI转HDMI 2.1,支持音频IIS/SPDIF输入,支持标准4K60HZ输出
  • 红黑树(C++)
  • PyCharm设置不默认打开上次的项目
  • Eureka到Nacos迁移实战:解决配置冲突与启动异常
  • k8s 小技巧: 查看 Pod 上运行的容器
  • 【Git】基础操作
  • Linux:基础IO(二.缓冲区、模拟一下缓冲区、详细讲解文件系统)
  • 事件传播机制 与 责任链模式
  • uniapp 展示地图,并获取当前位置信息(精确位置)