php网站下载,asp 网站运行,世界知名外贸网站,四年级说新闻2023文章目录 web前端三大主流框架**1.Angular****2.React****3.Vue**什么是Vue.js 为什么要学习流行框架框架和库和插件的区别一.简介指令v-cloakv-textv-htmlv-pre**v-once**v-onv-on事件函数中传入参数事件修饰符双向数据绑定v-model 按键修饰符自定义按键修饰符别名v-bind(属性… 文章目录 web前端三大主流框架**1.Angular****2.React****3.Vue**什么是Vue.js 为什么要学习流行框架框架和库和插件的区别一.简介指令v-cloakv-textv-htmlv-pre**v-once**v-onv-on事件函数中传入参数事件修饰符双向数据绑定v-model 按键修饰符自定义按键修饰符别名v-bind(属性绑定)绑定对象绑定class绑定对象和绑定数组 的区别绑定style 分支结构v-if 使用场景v-show 和 v-if的区别 循环结构v-for 案例选项卡1、 HTML 结构2、 提供的数据 web前端三大主流框架
web前端三大主流框架是Angular、React、Vue。 库 框架
1.Angular
https://angular.io/ AngularJS诞生于2009年由Misko Hevery 等人创建后为Google所收购。是一款优秀的前端JS框架已经被用于Google的多款产品当中。AngularJS有着诸多特性最为核心的是MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。 2.React
https://react.docschina.org/ React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI很多人认为 React 是 MVC 中的 V视图。React 起源于 Facebook 的内部项目用来架设 Instagram 的网站并于 2013 年 5 月开源。React 拥有较高的性能代码逻辑非常简单越来越多的人已开始关注和使用它。 3.Vue
官方网址https://cn.vuejs.org/ 数据驱动视图
什么是Vue.js
Vue.js 是目前最火的一个前端框架React是最流行的一个前端框架React除了开发网站还可以开发手机App Vue语法也是可以用于进行手机App开发的Vue.js 是前端的主流框架之一和Angular.js、React.js 一起并成为前端三大主流框架Vue.js 是一套构建用户界面的框架只关注视图层它不仅易于上手还便于与第三方库或既有项目整合。Vue有配套的第三方类库可以整合起来做大型项目的开发前端的主要工作主要负责MVC中的V这一层主要工作就是和界面打交道来制作前端页面效果
为什么要学习流行框架
企业为了提高开发效率在企业中时间就是效率效率就是金钱
企业中使用框架能够提高开发的效率提高开发效率的发展历程原生JS - Jquery之类的类库 - 前端模板引擎 - Angular.js / Vue.js能够帮助我们减少不必要的DOM操作提高渲染效率双向数据绑定的概念【通过框架提供的指令我们前端程序员只需要关心数据的业务逻辑不再关心DOM是如何渲染的了】在Vue中一个核心的概念就是让用户不再操作DOM元素解放了用户的双手让程序员可以更多的时间去关注业务逻辑
增强自己就业时候的竞争力
人无我有人有我优
框架和库和插件的区别 框架是一套完整的解决方案对项目的侵入性较大项目如果需要更换框架则需要重新架构整个项目。 库插件提供某一个小功能对项目的侵入性较小如果某个库无法完成某些需求可以很容易切换到其它库实现需求。 一.简介
MVVM是Model-View-ViewModel的简写 即模型-视图-视图模型
M:【模型】指的是后端传递的数据。
V:【视图】指的是所看到的页面。
VM:【视图模型】mvvm模式的核心它是连接view和model的桥梁。它有两个方向一是将【模型】转化成【视图】即将后端传递的数据转化成所看到的页面。实现的方式是数据绑定。
二是将【视图】转化成【模型】即将所看到的页面转化成后端的数据。实现的方式是DOM 事件监听。
这两个方向都实现的我们称之为数据的双向绑定。
MVVM 就是将其中的View 的状态和行为抽象化让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了。 为什么会有MVVM框架
在过去的10年中我们已经把很多传统的服务端代码放到了浏览器中这样就产生了成千上万行的javascript代码它们连接了各式各样的HTML 和CSS文件但缺乏正规的组织形式这也就是为什么越来越多的开发者使用javascript框架。比如angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题出现了很多类库其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成所以维护性和扩展性极差。综上两方面原因才有了MVVM模式一类框架的出现。比如vue,通过数据的双向绑定极大了提高了开发效率。
指令
本质就是自定义属性Vue中指定都是以 v- 开头
v-cloak /*v-cloak指令的用法1、提供样式[v-cloak]{display: none;}2、在插值表达式所在的标签中添加v-cloak指令背后的原理先通过样式隐藏内容然后在内存中进行值的替换替换好之后再显示最终的结果*/防止页面加载时出现闪烁问题 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle typetext/css[v-cloak]{display: none;}/style
/head
bodydiv idappdiv v-cloak{{msg}}/div/divscript typetext/javascript srcjs/vue.js/scriptscript typetext/javascript/*v-cloak指令的用法1、提供样式[v-cloak]{display: none;}2、在插值表达式所在的标签中添加v-cloak指令背后的原理先通过样式隐藏内容然后在内存中进行值的替换替换好之后再显示最终的结果*/var vm new Vue({el: #app,data: {msg: Hello Vue}});/script
/body
/htmlv-text
v-text指令用于将数据填充到标签中作用于插值表达式类似但是没有闪动问题如果数据中有HTML标签会将html标签一并输出注意此处为单向绑定数据对象上的值改变插值会发生变化但是当插值发生变化并不会影响数据对象的值
div idapp!-- 注意:在指令中不要写插值语法 直接写对应的变量名称 在 v-text 中 赋值的时候不要在写 插值语法一般属性中不加 {{}} 直接写 对应 的数据名 --p v-textmsg/pp!-- Vue 中只有在标签的 内容中 才用插值语法 --{{msg}}/p
/divscriptnew Vue({el: #app,data: {msg: Hello Vue.js}});/scriptv-html 用法和v-text 相似 但是他可以将HTML片段填充到标签中 可能有安全问题, 一般只在可信任内容上使用 v-html永不用在用户提交的内容上 它与v-text区别在于v-text输出的是纯文本浏览器不会对其再进行html解析但v-html会将其当html标签解析后输出。 div idappp v-htmlhtml/p !-- 输出html标签在渲染的时候被解析 --p{{message}}/p !-- 输出span通过双括号绑定/span --p v-texttext/p !-- 输出spanhtml标签在渲染的时候被源码输出/span --
/div
scriptlet app new Vue({el: #app,data: {message: span通过双括号绑定/span,html: spanhtml标签在渲染的时候被解析/span,text: spanhtml标签在渲染的时候被源码输出/span,}});
/scriptv-pre
显示原始信息跳过编译过程跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编译加这个指令可以加快渲染 span v-pre{{ this will not be compiled }}/span !-- 显示的是{{ this will not be compiled }} --span v-pre{{msg}}/span !-- 即使data里面定义了msg这里仍然是显示的{{msg}} --
scriptnew Vue({el: #app,data: {msg: Hello Vue.js}});/scriptv-once
执行一次性的插值【当数据改变时插值处的内容不会继续更新】 !-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js --span v-once{{ msg}}/span
scriptnew Vue({el: #app,data: {msg: Hello Vue.js}});
/scriptv-on
形式如v-on:click 缩写为 click;
v-on事件函数中传入参数 bodydiv idappdiv{{num}}/divdiv!-- 如果事件直接绑定函数名称那么默认会传递事件对象作为事件函数的第一个参数 --button v-on:clickhandle1点击1/button!-- 2、如果事件绑定函数调用那么事件对象必须作为最后一个参数显示传递并且事件对象的名称必须是$event --button v-on:clickhandle2(123, 456, $event)点击2/button/div/divscript typetext/javascript srcjs/vue.js/scriptscript typetext/javascriptvar vm new Vue({el: #app,data: {num: 0},methods: {handle1: function(event) {console.log(event.target.innerHTML)},handle2: function(p, p1, event) {console.log(p, p1)console.log(event.target.innerHTML)this.num;}}});/script事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。 Vue 不推荐我们操作DOM 为了解决这个问题Vue.js 为 v-on 提供了事件修饰符 修饰符是由点开头的指令后缀来表示的 .stop 阻止冒泡 .prevent 阻止默认事件 .self 只当事件在该元素本身比如不是子元素触发时触发回调 .once 事件只触发一次
bodydiv idappdiv{{num}}/divdiv classdiv1 v-on:clickhandle1button v-on:clickhandle0点击/button/divdiva hrefhttp://www.baidu.com v-on:click.self.preventhandle2百度p我是一个p标签/p/a/div/divscript typetext/javascript srcjs/vue.js/scriptscript typetext/javascript/*事件绑定-事件修饰符*/var vm new Vue({el: #app,data: {num: 0},methods: {handle0: function (event) {this.num;console.log(我是点击子元素);// 阻止冒泡// event.stopPropagation();},handle1: function (event) {this.numconsole.log(我是点击父元素);},handle2: function (event) {alert(我弹)// 阻止默认行为// event.preventDefault();}}});/script
/body使用修饰符时顺序很重要相应的代码会以同样的顺序产生。click.prevent.self “c” 总是先执行prevent无论是内部元素还是本身元素触发他都会prevent默认事件。只不过只有当你点击a元素的时候才会触发c事件因此会阻止所有的点击的默认行为 click.self.prevent “c” 当你点击的元素是a的时候才会prevent默认事件而且执行c事件因此只会阻止对元素自身的点击。
双向数据绑定
当数据发生变化的时候视图也就发生变化当视图发生变化的时候数据也会跟着同步变化
v-model
v-model是一个指令限制在 input、select、textarea、components中使用 div idappdiv{{msg}}/divdiv当输入框中内容改变的时候 页面上的msg 会自动更新input typetext v-modelmsg/div/div简易计算器
按键修饰符
在做项目中有时会用到键盘事件在监听键盘事件时我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
!-- 只有在 keyCode 是 13 时调用 vm.submit() --
input v-on:keyup.13submit!-- -当点击enter 时调用 vm.submit() --
input v-on:keyup.entersubmit!--当点击enter或者space时 时调用 vm.alertMe() --
input typetext v-on:keyup.enter.spacealertMe 常用的按键修饰符
.enter enter键
.tab tab键
.delete (捕获“删除”和“退格”按键) 删除键
.esc 取消键
.space 空格键
.up 上
.down 下
.left 左
.right 右scriptvar vm new Vue({el:#app,methods: {submit:function(){},alertMe:function(){},}})/script自定义按键修饰符别名
在Vue中可以通过config.keyCodes自定义按键修饰符别名Vue.config.keyCodes.f2113
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
bodydiv idappinput typetext v-on:keyup.f2handle v-modelinfo/divscript typetext/javascript srcjs/vue.js/scriptscript typetext/javascript/*事件绑定-自定义按键修饰符规则自定义按键修饰符名字是自定义的但是对应的值必须是按键对应event.keyCode值*/Vue.config.keyCodes.f2 113var vm new Vue({el: #app,data: {info: },methods: {handle: function(event){console.log(event.keyCode)}}});/script
/body
/html
v-bind(属性绑定)
v-bind 指令被用来响应地更新 HTML 属性v-bind:href 可以缩写为 :href;
!-- 绑定一个属性 --
img v-bind:srcimageSrc!-- 缩写 --
img :srcimageSrc属性绑定案例
bodydiv idappa v-bind:hrefurl :titlemsg123百度/aa :hrefurl百度1/abutton v-on:clickhandle切换/button/divscript typetext/javascript srcjs/vue.js/scriptscript typetext/javascript/*属性绑定*/var vm new Vue({el: #app,data: {url: http://www.baidu.com,msg:这是一个a标签},methods: {handle: function(){// 修改URL地址this.url http://www.sina.com;}}});/script
/body绑定对象
我们可以给v-bind:class 一个对象以动态地切换class。注意v-bind:class指令可以与普通的class特性共存
1、 v-bind 中支持绑定一个对象 // div classbox :class{active:isActive,bgc:isBgc}/div
这里的键是类值是data中的数据中的属性data数据中属性值是布尔类型
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 100px;height: 100px;}.active {border: 1px solid red;}.bgc {background:pink}/style
/headbodydiv idappinput typebutton clickhandle value切换div classbox :class{active:isActive,bgc:isBgc}/div/div
/body
script srcjs/vue.js/script
scriptvar vm new Vue({el:#app,data:{isActive:true,isBgc:true},methods:{handle () {this.isActive !this.isActivethis.isBgc !this.isBgc}}})/script/html绑定class
2、 v-bind 中支持绑定一个数组 数组中isactive和 isbgc 对应为data中的数据中的键。data中数据的的属性值是类要加双引号置空的办法为 this.isbgc
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.active {width: 100px;height: 100px;border: 1px solid pink;}.bgc {background: Red}/style
/headbodydiv idappinput typebutton value清空 clickhandlediv classbox :class[isactive,isbgc]123/div/divscript srcjs/vue.js/scriptscriptvar vm new Vue({el: #app,data: {isactive: active,isbgc: bgc},methods: {handle() {this.isbgc }}})/script
/body/html绑定对象和绑定数组 的区别
绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据 属性值是布尔类型绑定数组的时候数组里面存的是data 中的数据属性 data的值是类名
绑定style
!-- CSS 属性名可以用驼峰式 (camelCase) --div classbox clickhandle v-bind:style{backgroundColor:divColor,width:divWidth,height:divHeight}
内联样式/divdiv v-bind:stylestyleObject绑定样式对象/div!--组语法可以将多个样式对象应用到同一个元素 --
div v-bind:style[styleObj1, styleObj2]/div!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idappdiv classbox clickhandle v-bind:style{backgroundColor:divColor,width:divWidth,height:divHeight}/divdiv classbox clickhandle v-bind:stylestyleObject/divdiv classbox clickhandle v-bind:style[styleObject,style1Object]/div/div
/body
script srcjs/vue.js
/scriptscriptvar vm new Vue({el: #app,data: {divColor: red,divWidth: 100px,divHeight: 100px,styleObject: {width: 200px,height: 200px,background: orange},style1Object: {background: blue}},methods: {handle() {this.divColor pinkthis.styleObject.background cyan}}})
/script/html分支结构
v-if 使用场景
1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素2- 进行两个视图之间的切换
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box1,.box2 {width:100px;height:100px;border:1px solid red}.box3 {width:100px;height:100px;border:1px solid cyan}/style
/head
bodydiv idappinput typebutton valuetoggle1 clickhandle1div classbox1 v-ifflag /divdiv classbox3 v-elseflag /divinput typebutton valuetoggle2 clickhandle2 div classbox2 v-showflag1/div/divscript srcjs/vue.js/scriptscriptvar vm new Vue({el:#app,data:{flag:false,flag1:true},methods:{handle1 () {this.flag !this.flag},handle2 () {this.flag1 !this.flag1}}})/script
/body/html
---------------------------------------------------------------div v-iftype AA/div!-- v-else-if紧跟在v-if或v-else-if之后 表示v-if条件不成立时执行--div v-else-iftype BB/divdiv v-else-iftype CC/div!-- v-else紧跟在v-if或v-else-if之后--div v-elseNot A/B/C/divscriptnew Vue({el: #app,data: {type: C}})
/script
v-show 和 v-if的区别
v-show本质就是标签display设置为none控制隐藏 v-show只编译一次后面其实就是控制css而v-if不停的销毁和创建故v-show性能更好一点。 v-if是动态的向DOM树内添加或者删除DOM元素 v-if切换有一个局部编译/卸载的过程切换过程中合适地销毁和重建内部的事件监听和子组件一般来说v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此如果需要频繁切换 v-show 较好如果在运行时条件不大可能改变 v-if 较好。
循环结构
v-for 用于循环的数组里面的值可以是对象也可以是普通元素 1.迭代数组 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/**{margin:0;padding:0}
a {text-decoration:none}
ul,li {list-style:none}*//stylescript src./js/vue.js/script
/headbodydiv idappulli v-for(item,index) in stars{{索引是index内容是item}}/li/ululli v-for(item,index) in studentsspan{{item.name}}/spanspan{{item.age}}/span/li/ul/divscriptvar vm new Vue({el: #app,data: {stars: [西施, 王昭君, 杨玉环, 貂蝉],students: [{name: zhagnsan,age: 18},{name: lisi,age: 19},{name: wangwu,age: 18},]},methods: {}})/script
/body/html2.迭代对象
!-- 循环遍历对象身上的属性 --div v-for(val, key, i) in userInfo{{val}} --- {{key}} --- {{i}}/div
!-- 循环结构-遍历对象!DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleDocument/title
style
/**{margin:0;padding:0}
a {text-decoration:none}
ul,li {list-style:none}*/
/style
script src./js/vue.js/script
/head
body
div idappli v-ifvaluezhangsan v-for(value,key,index) in objspan{{键是key}}/spanspan{{值是value}}/spanspan{{索引index}}/span/li
/div
scriptvar vmnew Vue({el:#app,data:{obj:{name:zhangsan,age:18,gender:male}},methods:{}})
/script
/body
/html- 同时使用 v-if 和 v-for
- li v-ifvaluezhangsan v-for(value,key,index) in obj
3.迭代数字
p v-fori in 10这是第 {{i}} 个P标签/p数字迭代时是从1开始 key 的作用- **key来给每个节点做一个唯一标识**- **key的作用主要是为了高效的更新虚拟DOM**- 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时它默认用 “**就地复用**” 策略。如果数据项的顺序被改变Vue将**不是移动 DOM 元素来匹配数据项的顺序** 而是**简单复用此处每个元素**并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示**以便它能跟踪每个节点的身份从而重用和重新排序现有元素**你需要为每项提供一个唯一 key 属性。2.2.0 的版本里**当在组件中使用** v-for 时key 现在是必须的。html
ul
li v-foritem in items :keyitem.id.../li
/ul
案例演示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/vue.js/script
/head
bodydiv idapplabelID:input typetext v-modelid/labellabelname:input typetext v-modelname/labelinput typebutton value添加 v-on:clickaddp v-for(item,i) in list :keyitem.idinput typecheckbox ID:{{item.id}}----Name:{{item.name}}/p/divscriptvar vmnew Vue({el:#app,data:{id:,name:,list:[{id:1,name:张三},{id:2,name:李四},{id:3,name:王五},{id:4,name:赵六},{id:5,name:孙七}]},methods:{add(){this.list.unshift({id:this.id,name:this.name})}}})/script
/body
/html案例选项卡
1、 HTML 结构
div idappdiv classtab!-- tab栏 --ulli classactiveapple/lili classorange/lili classlemon/li/ul!-- 对应显示的图片 --div classcurrentimg srcimg/apple.png/divdiv classimg srcimg/orange.png/divdiv classimg srcimg/lemon.png/div/div/div
css样式
style typetext/css.tab ul {overflow: hidden;padding: 0;margin: 0;}.tab ul li {box-sizing: border-box;padding: 0;float: left;width: 100px;height: 45px;line-height: 45px;list-style: none;text-align: center;border-top: 1px solid blue;border-right: 1px solid blue;cursor: pointer}.tab ul li:first-child {border-left: 1px solid blue;}.tab ul li.active {background-color: orange;}.tab div {width: 500px;height: 300px;display: none;text-align: center;font-size: 30px;line-height: 300px;border: 1px solid blue;border-top: 0px;}.tab div.current {display: block;}/style2、 提供的数据 list: [{id: 1,title: apple,path: img/apple.png}, {id: 2,title: orange,path: img/orange.png}, {id: 3,title: lemon,path: img/lemon.png}]
