郑州网站建设修改,深圳通信管理局网站,北京到安阳高铁时刻表查询,域名交易平台0 前端的发展史
1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)#xff1a;编写一个个的页面 - 给后端(PHP、Python、Go、Java) - 后端嵌入模板语法 - 后端渲染完数据 - 返回数据给前端 - 在浏览器中查看
2.Ajax的出现 - 后台发送异步请求#xff0c;Re…0 前端的发展史
1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)编写一个个的页面 - 给后端(PHP、Python、Go、Java) - 后端嵌入模板语法 - 后端渲染完数据 - 返回数据给前端 - 在浏览器中查看
2.Ajax的出现 - 后台发送异步请求RenderAjax混合
3.单用Ajax加载数据DOM渲染页面前后端分离的雏形
4.Angular框架的出现1个JS框架出现了“前端工程化”的概念前端也是1个工程、1个项目
5.React、Vue框架当下最火的2个前端框架Vue国人喜欢用React外国人喜欢用
6.移动开发AndroidIOS WebWeb微信小程序支付宝小程序 桌面开发Windows桌面前端 - 大前端
7.一套代码在各个平台运行大前端谷歌FlutterDart语言和Java很像可以运行在IOS、Android、PC端
8.在Vue框架的基础性上 uni-app一套编码 编到10个平台
9.在不久的将来 前端框架可能会一统天下 详细的发展史 聊一聊你该了解的前端的历史 - 知乎 一 Vue介绍 和 基本使用
1.Vue介绍
Vue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合
渐进式框架
可以一点一点地使用它只用一部分也可以整个工程都使用它
网站
官网Vue.js - 渐进式 JavaScript 框架 | Vue.js文档https://cn.vuejs.org/v2/guide/
2.Vue特点
易用
通过 HTML、CSS、JavaScript构建应用
灵活
不断繁荣的生态系统可以在一个库和一套完整框架之间自如伸缩。
高效
20kB mingzip 运行大小超快虚拟 DOM最省心的优化
3.M-V-VM思想
① MVVM介绍
MVVM 是Model-View-ViewModel 的缩写它是一种基于前端开发的架构模式是一种事件驱动编程方式
Model vue对象的data属性里面的数据这里的数据要显示到页面中View vue中数据要显示的HTML页面在vue中也称之为“视图模板” HTMLCSSViewModelvue中编写代码时的vm对象它是vue.js的核心负责连接 View 和 Model数据的中转保证视图和数据的一致性所以前面代码中data里面的数据被显示中p标签中就是vm对象自动完成的双向数据绑定JS中变量变了HTML中数据也跟着改变 ② MVVM的特性
低耦合视图View可以独立于Model变化和修改1个ViewModel可以绑定到不同的View上当View变化的时候 Model可以不变当Model变化的时候 View也可以不变可复用可以把一些视图逻辑放在1个ViewModel中让很多View重用这端视图的逻辑以此减少代码冗余独立开发开发人员可以专注于业务逻辑和数据的开发ViewModel设计人员可以专注于页面设计可测试界面元素是比较难以测试的而现在的测试可以针对ViewModel来编写
③ MVVM的逻辑 4.组件化开发、单页面开发
组件化开发
类似于DTL中的include每一个组件的内容都可以被替换和复用 单页面开发
只需要1个页面结合组件化开发来替换页面中的内容
页面的切换只是组件的替换页面还是只有1个index.html
5.版本
1.X使用得较少
2.X普遍使用
3.X刚出没多久只有Beta版
6.引入方式
① CDN的方式引入
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script② 下载后导入
其实就是直接在浏览器中打开https://cdn.jsdelivr.net/npm/vue/dist/vue.js然后复制下来创建一个js文件再粘贴进去
script src./js/vue.js/script7.补充
解释型的语言是需要解释器的
js就是一门解释型语言只不过js解释器被集成到了浏览器中
所以在浏览器的Console中输入命令就和在cmd中输入python后进入交互式环境一样
nodejs一门后端语言
把chrome的v8引擎解释器安装到操作系统之上
8.简单使用
index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titlevue的简单使用/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js/script
/head
bodydiv idbox{{name}}
/div/body
scriptlet vm new Vue({el: #box, // 在box这个div中可以写 vue的语法data: {name: Hello World}})
/script
/html双向数据绑定测试
vm._data.namedarker // 修改js中变量的值$(#box).text(hahah) // 修改HTML的div中的值二 模板语法
1 插值语法
语法{{ 变量、js语法、三目表达式 }}
index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8title插值/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js/script
/head
bodydiv idboxulli字符串{{name}}/lili数值{{age}}/lili数组{{list1}}/lili对象{{obj1}}/lili字符串{{link1}}/lili运算{{10203040}}/lili三目运算符{{1020?是:否}}/li/ul
/div/body
scriptlet vm new Vue({el: #box, // 在box这个div中可以写 vue的语法data: {name: Darker, // 字符串age: 18, // 数值list1: [1,2,3,4], // 数组obj1: {name: Darker, age: 19}, // 对象link1: a hrefhttps://www.baidu.com百度一下 你就知道/a}})
/script
/html三 指令
1 文本指令
指令释义v-html让HTML渲染成页面v-text标签内容显示js变量对应的值v-show放1个布尔值为真 标签就显示为假 标签就不显示v-if放1个布尔值为真 标签就显示为假 标签就不显示 v-show 与 v-if 的区别 v-show标签还在只是不显示了display: nonev-if直接操作DOM删除/插入 标签 v-html让HTML渲染成页面
!DOCTYPE html
html langen
headmeta charsetUTF-8titlev-html/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js/script
/head
bodydiv idboxulli v-htmllink1/li/ul
/div/body
scriptlet vm new Vue({el: #box, // 在box这个div中可以写 vue的语法data: {link1: a hrefhttps://www.baidu.com百度一下 你就知道/a}})
/script
/htmlv-text标签内容显示js变量对应的值
!DOCTYPE html
html langen
headmeta charsetUTF-8titlev-text/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js/script
/head
bodydiv idboxulli v-textlink1/li/ul
/div/body
scriptlet vm new Vue({el: #box, // 在box这个div中可以写 vue的语法data: {link1: a hrefhttps://www.baidu.com百度一下 你就知道/a,}})
/script
/htmlv-show显示/隐藏内容
!DOCTYPE html
html langen
headmeta charsetUTF-8titlev-show/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js/script
/head
bodydiv idboxh3案例控件通过按钮来控制显示和小事/h3button clickhandleClick()点我/buttonbrdiv v-showisShowisShow/div
/div/body
scriptlet vm new Vue({el: #box,data: {isShow: true,},methods: {handleClick(){this.isShow !this.isShow // this指的是当前的vue对象},}})
/script
/htmlv-if显示/删除内容
!DOCTYPE html
html langen
headmeta charsetUTF-8titlev-if/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js/script
/head
bodydiv idboxh3案例控件通过按钮来控制显示和消失/h3button clickhandleClick()点我/buttonbrdiv v-ifisCreatedisCreated/div
/div/body
scriptlet vm new Vue({el: #box,data: {isCreated:true},methods: {handleClick(){this.isCreated !this.isCreated // this指的是当前的vue对象},}})
/script
/html2.事件指令
指令释义v-on触发事件不推荐触发事件推荐[event]触发event事件可以是其他任意事件
v-on:click可以缩写成click
!DOCTYPE html
html langen
headmeta charsetUTF-8title事件指令/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js/script
/head
bodydiv idboxbutton v-on:clickhandleClick1点我1/button!-- 下面这个用的多 --button clickhandleClick2点我2/button!-- 如果不传参数是没有区别的 --button clickhandleClick3()点我3-1(带括号)/button!-- 如果要传参数 --button clickhandleClick3(1,22,333)点我3-2(带括号参数)/button!-- 传入事件 --button clickhandleClick4($event)点我4(带事件参数)/button
/div/body
scriptlet vm new Vue({el: #box,data: {},methods: {handleClick1() {console.log(点我1)},handleClick2() {console.log(点我2)},handleClick3(a,b,c) {console.log(a,b,c)},handleClick4(event) {console.log(event)},}})
/script
/html3.属性指令
指令释义v-bind直接写js的变量或语法不推荐:直接写js的变量或语法推荐
v-bind:classjs变量可以缩写成:classjs变量
!DOCTYPE html
html langen
headmeta charsetUTF-8title属性指令/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js/scriptstyle.red {color: rgba(255, 104, 104, 0.7);}.purple {color: rgba(104, 104, 255, 0.7);}/style
/head
bodydiv idboximg v-bind:srcurl alt height100brbutton clickhandleClick点我变色/buttondiv :classisActive?red:purpleh1我是一个div/h1/div
/div/body
scriptlet vm new Vue({el: #box,data: {url: https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u205441424,1768829584fm26gp0.jpg,change: red,isActive: true},methods: {handleClick() {this.isActive !this.isActive},}})
/script
/html四Style 和 Class
数据的绑定
语法:属性名js变量/js语法
:classjs变量、字符串、js数组
class三目运算符、数组、对象{red: true}
:stylejs变量、字符串、js数组
style三目运算符、数组[{backgreound: red},]、对象{background: red}
!DOCTYPE html
html langen
headmeta charsetUTF-8titleStyle 和 Class/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js/scriptstyle.red {color: rgba(255, 104, 104, 0.7);}.font-20 {font-size: 20px;}.be-bold {font-weight: bold;}/style
/head
bodydiv idboxp我是一个普通的p标签/pdiv :classclass_objp我是一个不普通的p标签1/p/divbutton clickhandleClick点击放大字体/buttondiv :stylestyle_objp我是一个不普通的p标签2/p/div
/div/body
scriptlet vm new Vue({el: #box,data: {// class_obj: red, // 放1个是字符串class_obj: [red, font-20, be-bold], // 放2个是数组// class_obj: { red:true, be-bold:false}, // 也可以放对象// 数组.push() 从尾部添加1个元素// 数组.pop() 删除最后1个元素 并返回// 对象的写法style_obj: {color: red,fontSize: 20px}// style_obj: [{background:red}, {fontSize:20px}]},methods: {handleClick(){this.style_obj[fontSize]30px}}})
/script
/html下方试验的命令
vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.push(be-bold)
vm.class_obj.push(red)
vm.class_obj.push(font-20)
