伊利网站建设评价,网站建设的栏目策划,太仓住房和城乡建设局网站,网站建设 容易吗文章目录前端发展史前端三要素JavaScript框架UI框架JavaScript构建工具三端合一什么是VueVue的好处什么是MVVM为什么要使用MVVM环境配置第一个Vue程序声明式渲染模板语法绑定样式数据绑定为什么要实现数据的双向绑定el与data的两种写法条件渲染事件驱动事件的基本用法事件修饰符…
文章目录前端发展史前端三要素JavaScript框架UI框架JavaScript构建工具三端合一什么是VueVue的好处什么是MVVM为什么要使用MVVM环境配置第一个Vue程序声明式渲染模板语法绑定样式数据绑定为什么要实现数据的双向绑定el与data的两种写法条件渲染事件驱动事件的基本用法事件修饰符键盘事件MVVM模型Vue中的数据代理计算属性计算属性缓存 vs 方法侦听属性监视属性基本用法深度监视监视属性简写监听属性VS计算属性列表渲染基本列表key的作用与原理列表过滤列表排序Vue检测数据原理案例引入本质原理收集表单数据过滤器常见内置指令v-text指令v-html指令v-clock指令v-once指令v-prev指令自定义指令Vue对象生命周期引出生命周期生命周期分析Vue和Axios配合使用前端发展史
前端三要素
HTML结构超文本标记语言Hyper Text Markup Language决定网页的结构和内容CSS表现层叠样式表Cascading Style Sheets设定网页的表现样式。JavaScript行为是一种弱类型脚本语言其源码不需经过编译而是由浏览器解释运行用于控制网页的行为JavaScript一门弱类型脚本语言其源代码在发往客户端运行之前不需要经过编译而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
Native 原生JS开发
原生JS开发也就是让我们按照【ECMAScript】标准的开发方式简称ES特点是所有浏览器都支持。
截至到当前ES标准以发布如下版本
ES3ES4内部未正式发布ES5全浏览器支持ES6常用当前主流版本webpack打包成为ES5支持ES7ES8ES9草案阶段
区别就是逐步增加新特性。
TypeScript 微软的标准
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集 而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯·海尔斯伯格(C#、Delphi、TypeScript之父 .NET创立者) 主导。该语言的特点就是除了具备ES的特性之外还纳入了许多不在标准范围内的新特性所以会导致很多浏览器不能直接支持TypeScript语法 需要编译后(编译成JS) 才能被浏览器正确执行。
JavaScript框架 JQuery大家熟知的JavaScript库优点就是简化了DOM操作缺点就是DOM操作太频繁影响前端性能在前端眼里使用它仅仅是为了兼容IE678 AngularGoogle收购的前端框架由一群Java程序员开发其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念与微软合作采用了TypeScript语法开发对后台程序员友好对前端程序员不太友好最大的缺点是版本迭代不合理如1代–2 代除了名字基本就是两个东西 ReactFacebook 出品一款高性能的JS前端框架特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作在内存中模拟 DOM操作有效的提升了前端渲染效率缺点是使用复杂因为需要额外学习一门【JSX】语言 Vue一款渐进式 JavaScript 框架所谓渐进式就是逐步实现新特性的意思如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular模块化和React(虚拟 DOM) 的优点 Axios前端通信框架因为 Vue 的边界很明确就是为了处理 DOM所以并不具备通信能力此时就需要额外使用一个通信框架与服务器交互当然也可以直接选择使用jQuery 提供的AJAX 通信功能,但是最好还是使用我们的Axios
UI框架
Ant-Design阿里巴巴出品基于React的UI框架ElementUI、iview、ice饿了么出品基于Vue的UI框架BootStrapTeitter推出的一个用于前端开发的开源工具包AmazeUI又叫“妹子UI”一款HTML5跨屏前端框架
JavaScript构建工具
BabelJS编译工具主要用于浏览器不支持的ES新特性比如用于编译TypeScriptWebPack模块打包器主要作用就是打包、压缩、合并及按序加载
三端合一
混合开发Hybid App
主要目的是实现一套代码三端统一(PC、Android:.apk、iOS:.ipa )并能备够调用到底层件(如:传感器、GPS、 摄像头等)打包方式主要有以下两种: 云打包: HBuild - HBuildX DCloud出品; API Cloud本地打包: Cordova (前身是PhoneGap)
后端技术
前端人员为了方便开发也需要掌握一定的后端技术 但我们Java后台人员知道后台知识体系极其庞大复杂所以为了方便前端人员开发后台应用就出现NodeJS这样的技术。 NodeJS的作者已经声称放弃NodeJS (说是架构做的不好再加上笨重的node_ modules)开始开发全新架构的Deno既然是后台技术那肯定也需要框架和项目管理工具NodeJS 框架及项目管理工具如下: Express: NodeJS框架Koa: Express简化版NPM:项目综合管理工具类似于MavenYARN: NPM的替代方案类似于Maven和Gradle的关系
什么是Vue
概述
Vue (读音/vju/类似于view)是一套用于构建用户界面的渐进式框架发布于2014年2月。与其它大型框架不同的是Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层不仅易于上手还便于与第三方库(如: vue-router:跳转vue-resource:通信vuex:管理或既有项目整合。
官网: https://cn.vuejs.org/v2/guide/
对于Java程序来说我们使用框架就是导入那些封装了**『固定解决方案』的jar包然后通过『配置文件』**告诉框架做什么就能够大大简化编码提高开发效率。我们使用过的junit其实就是一款单元测试框架。
而对于JavaScript程序来说我们使用框架就是导入那些封装了**『固定解决方案』的『js文件』**然后在框架的基础上编码。
我们的Vue.js就是我们的JavaScript的框架
Vue.js的官网介绍
Vue (读音 /vjuː/类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链 (opens new window)以及各种支持类库 (opens new window)结合使用时Vue 也完全能够为复杂的单页应用提供驱动。
Vue的好处
组件化 以后其他人想用这个activity功能直接应用我的这个文件就行更好维护哪个部分出了问题就到哪个组件维护
声明式编码 命令式同学我渴了你往前走两步到饮水机面前拿出杯子倒点水回头走到我旁边往我嘴里倒水声明式同学我渴了。然后同学就把水装给我了 声明式让编码人员无需直接操作DOM,提高开发效率。因为我们的命令式就类似这种innerHTML直接操作DOM树比较麻烦
用虚拟DOM优秀的Dif算法 原来你声明了变量赋值以后写到html页面上之后如果你的数据变了刷新页面的时候相当于把原来的删除了又从头添加了数据。而vue呢先把三个数据转换成虚拟dom然后再转换成页面中的真实dom数据变化之后又生成了新的虚拟dom他会把新的虚拟dom和原来的dom进行比较然后会把原本的数据复用再添加上多出来的dom这里的赵六
为什么要使用Vue.js
轻量级 体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kbReact压缩后44kb)移动优先。更适合移动端 比如移动端的Touch事件易上手学习曲线平稳文档齐全吸取了Angular(模块化) 和React(虚拟DO) 的长处 并拥有自己独特的功能如计算属性开源社区活跃度高
什么是MVVM
MVVMModel-View-ViewModel是一种软件设计模式
MVVM源自于经典的MVCModel-View-Controller模式。MVVM的核心是ViewModel层负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下
该层向上与视图层进行双向数据绑定向下与Model层通过接口请求进行数据交互 View View是视图层 也就是用户界面。前端主要由HTML和CSS来构建 为了更方便地展现view Model或者Model层的数据 已经产生了各种各样的前后端模板语言 比如FreeMarkerThymeleaf等等 各大MVVM框架如Vue.js. Angular JS EJS等也都有自己用来构建用户界面的内置模板语言。 Model Model是指数据模型 泛指后端进行的各种业务逻辑处理和数据操控 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则 ViewModel ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层 前端开发者对从后端获取的Model数据进行转换处理 做二次封装 以生成符合View层使用预期的视图数据模型。需要注意的是View Model所封装出来的数据模型包括视图的状态和行为两部分 而Model层的数据模型是只包含状态的 比如页面的这一块展示什么那一块展示什么这些都属于视图状态(展示)页面加载进来时发生什么点击这一块发生什么这一块滚动时发生什么这些都属于视图行为(交互) 视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定 View Model的内容会实时展现在View层 这是激动人心的 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。 MVVM框架已经把最脏最累的一块做好了 我们开发者只需要处理和维护View Model 更新数据视图就会自动得到相应更新真正实现事件驱动编程。 之前假如我们的后端数据改变我们需要重新刷新页面或者是通过JS原生语法去找到对应的DOM树的结点去修改 View层展现的不是Model层的数据 而是ViewModel的数据 由ViewModel负责与Model层交互 这就完全解耦了View层和Model层 这个解耦是至关重要的 它是前后端分离方案实施的重要一环。 为什么要使用MVVM
MVVM模式和MVC模式一样主要目的是分离视图(View)和模型(Model),有几大好处
低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上当View变化的时候Model可以不变当Model变化的时候View也可以不变。**可复用:**你可以把一些视图逻辑放在一个ViewModel里面让很多View重用这段视图逻辑。独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。可测试:界面素来是比较难于测试的而现在测试可以针对ViewModel来写。
MVVM的遵从者——Vue
只是参考并不是完全遵循
Model模型层 在这里表示JavaScript对象View视图层 在这里表示DOM(HTML操作的元素)ViewModel连接视图和数据的中间件 Vue.js就是MVVM中的View Model层的实现者,在MVVM架构中 是不允许数据和视图直接通信的 只能通过ViewModel来通信 而View Model就是定义了一个Observer观察者 ViewModel能够观察到数据的变化 并对视图对应的内容进行更新ViewModel能够监听到视图的变化 并能够通知数据发生改变
环境配置 【说明】IDEA可以安装Vue的插件! 注意Vue不支持IE 8及以下版本 因为Vue使用了IE 8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器。
下载地址
开发版本 包含完整的警告和调试模式https//yuejs.org/js/vue.js删除了警告 30.96KBmingziphttps//vuejs.org/js/vue.min.js CDN script src“https://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.js”/scriptscript srchttps://cdn.jsdelivr.net/npm/vue2.5.21/dist/vue.min.js/script
也可以下载到本地进行引用
Java语言的程序包jar包JavaScript语言的程序包外部js文件
对于Java程序来说框架jar包配置文件。对于Vue来说导入Vue的外部js文件就能够使用Vue框架了。 关闭生产产提示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0script typetext/javascript src../js/vue.js/scripttitleDocument/title
/head
bodyscript typetext/javascriptVue.Config.productionTip false //设置为 false 以阻止 vue 在启动时生成生产提示。/script
/body
/html第一个Vue程序
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title初识vue/title!-- 引入Vue --script src../js/vue.js/script
/head
body!-- 准备好一个容器 --div idrooth1Hello{{name}}!/h1/divscriptVue.config.productionTip false // 阻止vue在启动时生成生产提示new Vue({el:#root, //el用于指定当前Vue实例为哪个容器服务值通常为css选择器字符串data:{ //data用于存储数据数据共el所指定的容器去使用name:JOJO}})/script
/body
/html
注意
想让Vue工作就必须创建一个Vue实例且要传入一个配置对象root容器里的代码依然符合html规范只不过混入了一些特殊的Vue语法 root容器里的代码被称为Vue模板 Vue实例与容器是一一对应的 真实开发中只有一个Vue实例并且会配合着组件一起使用
声明式渲染
声明式
**『声明式』是相对于『编程式』**而言的。
声明式告诉框架做什么具体操作由框架完成编程式自己编写代码完成具体操作
渲染 上图含义解释
蓝色方框HTML标签红色圆形动态、尚未确定的数据蓝色圆形经过程序运算以后计算得到的具体的可以直接在页面上显示的数据、渲染程序计算动态数据得到具体数据的过程
模板语法
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue模板语法/titlescript src../js/vue.js/script
/head
bodydiv idrooth1插值语法/h1h3你好{{name}}!/h3hrh1指令语法/h1a v-bind:hrefurl快去看新番/abra :hrefurl快去看新番/a/divscriptVue.config.productionTip false new Vue({el:#root, data:{ name:JOJO,url:https://www.bilibili.com/}})/script
/body
/html
Vue模板语法包括两大类
插值语法 功能用于解析标签体内容 写法{{xxx}}xxx是js表达式且可以直接读取到data中的所有区域
指令语法
功能用于解析标签包括标签属性、标签体内容、绑定事件…举例a v-bind:hrefxxx或简写为a :hrefxxxxxx同样要写js表达式且可以直接读取到data中的所有属性备注Vue中有很多的指令且形式都是v-???此处我们只是拿v-bind举个例子
你看到的v-bind等被称为指令。指令带有前缀v以表示它们是Vue提供的特殊特性。 它们会在渲染的DOM上应用特殊的响应式行为在这里该指令的意思是“将这个元素节点的value特性和Vue实例的uname属性保持一致”。
本质上v-bind:属性名表达式它们都是用Vue对象来渲染页面。只不过
文本标签体使用形式{{}}属性使用v-bind:属性名表达式形式
绑定样式
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute所以我们可以用 v-bind 处理它们只需要通过表达式计算出字符串结果即可。不过字符串拼接麻烦且易错。因此在将 v-bind 用于 class 和 style 时Vue.js 做了专门的增强。表达式结果的类型除了字符串之外还可以是对象或数组。
style.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border: 4px dashed rgb(2, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.atguigu1{background-color: yellowgreen;}.atguigu2{font-size: 30px;text-shadow:2px 2px 10px red;}.atguigu3{border-radius: 20px;}
/style
div idroot!-- 绑定class样式--字符串写法适用于样式的类名不确定需要动态指定 --div classbasic :classmood clickchangeMood{{name}}/div br/br/!-- 绑定class样式--数组写法适用于要绑定的样式个数不确定、名字也不确定 --div classbasic :classclassArr{{name}}/div br/br/!-- 绑定class样式--对象写法适用于要绑定的样式个数确定、名字也确定但要动态决定用不用 --div classbasic :classclassObj{{name}}/div br/br/!-- 绑定style样式--对象写法 --div classbasic :stylestyleObj{{name}}/div br/br/!-- 绑定style样式--数组写法 --div classbasic :stylestyleArr{{name}}/div
/div
script typetext/javascriptVue.config.productionTip falseconst vm new Vue({el:#root,data:{name:尚硅谷,mood:normal,classArr:[atguigu1,atguigu2,atguigu3],classObj:{atguigu1:false,atguigu2:false,},styleObj:{fontSize: 40px,color:red,},styleObj2:{backgroundColor:orange},styleArr:[{fontSize: 40px,color:blue,},{backgroundColor:gray}]},methods: {changeMood(){const arr [happy,sad,normal]const index Math.floor(Math.random()*3)this.mood arr[index]}},})
/script
总结
class样式 写法class“xxx”xxx可以是字符串、对象、数组 字符串写法适用于类名不确定要动态获取 因为我们的字符串绑定可以通过改变字符串的值来起到换class的作用 数组写法适用于要绑定多个样式个数不确定名字也不确定 可以改变数组的元素数组中元素中一个值代表这个样式被使用 对象写法适用于要绑定多个样式个数确定名字也确定但不确定用不用 对象的属性和对应的值布尔值为true表示被使用false表示不使用
style样式
:style{fontSize: xxx}其中xxx是动态值:style[a,b]其中a、b是样式对象
数据绑定
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title数据绑定/titlescript src../js/vue.js/script
/head
bodydiv idroot单向数据绑定input typetext v-bind:valuenamebr双向数据绑定input typetext v-model:valuename/divscriptVue.config.productionTip false new Vue({el:#root, data:{name:JOJO}})/script
/body
/html
总结
Vue中有2种数据绑定的方式 单向绑定v-bind数据只能从data流向页面 双向绑定v-model数据不仅能从data流向页面还可以从页面流向data
备注
双向绑定一般都应用在表单类元素上如input、select、textarea等v-model:value可以简写为v-model因为v-model默认收集的就是value值
什么是双向数据绑定
Vue.js是一个MVVM框架 即数据双向绑定 即当数据发生变化的时候 视图也就发生变化 当视图发生变化的时候数据也会跟着同步变化。这也算Vue.js的精髓之处了。?值得注意的是我们所说的数据双向绑定一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex那么数据流也是单项的这时就会和双向数据绑定有冲突。
为什么要实现数据的双向绑定
在Vue.js中如果使用vuex 实际上数据还是单向的 之所以说是数据双向绑定这是用的UI控件来说 对于我们处理表单 Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥在全局性数据流使用单项方便跟踪局部性数据流使用双向简单易操作。
在表单中使用双向数据绑定
你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据并对一些极端场景进行一些特殊处理。 注意v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!
el与data的两种写法
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleel与data的两种写法/titlescript src../js/vue.js/script
/head
bodydiv idrooth1Hello,{{name}}!/h1/divscriptVue.config.productionTip false //el的两种写法// const vm new Vue({// // el:#root, //第一种写法// data:{// name:JOJO// }// })// vm.$mount(#root)//第二种写法//data的两种写法new Vue({el:#root, //data的第一种写法对象式// data:{// name:JOJO// }//data的第二种写法函数式data(){return{name:JOJO}}})/script
/body
/html
总结
el有2种写法
创建Vue实例对象的时候配置el属性先创建Vue实例随后再通过vm.$mount(‘#root’)指定el的值
data有2种写法
对象式函数式
如何选择目前哪种写法都可以以后学到组件时data必须使用函数否则会报错
由Vue管理的函数一定不要写箭头函数否则this就不再是Vue实例了什么是const const 声明一个常量一旦声明之后就不能修改了 如果声明后在去修改的话就会报错 只声明不赋值也会报错不能重复声明一个常量注意const 声明的对象中属性是可以修改的 条件渲染
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title条件渲染/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idrooth2当前的n值是:{{n}}/h2button clickn点我n1/buttonh2 v-showtrueHello,{{name}}!/h2div v-ifn 1Angular/divdiv v-else-ifn 2React/divdiv v-elseVue/div/div/bodyscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el:#root,data:{name:jojo,n:0}})/script
/html
总结
根据Vue对象中数据属性的值来判断是否对HTML页面内容进行渲染 v-if系列 v-if“表达式”v-else-if“表达式”v-else适用于切换频率较低的场景特点不展示的DOM元素直接被移除其逻辑跟我们后端对应判断逻辑没有区别注三个等号在JS中表示绝对等于(就是数据与类型都要相等)v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面否则它将不会被识别。 对于show 写法v-show“表达式”适用于切换频率较高的场景如果不满足条件是通过displaynone来进行隐藏 所以使用v-if的时元素可能无法获取到而使用v-show一定可以获取到
事件驱动
事件的基本用法
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title事件的基本用法/titlescript src../js/vue.js/script
/head
bodydiv idrooth2hello,{{name}}/h2button v-on:clickshowInfo1点我提示信息1/buttonbutton clickshowInfo2($event,66)点我提示信息2/button/divscriptVue.config.productionTip false new Vue({el:#root, data:{name:JOJO},methods:{showInfo1(event){console.log(event)},showInfo2(evnet,num){console.log(event,num)}}})/script
/body
/html 事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件 可以绑定到Vue中的methods中的方法事件!
总结
使用v-on:xxx或xxx绑定事件其中xxx是事件名事件的回调需要配置在methods对象中最终会在vm上methods中配置的函数不要用箭头函数否则this就不是vm了methods中配置的函数都是被Vue所管理的函数this的指向是vm或组件实例对象clickdemo和clickdemo($event)效果一致但后者可以传参 一般我们要把event传递着 event是事件对象 比如event.target发生事件的目标也就是对应的标签 button点我提示信息2/button
事件修饰符
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title事件修饰符/titlescript typetext/javascript src../js/vue.js/scriptstyle*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}.list{width: 200px;height: 200px;background-color: peru;overflow: auto;}li{height: 100px;}/style/headbodydiv idrooth2欢迎来到{{name}}学习/h2!-- 阻止默认事件超链接的默认行为就是跳转到对应的网址这个按钮点击并不会跳转--a hrefhttp://www.atguigu.com click.preventshowInfo点我提示信息/a!--阻止事件冒泡 如果不组织冒泡我们点按钮触发了按钮的弹窗但是也会触发div的弹窗--div classdemo1 clickshowInfobutton click.stopshowInfo点我提示信息/button/div!-- 事件只触发一次 --button click.onceshowInfo点我提示信息/button!-- 使用事件的捕获模式从内往外是冒泡从外往内是捕获 默认事件处理是按冒泡想使用捕获阶段处理事件使用该修饰符--div classbox1 click.captureshowMsg(1)div1div classbox2 clickshowMsg(2)div2/div/div!-- 只有event.target是当前操作的元素时才触发事件 --div classdemo1 click.selfshowInfobutton clickshowInfo点我提示信息/button/div!-- 事件的默认行为立即执行无需等待事件回调执行完毕 我们的事件有对应的处理比如滑动滑框屏幕会往下滑而我们绑定的方法是这个事件触发的回调函数--ul wheel.passivedemo classlistli1/lili2/lili3/lili4/li/ul/div/bodyscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{name:尚硅谷},methods:{showInfo(e){alert(同学你好)},showMsg(msg){console.log(msg)},demo(){for (let i 0; i 100000; i) {console.log(#)}console.log(累坏了)}}})/script
/html
总结 Vue中的事件修饰符 prevent阻止默认事件常用 stop阻止事件冒泡常用 once事件只触发一次常用 capture使用事件的捕获模式 self只有event.target是当前操作的元素时才触发事件 比如我们例子中的按钮在div框中如果点击按钮会冒泡到div框也就会触发弹框但是触发div的组件的bytton按钮但是我们如果设置self只有当前触发事件的组件是div才会触发就不会显示两次弹框 passive事件的默认行为立即执行无需等待事件回调执行完毕
修饰符可以连续写比如可以这么用click.prevent.stopshowInfo键盘事件
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title键盘事件/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idrooth2欢迎来到{{name}}学习/h2input typetext placeholder按下回车提示输入 keydown.entershowInfo/div/bodyscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{name:尚硅谷},methods: {showInfo(e){console.log(e.target.value)}},})/script
/html
总结
键盘上的每个按键都有自己的名称和编码例如Enter13。而Vue还对一些常用按键起了别名方便使用Vue中常用的按键别名 回车enter 删除delete (捕获“删除”和“退格”键) 退出esc 空格space 换行tab (特殊必须配合keydown去使用) keydown表示按下按钮时触发keyup表示松开按钮时触发 上up 下down 左left 右right
注意 系统修饰键用法特殊ctrl、alt、shift、meta 配合keyup使用按下修饰键的同时再按下其他键随后释放其他键事件才被触发配合keydown使用正常触发事件 可以使用keyCode去指定具体的按键比如keydown.13“showInfo”但不推荐这样使用 Vue.config.keyCodes.自定义键名 键码可以自定义按键别名
MVVM模型 M模型Modeldata中的数据V视图View模板代码VM视图模型ViewModelVue实例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlemvvm/titlescript src../js/vue.js/script
/head
bodydiv idrooth2名称{{name}}/h2h2战队{{rank}}/h2h2测试{{$options}}/h2/divscriptVue.config.productionTip falsenew Vue({el:#root,data:{ name:uzi,rank:RNG}})/script
/body
/html 总结
data中所有的属性最后都出现在了vm身上vm将数据处理好给了Viewvm可以将View的改变监听到数据改变返回给我们的Modelvm身上所有的属性 及 Vue原型身上所有的属性在Vue模板中都可以直接使用 Vue中的数据代理
回顾Object.defineProperty
script typetext/javascriptlet number 女;let person {age: 18,name: 桃桃,};Object.defineProperty(person, sex, {// enumerable:true, 控制属性是否可以枚举 默认值是false// writable:true, 控制数据是否可以被修改 默认值是false// configurable:true 控制属性是否可以被删除默认值是falseget:function(){ //当有人读取person的sex属性的时候get函数就会被调用并返回值就是sex的值return number},set:function(value){//当有人修改person的sex属性的时候set函数就会被调用,且会收到修改的具体值numbervalue}});console.log(person);
/script 总结
数据代理通过一个对象代理另一个对象中的属性的操作读/写
通过 vm对象 来代理 data对象 中属性的操作读/写Vue中数据代理的好处更加方便的操作data中的数据基本原理 通过object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性都指定一个getter/setter。在getter/setter内部去操作读/写data中对应的属性。
计算属性
模板内的表达式非常便利但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如
div idexample{{ message.split().reverse().join() }}
/div在这个地方模板不再是简单的声明式逻辑。你必须看一段时间才能意识到这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时就会更加难以处理。所以对于任何复杂逻辑你都应当使用计算属性。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title计算属性/titlescript src../js/vue.js/script
/head
bodydiv idroot姓input typetext v-modelfirstNamebrbr名input typetext v-modellastNamebrbr姓名span{{fullName}}/span/divscriptVue.config.productionTip false new Vue({el:#root, data:{ firstName:张,lastName:三},computed:{fullName:{get(){return this.firstName - this.lastName},set(value){const arr value.split(-)this.firstName arr[0]this.lastName arr[1]}}}})/script
/body
/html
总结
计算属性
定义要用的属性不存在需要通过已有属性计算得来。 所以data中的数据和计算属性不能重复 原理底层借助了Objcet.defineproperty()方法提供的getter和setter。
get函数什么时候执行 初次读取时会执行一次 当依赖的数据发生改变时会被再次调用 优势与methods实现相比内部有缓存机制复用效率更高调试方便
备注
计算属性最终会出现在vm上直接读取使用即可如果计算属性要被修改那必须写set函数去响应修改且set中要引起计算时依赖的数据发生改变如果计算属性确定不考虑修改可以使用计算属性的简写形式
new Vue({el:#root, data:{ firstName:张,lastName:三},computed:{fullName(){return this.firstName - this.lastName}}
})
计算属性缓存 vs 方法
你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果
姓名span{{fullName}}/span
// 在组件中
methods: {reversedMessage: function () {return this.firstName - this.lastName}
computed:{fullName(){return this.firstName - this.lastName}
}我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要firstName和lastName 还没有发生改变多次访问 reversedMessage 计算属性会立即返回之前的计算结果而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新因为 Date.now() 不是响应式依赖这里会引起计算属性改变的的是vue管理的属性发生改变
computed: {now: function () {return Date.now()}
}相比之下每当触发重新渲染时调用方法将总会再次执行函数。我们为什么需要缓存假设我们有一个性能开销比较大的计算属性 A它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存我们将不可避免的多次执行 A 的 getter如果你不希望有缓存请用方法来替代。
总结
调用方法时每次都需要讲行计算既然有计算过程则必定产生系统开销那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来采用计算属性可以很方便的做到这点计算属性的主要特性就是为了将不经常变化的计算结果进行缓存以节约我们的系统开销计算属性的重点突出在属性两个字上(属性是名词)首先它是个属性其次这个属性有计算的能力(计算是动词)这里的计算就是个函数简单点说它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)仅此而已可以想象为缓存!
侦听属性
监视属性基本用法
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title监视属性/titlescript src../js/vue.js/script
/head
bodydiv idrooth2今天天气好{{info}}!/h2button clickchangeWeather点击切换天气/button/divscriptVue.config.productionTip false new Vue({el:#root, data:{ isHot:true,},computed:{info(){return this.isHot ? 炎热 : 凉爽 }},methods:{changeWeather(){this.isHot !this.isHot}},watch:{isHot:{immediate:true, //初始化时让handler调用一下//handler什么时候调用当isHot发生改变时handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}}}})/script
/body
/html
总结
监视属性watch
当被监视的属性也可以是计算属性 变化时回调函数自动调用进行相关操作 回调函数 handler(newValue,oldValue) newValue 新的值oldValue 旧值 监视的属性必须存在才能进行监视监视有两种写法 创建Vue时传入watch配置通过vm.$watch监视
vm.$watch(isHot,{immediate:true,handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}
})深度监视
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title深度监视/titlescript src../js/vue.js/script
/head
bodydiv idrooth3a的值是:{{numbers.a}}/h3button clicknumbers.a点我让a1/buttonh3b的值是:{{numbers.b}}/h3button clicknumbers.b点我让b1/button/divscriptVue.config.productionTip false new Vue({el:#root, data:{ isHot:true,numbers:{a:1,b:1,}},watch:{//监视多级结构中所有属性的变化numbers:{deep:true,handler(){console.log(numbers改变了)}}//监视多级结构中某个属性的变化/* numbers.a:{handler(){console.log(a被改变了)}} */}})/script
/body
/html
总结
深度监视 Vue中的watch默认不监测对象内部值的改变一层 在watch中配置deep:true可以监测对象内部值的改变多层
备注
Vue自身可以监测对象内部值的改变但Vue提供的watch默认不可以使用watch时根据监视数据的具体结构决定是否采用深度监视
watch:{numbers:{handler(){console.log(numbers改变了)}
}这个监视的是numbers这个对象也就是这个对象的地址改变才会触发监视
监视属性简写
script typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{isHot:true,},computed:{info(){return this.isHot ? 炎热 : 凉爽}},methods: {changeWeather(){this.isHot !this.isHot}},watch:{//正常写法isHot:{handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}}, //简写isHot(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue,this)}}})//正常写法vm.$watch(isHot,{handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}})//简写vm.$watch(isHot,function(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue,this)})
/script
监听属性VS计算属性
使用计算属性
new Vue({el:#root, data:{ firstName:张,lastName:三},computed:{fullName(){return this.firstName - this.lastName}}
})
使用监听属性
new Vue({el:#root,data:{firstName:张,lastName:三,fullName:张-三},watch:{firstName(val){setTimeout((){this.fullName val - this.lastName},1000);},lastName(val){this.fullName this.firstName - val}}
})
总结
computed和watch之间的区别 computed能完成的功能watch都可以完成 watch能完成的功能computed不一定能完成例如watch可以进行异步操作
两个重要的小原则
所有被Vue管理的函数最好写成普通函数这样this的指向才是vm 或 组件实例对象所有不被Vue所管理的函数定时器的回调函数、ajax的回调函数等、Promise的回调函数最好写成箭头函数这样this的指向才是vm 或 组件实例对象。箭头函数没有了this,就会往函数外面找直到找到为止而终点是window 对于Vue管理的函数出去就是window,对于定时器回调函数出去第一个是Vue
列表渲染
基本列表
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title基本列表/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idrooth2人员列表遍历数组/h2ulli v-for(p,index) in persons :keyindex{{p.name}}-{{p.age}}/li/ulh2汽车信息遍历对象/h2ulli v-for(value,k) in car :keyk{{k}}-{{value}}/li/ulh2遍历字符串/h2ulli v-for(char,index) in str :keyindex{{char}}-{{index}}/li/ulh2遍历指定次数/h2ulli v-for(number,index) in 5 :keyindex{{index}}-{{number}}/li/ul/divscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{persons:[{id:001,name:张三,age:18},{id:002,name:李四,age:19},{id:003,name:王五,age:20}],car:{name:奥迪A8,price:70万,color:黑色},str:hello}})/script/body
/html 总结
v-for指令
用于展示列表数据语法li v-for(item, index) in xxx :keyyyy其中key可以是index也可以是遍历对象的唯一标识可遍历数组、对象、字符串用的少、指定次数用的少 (item, index) in items 也可以有第二个参数对于数组来说是索引(value,key,index) in object 对于对象来说可以有三个参数keyvalue和索引
key的作用与原理
首先知道key是给虚拟DOM使用我们在真实DOM中是看不见对应属性
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlekey的原理/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idrooth2人员列表/h2button click.onceadd添加老刘/buttonulli v-for(p,index) in persons :keyindex{{p.name}} - {{p.age}}input typetext/li/ul/divscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{persons:[{id:001,name:张三,age:18},{id:002,name:李四,age:19},{id:003,name:王五,age:20}]},methods: {add(){const p {id:004,name:老刘,age:40}this.persons.unshift(p)}},})/script
/html 发现输入框中的数据发生了偏移怪状 我们的Vue在将虚拟DOM生成对应的真实DOM会对相同的key进行DOM对比算法 对于同一个key的元素如果其中内容不同的就用新生成的虚拟DOM进行生成真实DOM相同的内容则直接使用已经生成的真实DOM 总结
虚拟DOM中key的作用key是虚拟DOM中对象的标识当数据发生变化时Vue会根据【新数据】生成【新的虚拟DOM】随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较比较规则如下
对比规则 旧虚拟DOM中找到了与新虚拟DOM相同的key 若虚拟DOM中内容没变, 直接使用之前的真实DOM 若虚拟DOM中内容变了, 则生成新的真实DOM随后替换掉页面中之前的真实DOM 旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM随后渲染到到页面
用index作为key可能会引发的问题
若对数据进行逆序添加、逆序删除等破坏顺序操作会产生没有必要的真实DOM更新 界面效果没问题, 但效率低若结构中还包含输入类的DOM会产生错误DOM更新 界面有问题
开发中如何选择key?
最好使用每条数据的唯一标识作为key比如id、手机号、身份证号、学号等唯一值如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作仅用于渲染列表使用index作为key是没有问题的
列表过滤
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title列表过滤/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idrooth2人员列表/h2input typetext placeholder请输入名字 v-modelkeyWordulli v-for(p,index) of filPersons :keyindex{{p.name}}-{{p.age}}-{{p.sex}}/li/ul/divscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{keyWord:,persons:[{id:001,name:马冬梅,age:19,sex:女},{id:002,name:周冬雨,age:20,sex:女},{id:003,name:周杰伦,age:21,sex:男},{id:004,name:温兆伦,age:22,sex:男}]},computed:{filPersons(){return this.persons.filter((p){return p.name.indexOf(this.keyWord) ! -1//对于计算属性如果内部使用的vue的属性发生改变则会重新计算})}}})// new Vue({// el:#root,// data:{// keyWord:,// persons:[// {id:001,name:马冬梅,age:19,sex:女},// {id:002,name:周冬雨,age:20,sex:女},// {id:003,name:周杰伦,age:21,sex:男},// {id:004,name:温兆伦,age:22,sex:男}// ],// filPersons: [] //因为过滤不能去修改原有数据否则导致原有数据丢失// },// watch:{// keyWord:{// immediate:true, //写这个是为了在一初始化就能用空字符串来过滤数组,达到获取所有数据的// handler(value){// this.filPersonsthis.persons.filter((p){// return p.name.indexOf(value) ! -1// })// }// }// }// })/script/body
/html filter函数 filter也是一个常用的操作它用于把Array的某些元素过滤掉然后返回剩下的元素。Array的filter()也接收一个函数。filter()把传入的函数依次作用于每个元素然后根据返回值是true还是false决定保留还是丢弃该元素。 this.filPersonsthis.persons.filter((p){return p.name.indexOf(value) ! -1})内部是一个回调函数根据回调函数的结果来决定留不留这个元素indexOf表示这个字符串包含不包含value如果不包含则返回-1 对于任意字符串都包含空字符串 列表排序
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title列表过滤/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idrooth2人员列表/h2input typetext placeholder请输入名字 v-modelkeyWordbutton clicksortType 2年龄升序/buttonbutton clicksortType 1年龄降序/buttonbutton clicksortType 0原顺序/buttonulli v-for(p,index) of filPersons :keyp.id{{p.name}}-{{p.age}}-{{p.sex}}/li/ul/divscriptnew Vue({el:#root,data:{persons:[{id:001,name:马冬梅,age:30,sex:女},{id:002,name:周冬雨,age:45,sex:女},{id:003,name:周杰伦,age:21,sex:男},{id:004,name:温兆伦,age:22,sex:男}],keyWord:,sortType:0,//0代表原顺序1代表升序3代表降序},computed:{filPersons(){const arr this.persons.filter((p){return p.name.indexOf(this.keyWord) ! -1})if(this.sortType){arr.sort((p1, p2){return this.sortType 1 ? p2.age-p1.age : p1.age-p2.age})}return arr}}})/script/body/html
Vue检测数据原理
案例引入
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title数据监视的案例/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idrooth2人员列表/h2button clickupdateZS修改张三的信息/buttonulli v-for(p,index) in persons :keyp.id{{p.name}} - {{p.age}}/li/ul/divscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{persons:[{id:001,name:张三,age:18},{id:002,name:李四,age:19},{id:003,name:王五,age:20}]},methods: {updateZS(){//第一种方法// this.persons[0].name 刘颂成;//奏效// this.persons[0].age 23;//奏效//第二种方法this.persons[0] {id:001,name:刘颂成,age: 23} //无效}},})/script
/html
在对信息进行修改的时候如果是改变的是对象的指向会造成这种数据更新不成功的案例 内存中虽然数据改变了但是我们的真实DOM中并没有显示出来 数组这种直接赋值的方式不被vue认为是响应式的。
本质原理
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titleVue数据监视/titlestylebutton{margin-top: 10px;}/stylescript typetext/javascript src../js/vue.js/script/headbodydiv idrooth1学生信息/h1button clickstudent.age年龄1岁/buttonbr/button clickaddSex添加性别属性默认值男/button br/button clickaddFriend在列表首位添加一个朋友/button br/button clickupdateFirstFriendName修改第一个朋友的名字为张三/buttonbr/button clickaddHobby添加一个爱好/button br/button clickupdateHobby修改第一个爱好为开车/buttonbr/button clickremoveSmoke过滤掉爱好中的抽烟/button br/h3姓名{{student.name}}/h3h3年龄{{student.age}}/h3h3 v-ifstudent.sex性别{{student.sex}}/h3h3爱好/h3ulli v-for(h,index) in student.hobby :keyindex{{h}}/li/ulh3朋友们/h3ulli v-for(f,index) in student.friends :keyindex{{f.name}}--{{f.age}}/li/ul/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{student:{name:tom,age:18,hobby:[抽烟,喝酒,烫头],friends:[{name:jerry,age:35},{name:tony,age:36}]}},methods: {addSex(){//Vue.set(this.student,sex,男)this.$set(this.student,sex,男)},addFriend(){this.student.friends.unshift({name:jack,age:70})},updateFirstFriendName(){this.student.friends[0].name 张三},addHobby(){this.student.hobby.push(学习)},updateHobby(){this.student.hobby.splice(0,1,开车)},removeSmoke(){this.student.hobby this.student.hobby.filter((h){return h ! 抽烟})}}})/script
/html
总结
Vue监视数据的原理
vue会监视data中所有层次的数据 加工data对象变成我们的vm对象下的_data 判断是否真的是响应式依据就是该属性有没有 对应的getter 和 setter
如何监测对象中的数据 通过setter实现监视且要在new Vue时就传入要监测的数据 对象中后追加的属性Vue默认不做响应式处理 如需给后添加的属性做响应式请使用如下API Vue.set(target,propertyName/index,value)vm.$set(target,propertyName/index,value)特别注意Vue.set() 和 vm.$set() 不能直接给vm 或 vm的根数据对象_data等 添加属性
如何监测数组中的数据 通过包裹数组更新元素的方法实现而不是像对象一样添加对应的setter和getter来进行数据监视 调用原生对应的方法对数组进行更新重新解析模板进而更新页面 vm的push 和 Array的push方法不一样vue封装了数组原生的方法 调用了原生数组的push触发视图viewmodel的更新 在Vue修改数组中的某个元素一定要用如下方法 使用这些APIpush()、pop()、shift()、unshift()、splice()、sort()、reverse() Vue.set() 或 vm.$set() 而对应fliter这些没有改变原本数组内容的方法我们需要将这些方法返回的新数组赋值给我们的目标数组
收集表单数据
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title收集表单数据/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idrootform submit.preventdemo账号input typetext v-model.trimuserInfo.account br/br/密码input typepassword v-modeluserInfo.password br/br/年龄input typenumber v-model.numberuserInfo.age br/br/性别男input typeradio namesex v-modeluserInfo.sex valuemale女input typeradio namesex v-modeluserInfo.sex valuefemale br/br/爱好学习input typecheckbox v-modeluserInfo.hobby valuestudy打游戏input typecheckbox v-modeluserInfo.hobby valuegame吃饭input typecheckbox v-modeluserInfo.hobby valueeatbr/br/所属校区select v-modeluserInfo.cityoption value请选择校区/optionoption valuebeijing北京/optionoption valueshanghai上海/optionoption valueshenzhen深圳/optionoption valuewuhan武汉/option/selectbr/br/其他信息textarea v-model.lazyuserInfo.other/textarea br/br/input typecheckbox v-modeluserInfo.agree阅读并接受a hrefhttp://www.atguigu.com《用户协议》/abutton提交/button/form/div/bodyscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{userInfo:{account:,password:,age:0,sex:female,hobby:[],city:beijing,other:,agree:}},methods: {demo(){console.log(JSON.stringify(this.userInfo))}}})/script
/html 总结
收集表单数据 若input typetext/则v-model收集的是value值用户输入的内容就是value值 若input typeradio/则v-model收集的是value值且要给标签配置value属性 若input typecheckbox/ 没有配置value属性那么收集的是checked属性勾选 or 未勾选是布尔值配置了value属性 v-model的初始值是非数组那么收集的就是checked勾选 or 未勾选是布尔值v-model的初始值是数组那么收集的就是value组成的数组
v-model的三个修饰符
lazy失去焦点后再收集数据number输入字符串转为有效的数字trim输入首尾空格过滤
过滤器
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title过滤器/titlescript typetext/javascript src../js/vue.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js/script/headbodydiv idrooth2时间/h2h3当前时间戳{{time}}/h3h3转换后时间{{time | timeFormater()}}/h3h3转换后时间{{time | timeFormater(YYYY-MM-DD HH:mm:ss)}}/h3h3截取年月日{{time | timeFormater() | mySlice}}/h3/div/bodyscript typetext/javascriptVue.config.productionTip false//全局过滤器Vue.filter(mySlice,function(value){return value.slice(0,11)})new Vue({el:#root,data:{time:1626750147900,},//局部过滤器filters:{timeFormater(value, strYYYY年MM月DD日 HH:mm:ss){return dayjs(value).format(str)}}})/script
/html
总结
过滤器
定义对要显示的数据进行特定格式化后再显示适用于一些简单逻辑的处理。
语法 注册过滤器全局过滤器Vue.filter(name,callback) 或 局部过滤器new Vue{filters:{}} 使用过滤器{{ xxx | 过滤器名}} 或 v-bind:属性 “xxx | 过滤器名”
备注
过滤器可以接收额外参数多个过滤器也可以串联并没有改变原本的数据而是产生新的对应的数据
常见内置指令
v-text指令
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlev-text指令/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idrootdiv你好{{name}}/divdiv v-textname/divdiv v-textstr/div/div/bodyscript typetext/javascriptVue.config.productionTip false new Vue({el:#root,data:{name:JOJO,str:h3你好啊/h3}})/script
/html 总结
之前学过的指令 v-bind单向绑定解析表达式可简写为: v-model双向数据绑定 v-for遍历数组 / 对象 / 字符串 v-on绑定事件监听可简写为 v-if条件渲染动态控制节点是否存存在 v-else条件渲染动态控制节点是否存存在 v-show条件渲染 (动态控制节点是否展示)
v-text指令 作用向其所在的节点中渲染文本内容 与插值语法的区别v-text会替换掉节点中的内容{{xx}}则不会
v-html指令
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlev-html指令/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idrootdivHello{{name}}/divdiv v-htmlstr/divdiv v-htmlstr2/div/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{name:JOJO,str:h3你好啊/h3,str2:a hrefjavascript:location.hrefhttp://www.baidu.com?document.cookie兄弟我找到你想要的资源了快来/a,}})/script
/html 总结
v-html指令
作用向指定节点中渲染包含html结构的内容
与插值语法的区别 v-html会替换掉节点中所有的内容{{xx}}则不会 v-html可以识别html结构
严重注意v-html有安全性问题
在网站上动态渲染任意HTML是非常危险的容易导致XSS攻击一定要在可信的内容上使用v-html永远不要用在用户提交的内容上
v-clock指令
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlev-cloak指令/titlestyle[v-cloak]{display:none;}/style/headbodydiv idrooth2 v-cloak{{name}}/h2/divscript typetext/javascript src../js/vue.js/script/bodyscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{name:尚硅谷}})/script
/html
总结
v-cloak指令没有值
本质是一个特殊属性Vue实例创建完毕并接管容器后会删掉v-cloak属性使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
v-once指令
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlev-once指令/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idrooth2 v-oncen初始化的值是{{n}}/h2h2n现在的值是{{n}}/h2button clickn点我n1/button/div/bodyscript typetext/javascriptVue.config.productionTip false new Vue({el:#root,data:{n:1}})/script
/html
效果 总结
v-once指令
v-once所在节点在初次动态渲染后就视为静态内容了以后数据的改变不会引起v-once所在结构的更新可以用于优化性能
v-prev指令
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titlev-pre指令/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idrooth2 v-preVue其实很简单/h2h2当前的n值是:{{n}}/h2button clickn点我n1/button/div/bodyscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{n:1}})/script
/html 总结
v-pre指令
跳过其所在节点的编译过程。可利用它跳过没有使用指令语法、没有使用插值语法的节点会加快编译
自定义指令
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title自定义指令/titlescript typetext/javascript src../js/vue.js/script/head!-- 需求1定义一个v-big指令和v-text功能类似但会把绑定的数值放大10倍。需求2定义一个v-fbind指令和v-bind功能类似但可以让其所绑定的input元素默认获取焦点。--bodydiv idrooth2当前的n值是span v-textn/span /h2h2放大10倍后的n值是span v-bign/span /h2button clickn点我n1/buttonhr/input typetext v-fbind:valuen/div/bodyscript typetext/javascriptVue.config.productionTip falsenew Vue({el:#root,data:{n:1},directives:{//big函数何时会被调用1.指令与元素成功绑定时一上来 2.指令所在的模板被重新解析时big(element,binding){console.log(big,this) //注意此处的this是windowelement.innerText binding.value * 10},fbind:{//指令与元素成功绑定时一上来bind(element,binding){element.value binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value binding.value}}}})/script
/html
总结
自定义指令定义语法
局部指令 new Vue({ directives:{指令名:配置对象} }) new Vue({ directives:{指令名:回调函数} }) 全局指令 Vue.directive(指令名,配置对象) Vue.directive(指令名,回调函数)
例如
Vue.directive(fbind,{//指令与元素成功绑定时一上来bind(element,binding){element.value binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value binding.value}
})js配置对象中常用的3个回调函数 bind(element,binding)指令与元素成功绑定时调用 inserted(element,binding)指令所在元素被插入页面时调用 update(element,binding)指令所在模板结构被重新解析时调用
备注 指令定义时不加“v-”但使用时要加“v-” 指令名如果是多个单词要使用kebab-case命名方式不要用camelCase命名
new Vue({el:#root,data:{n:1},directives:{big-number(element,binding){element.innerText binding.value * 10}}
})Vue对象生命周期
引出生命周期
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title引出生命周期/titlescript typetext/javascript src../js/vue.js/script/headbodydiv idrooth2 v-ifa你好啊/h2h2 :style{opacity}欢迎学习Vue/h2/div/bodyscript typetext/javascriptVue.config.productionTip false new Vue({el:#root,data:{a:false,opacity:1},mounted(){console.log(mounted,this)setInterval(() {this.opacity - 0.01if(this.opacity 0) this.opacity 1},16)},})/script
/html
对于定时器我们的调用我们需要找一个合适的地方进行调用我们不能在{{}}中调用因为会造成死循环调用因为开启了一个定时器会导致数据变化数据变化就会重新解析模板则又开启一个新的定时器
效果 总结
生命周期
又名生命周期回调函数、生命周期函数、生命周期钩子是什么Vue在关键时刻帮我们调用的一些特殊名称的函数生命周期函数的名字不可更改但函数的具体内容是程序员根据需求编写的生命周期函数中的this指向是vm 或 组件实例对象、
生命周期分析 总结
常用的生命周期钩子 mounted发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作 beforeDestroy清除定时器、解绑自定义事件、取消订阅消息等收尾工作
关于销毁Vue实例 销毁后借助Vue开发者工具看不到任何信息 销毁后自定义事件会失效但原生DOM事件依然有效 一般不会在beforeDestroy操作数据因为即便操作数据也不会再触发更新流程了
div iddiv0span idspan{{msg}}/spaninput typebutton value改变msg的值 clickchangeMsg
/divvar vue new Vue({el:#div0,data:{msg:1},methods:{changeMsg:function (){this.msgthis.msg1;}},// vue对象创建之前beforeCreate:function (){console.log(beforeCreate:vue对象创建之前---------------);console.log(msg:this.msg);},/*vue对象创建之后*/created:function(){console.log(created:vue对象创建之后---------------);console.log(msg:this.msg);},/*数据装载之前*/beforeMount:function(){console.log(beforeMount:数据装载之前---------------);console.log(span:document.getElementById(span).innerText);},/*数据装载之后*/mounted:function(){console.log(mounted:数据装载之后---------------);console.log(span:document.getElementById(span).innerText);},beforeUpdate:function(){console.log(beforeUpdate:数据更新之前---------------);console.log(msg:this.msg);console.log(span:document.getElementById(span).innerText);},updated:function(){console.log(Updated:数据更新之后---------------);console.log(msg:this.msg);console.log(span:document.getElementById(span).innerText);}
});Vue和Axios配合使用
对应的JSON数据
{name: 闲言博客,url: https:/www.baidu.com,page: 1,isNonProfit: true,address: {street: 含光门,city: 陕西西安,country: 中国},links: [{name: bilibili,url: https://space.bilibili.com/95256449},{name: 杂货簿,url: https://www.daibu.com}]
}
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript languageJavaScript srcstatic/script/vue.js/scriptscript languageJavaScript srcstatic/script/axios.min.js/script
/head
body
div idappdiv{{info.name}}/divdiv{{info.address.city}}/diva v-bind:hrefinfo.url点击/a
/divscript languageJavaScriptvar vmnew Vue({el: #app,data() {return{info: {nmae: null,url: null,address: {street: null,city: null,country: null}}}},mounted(){axios.get(./static/data.json).then(response(this.inforesponse.data));}});
/script
/body
/html注意我们的数据接收数据的是data(){ retrun { } },而不是data: { } 区别 在简单的vue实例应用中两种种写法几乎是没有什么区别的因为你定义的#app对象不会被复用。 但是如果是在Vue组件应用的环境中就可能会存在多个地方调用同一个组件的情况为了不让多个地方的组件共享同一个data对象只能返回函数。这个与JavaScript的作用域特性有关函数自己拥有私有的作用域函数之间的作用域相互独立也就不会出现组件对数据的绑定出现交错的情况。 表示函数简写 不要在选项 property 或回调上使用箭头函数比如 created: () console.log(this.a) 或 vm.$watch(a, newValue this.myMethod())。因为箭头函数并没有 thisthis 会作为变量一直向上级词法作用域查找直至找到为止经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。 一般对于ajax请求写在mounted钩子方法中
