# Vue2基础-ES6语法+Vue表达式+Vue指令 - 前端技术了解（了解） - ES6常见语法（掌握） - Vue入门（掌握） - Vue表达式（掌握） - Vue指令（掌握） - 计算属性与侦听器（了解） ## 一. 前端技术了解 \*\*1. NodeJs：js运行环境\*\* Node.js 的出现吸引了很多前端开发人员开始用 JavaScript 开发服务器代码。其异步编程风格也深受开发人员的喜爱。Node.js 的出现不仅在于 JavaScript 代码可以在服务器端运行，更重要的是它构建了一个庞大的生态系统。 \*\*2. npm：Node包管理器\*\* 2010年，npm（node package manager - node包管理器/工具）作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。 NPM相当于java 中的 maven。 \| JDK、JRE(java开发、运行平台) \| Nodejs(JS运行平台) \| \| ---------------------------- \| ---------------------- \| \| 后端服务器开发 \| 前端服务器开发 \| \| Maven：管理jar包 \| NPM：管理JS库 \| \| SSM架构开发项目 \| VUE+ElementUI 前段框架 \| ### 2. 主流前端框架 随后，在node的基础上，涌现出了一大批的前端框架： !\[img\](课件图片/wpsD2F5.tmp.jpg) 前端框架三巨头： - Vue.js：vue.js以轻量易用著称 - React.js：发展速度最快， 集web前端与app于一身技术 - AngularJS：AngularJS还是曾今老大 ## 二. ES6常见语法 VUE基于是ES6的，所以在使用Vue之前我们需要先学习一下ES6的常见语法。 ### 1. 什么是ES ES是ECMAScript的简写，是浏览器脚本语言的规范。JavaScript是ECMAScript的一种实现 \* JS发展史 \~\~\~ 1995年，网景工程师 BrendanEich 花了10天时间设计了 JavaScript 语言 1996年，微软发布了 JScript ，其实是JavaScript的逆向工程实现 1997年，为了统一各种不同script脚本语言， ECMA （European Computer Manufacturers Association - 欧洲计算机制造商协会）以JavaScript为基础，制定了ECMAscript标准规范。JavaScript和JScript都是ECMAScript的标准实现者，随后各大浏览器厂商纷纷实现了ECMAScript标准 \~\~\~ ### 2. ES6常见语法 #### 2.1. 申明变量和常量 - var：申明变量的方式：函数作用域 - let：申明变量：块级作用域有效，不能二次申明，和Java申明变量很相似 - const：定义常量的，无法二次赋值 !\[1651932606209\](课件图片/1651932606209.png) #### 2.2. 解构表达式 简单理解，解构表达式就是将数组或者对象向变量赋值的一种简易写法，这样做的目的是为了方便取值。 \> 数组解构用\[\] \`\`\`js let arr = \["好","大"\]; ------------------------------------ console.debug(arr\[0\],arr\[1\]); //以前的取值 ------------------------------------ let \[a,b\] = arr; //解构表达式数组赋值,定义了变量a,b并按照索引赋值。 console.debug(a,b); \`\`\` \> 对象解构用{} \`\`\`js var user = { id: 1, username:"zs", age: 11 } -------------------------------------- console.debug(user.id,user.username,user.age); //以前的取值 -------------------------------------- var {id,username,age} = user; //解构表达式，对象赋值，按照属性名赋值。 console.debug(id,username,age); \`\`\` #### 2.3. 箭头函数 箭头函数是函数的一种简写：一般用来做参数传递 格式： \~\~\~ var 函数名 = function(参数列表){ 函数体 } var 函数名 = (参数列表) =\> {函数体}等价于一下代码 如果参数只有一个可以省略()，但是如果没有参数不能省略 如果函数体只有一句代码可以省略{}，return;除外 \~\~\~ 例子： \`\`\`js var user = { username:"zs", age:22, show1:function(){ //以前定义方法的方式 console.debug(this.username+" "+this.age); }, show2(){ //老版本定义方法的简写 - 常用 console.debug(this.username+" "+this.age); } //-------------------------------------- show3:()=\>{ //es6定义方法的方式 //注意：这里的this指的是window对象了。不能用this.usename console.debug(user.username+" "+user.age); }, } user.show1(); user.show2(); user.show3(); \`\`\` 注意：在对象中才能定义箭头函数，在全局方法不可定义箭头函数 #### 2.4. Promise对象（了解） \* 什么是Promise Promise是ES6中异步编程的一种解决方案。从语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果。最重要也是最主要的一个场景就是通过axios发送ajax异步请求 \~\~\~ 以前发送异步请求： js：XMLHttpRequest对象（代码量多） jQuery：$.post()/$.ajax() -\> 封装了XMLHttpRequest对象 vue框架中推荐使用axios: axios -\> promise对象 -\> 封装了XMLHttpRequest对象 \~\~\~ \* Promise的三种状态 \~\~\~ pending：等待中，或者进行中，表示还没有得到结果 resolved：已经完成，表示得到了我们想要的结果，可以继续往下执行 rejected：也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行 这三种状态不受外界影响，而且状态只能从pending改变为resolved或者rejected，并且不可逆 \~\~\~ \* 用法 \`\`\`js //定义axios对象：模拟axios底层源码 let axios = { get(){ const p = new Promise((resolve,reject) =\> { //以后可以再这里使用ajax发送异步请求 const num = Math.random(); if(num\<0.5){ resolve("成功!num:"+num); }else{ reject("失败!num:" + num); } }); return p; } } //调用axios对象发送异步请求：Promise对象中有then和catch方法 axios.get(地址).then(function(msg){ console.log(msg); }).catch(function(msg){ console.log(msg); }); \`\`\` 运行结果：控制台3秒后就会打印结果了 ## 三. VUE入门 ### 1. VUE介绍 #### 1.1. Vue是什么 Vue (读音 /vjuː/，类似于 \*\*view\*\*) 是一前端渐进式JS框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 渐进式框架： 就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性 #### 1.2. Vue的特点 - 轻量：Vue.js库的体积非常小的，并且不依赖其他基础库 - 数据绑定：对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便 - 指令：内置指令统一为(v---\*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM - 插件化：Vue.js核心不包含Router、axios【Promise - ajax】、表单验证等功能，但是可以非常方便地根据需要加载对应插件 - 组件化，他支持自定义标签：组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用 #### 1.3. MVVM思想 Vue是一款开源的JavaScript MVVM框架。 Vue 引入了MVVM (Model-View-ViewModel)模式，他不同于MVC架构。 - M ：即Model，模型，包括数据和一些基本操作【js代码】 - V ：即View，视图，页面渲染结果【页面】 - VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉） 在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的： - 只要我们Model发生了改变，View上自然就会表现出来。 - 当用户修改了View，Model中的数据也会跟着改变。 把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上. !\[image-20200423134455899\](课件图片/image-20200423134455899.png) \*\*总结一下：MVVM的思想就是数据模型和视图的双向绑定，只要数据变化，视图会跟着变化，只要视图被修改，数据也会跟者变化。要依赖于v-model指令进行绑定\*\* ### 2. VUE入门 #### 2.1. Vue安装引入 \> cdn直接引入到页面中 cdn：https://v2.cn.vuejs.org/v2/guide/installation.html \> npm下载并引入 方式一：下载指定版本：npm install vue@2.7.14 方式二：下载最新稳定版：npm install vue@\^2 说明：目前官方默认的版本是vue3，有很多语法不相同。所以目前我们需要指定版本号 #### 2.2. Hello入门 !\[img\](课件图片/wpsD429.tmp.jpg) \`\`\`javascript 吊我 \`\`\` ### 3. Vue实例对象详情 #### 3.1. 挂载属性el 每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。 实例上的属性和方法只能够在当前实例挂载的标签中使用。 \`\`\`javascript {{message}} {#app} ================== {{message}} =========== /\* 使用构造函数创建一个vue对象： 这个对象作用与哪一个html标签，是通过el属性来挂载的，常用的有id和class挂载方式： id挂载:el:"#id" class挂载：el:".class" \*/ //id挂载方式： var app = new Vue({ el : "#app", data : { message : "我是id挂载方式" } }); //class挂载方式： var app2 = new Vue({ el : ".vueClz", data : { message : "我是class挂载方式" } }); \`\`\` #### 3.2. 模型数据data - Vue实例的数据保存在配置属性data中, data自身也是一个对象。 \`\`\`javascript {{message}} {#app} ================== {{user.name}},今年才:{{user.age}}岁.{{user.color}}是一个很美丽的颜色 ======================================================= s //vue的数据绑定在data属性上，data本身也是一个对象 var app = new Vue({ el : "#app", data : { message : "我是一个很单纯的p", user : { name : "隔壁老王", age : 17, color : "pink" } } }); \`\`\` #### 3.3. 方法定义methods Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体 方法都是被Vue对象调用,所以方法中的this代表Vue对象 \* 直接在html模板标签中调用 {{方法名字()}} \* 通过Vue对象实例调用方法 vue对象.方法名字(); //vue的数据绑定在data属性上，data本身也是一个对象 //方法的定义在：methods属性上，通过json格式来表示 \~\~\~js {{say()}} //vue的数据绑定在data属性上，data本身也是一个对象 //方法的定义在：methods属性上，通过json格式来表示 var app = new Vue({ el : "#app", data : { message : "我是一个很单纯的p", user : { name : "隔壁老文", age : 17, color : "pink" } }, methods:{ say:function(){ //this指向当前对象，当前app对象 return "hello:"+this.user.name+"!"; }, swim:function(){ console.debug("小狗的游泳姿势，还不错。。。"); } } }); //方法调用①：通过Vue对象实例调用方法 app.swim(); \~\~\~ ### 4. 生命周期钩子函数 #### 4.1. 生命周期 每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用 !\[vue生命周期\](课件图片/vue生命周期.png) #### 4.2. 钩子函数 钩子方法/函数：在整个vue实例的生命周期中提供了8个钩子方法，而且会在相应的阶段自动调用这些方法。其实我们只需要关注一个mounted方法，页面加载完成就会去主动调用整个方法 我们可以在Vue中定义一个mounted函数，页面加载完成之后会自动调用此方法 \*\*html：\*\* \`\`\`html {{hello}} \`\`\` \*\*js：\*\* \`\`\`javascript var vm = new Vue({ el:"#app", data:{ hello: '' // hello初始化为空 }, mounted(){ this.hello = "hello, world！ 我出生了！"; } }) \`\`\` 注意事项： \~\~\~js 用普通函数【常规写法或简写写法】，this指向vue实例 箭头函数，this指向window \~\~\~ \*\*结果：\*\* !\[img\](课件图片/wpsD44A.tmp.jpg) 、 ## 四. VUE表达式 ### 1. 表达式语法 - VueJS表达式写在双大括号内：{{ expression }} - VueJS表达式把数据绑定到 HTML - VueJS将在表达式书写的位置"输出"数据 - VueJS表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量 ### 2. 简单表达式 在{{ }}中可以进行简单的运算： \`\`\`html {{num1+num2}} {#app} ==================== {{5+"v5"}} ========== {{5+"5"}} ========= {{"5"-"5"}} =========== {{5\*5}} ======== {{"5"\*"5"}} ============ {{5/5}} ======= {{5/5}} ======= \`\`\` ### 3. 三目运算符 \`\`\`html {{ show1?"真":"假"}} var app = new Vue({ el : "#app", data : { show1 : true } }); \`\`\` ### 4. 字符串操作 \`\`\`js {{"这是字面值"}} {{"这是字面值".length}} {{message.length}} {{message.substring(1,5)}} {{message.substring(2,6).toUpperCase()}} var app = new Vue({ el: "#app", data: { message: "这是data中的数据" } }); \`\`\` 注：如果字符串操作时调用方法没有提示可以在IDEA中安装Vue插件，然后重启IDEA生效 ### 5. 对象操作 \`\`\`js {{user}} {{JSON.stringify(user)}} {{user.toUserString()}} {{user.name}} {{user.age}} {{user.getAge()}} var user = { name: "张三", age: 29, getAge: function () { return this.age }, toUserString:function(){ return "姓名:" + this.name + ",年龄:" + this.age; } }; var app = new Vue({ el: "#app", data: { user: user } }); \`\`\` ### 6. 数组操作 在表达式中可以使用JavaScript数组中的任何语法来操作数组： \`\`\`js {{hobbys}} {{hobbys\[0\]}} {{hobbys.length}} {{hobbys.toString()}} {{hobbys.join("------")}} var app = new Vue({ el: "#app", data: { hobbys:\["打游戏","踢足球",'泡MM',"泡GG"\] } }); \`\`\` ## 五. VUE指令 ### 1. 什么是指令 指令是一个带有v-前缀的特殊标签属性，指令属性的值预期是单个JavaScript表达式。 - 当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM - 一个标签元素上可以出现多个指令属性 - 指令只能够出现在Vue对象所挂载的标签范围内的标签中 ### 2. 常见的指令 - v-text="表达式"：设置标签中的纯文本，主要是指双标签。与vue表达式效果一样{{}} - v-html="表达式"：设置标签中的html文本，主要是指双标签 - v-bind="表达式：绑定属性值 - 简写:src="" - v-show=""：是否显示 - v-on="表达式"：注册事件 - 简写@click="" - v-if(else else if)="表达式"：条件判断 - v-for="表达式"：循环 - v-model="表达式"：数据双向绑定 ### 3. v-text指令 \*\*语法：\*\* \<标签名 v-text="表达式"\> \*\*作用：\*\* 通过data中的数据更新标签标签中的textContent属性的值（标签中的文本内容） \*\*注意事项：\*\* 如果值是html的值，会作为普通的文本使用。标签中的属性值必须是data中的一个属性 \`\`\`javascript
var app = new Vue({ el: "#app", data: { message: " 这是一个Span! ========= ", user: { username: "lw" }, } }); \`\`\` ### 5. v-html指令 \*\*语法:\*\* \*\* \<标签名 v-html="表达式"\> \*\*作用:\*\* 通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容) \*\*注意事项:\*\* 如果值是html的值,不会作为普通的文本使用,要识别html标签。 {{表达式}} 可以插入的标签的内容中 v-text和v-html更改标签中的所有内容 \`\`\`javascript var app = new Vue({ el: "#app", data: { message: " 这是HTMl代码 ======== " } }); \`\`\` ### 6. v-bind指令 将data中的数据绑定到标签上,作为标签的属性 \*\*语法:\*\* 为一个标签属性绑定一个值 \<标签 v-bind:标签属性名字="表达式"\> 简写形式: \<标签 :标签属性名字="表达式"\> 为一个标签绑定一个对象作为该标签的多个属性 \<标签 v-bind="对象"\> \*\*注意事项\*\* 将一个对象键和值作为标签的属性的名字和值时, 在v-bind后不需要指定属性的名字 \`\`\`javascript var app = new Vue({ el: "#app", data: { imgsrc: "./img/1.jpg", title: "二哈!", props :{ type: "text", name: "username", } } }); \`\`\` ### 7. v-show指令 \*\*语法:\*\* \<标签名 v-show="表达式"\> \*\*作用:\*\* 根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。 当v-show的值为假时, 会在标签的css中添加 display: none : \*\*注意事项:\*\* - 当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除 - 标签的值会自动转换为boolean类型的值 \`\`\`javas 你看到我了! 你看不到我了! 优秀 var app = new Vue({ el: "#app", data: { "show":true, "hidden":true, "score":90, } }); \`\`\` ### 8. v-on指令 使用v-on指令注册事件 \*\*语法\*\* \*\*:\*\* \<标签 v-on:事件句柄="表达式或者事件处理函数"\> 简写方式： \<标签 @事件句柄="表达式或者事件处理函数"\> \*\*注意事项：\*\* 事件处理函数作为事件句柄的值不需要调用 \`\`\`javascript 结果 {#app} ========= {{num}} 表达式的写法 ====== 按钮 按钮 事件处理函数 ====== 按钮 按钮 var app = new Vue({ el: "#app", data: { num:0 }, methods:{ myclick:function(){ app.num++; console.log(this); } } }); \`\`\` \`\`\`javascript hello hi var app = new Vue({ el: "#app", data: { }, methods:{ say:function(message){ //this指向当前vue对象：app console.log(message); //this当前vue对象 console.log(this); //获取事件源 // 获取触发事件 event // 通过事件获取事件源 console.log(event.target); } } }); \`\`\` ### 9. v-if指令 \*\*语法:\*\* \<标签名 v-if="表达式"\> \*\*作用:\*\* 根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 \*\*注意事项:\*\* 当表达式中的值是false时, 是从页面上删除. 标签的值会自动转换为boolean类型的值 \`\`\`javascript 你看到我了! 你看不到我了! 优秀 var app = new Vue({ el: "#app", data: { "show":true, "hidden":true, "score":90, } }); \`\`\` ### 10. v-for指令 \*\*语法:\*\* \<标签 v-for="元素 in 数据源"\> 数据源: 数组, 元素: 数组中的一个元素, 数据源: 对象 元素: 对象中的一个属性名 \<标签 v-for="(元素,索引\|键) in 数据源"\> 当数据源是数组时, ()的第二个参数值索引 当数据源是对象时, ()的第二个参数值键 \<标签 v-for="(元素,键,索引) in 对象"\> \*\*作用:\*\* 基于数据源多次循环达到多次渲染当前元素 \`\`\`javascript 循环数组 {#app} =========== * {{hobby}} 遍历对象 ==== * {{value}} 带索引循环数组 ======= * {{index}}--{{hobby}} 带键遍历对象 ====== * {{index+1}}---{{key}}--{{value}} var app = new Vue({ el: "#app", data: { hobbys : \["爬山","游泳","打豆豆","睡觉"\], student : { name: "小毛", age: 29, sex: "男", }, num : 10, str : "yuxiaoyuan", } }); \`\`\` ### 11. v-model 指令 \*\*语法:\*\* \<标签 v-model="表达式"\> 在表单控件上创建双向绑定 表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中, 当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定 注意事项： - 如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定. - 绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显 v-model只作用于以下表单: input，select，textarea \`\`\`html {{msg}} *** ** * ** *** 篮球 足球 羽毛球 保龄球 {{hobbys}} *** ** * ** *** 男 女 {{sex}} *** ** * ** *** 中国 美国 日本 {{country}} \`\`\` ## 六. 计算属性和侦听器 ### 1. 计算属性computed 在插值表达式中使用js表达式是非常方便的，而且也经常被用到。但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值： \`\`\`javascript data:{ birthday:1529032123201 // 毫秒值 } \`\`\` \*\*方案1：\*\*我们在页面渲染，希望得到yyyy-MM-dd的样式： \`\`\`javascript 您的生日是：{{ new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay() }} ==================================================================================================================== \`\`\` 虽然能得到结果，但是非常麻烦。 \*\*方案2：\*\* Vue中提供了计算属性，来替代复杂的表达式： \`\`\`javascript var vm = new Vue({ el:"#app", data:{ birthday:1429032123201 // 毫秒值 }, computed:{ birth(){// 计算属性本质是一个方法，但是必须返回结果 const d = new Date(this.birthday); return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay(); } } }) \`\`\` 计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用，页面使用： \`\`\`javascript 您的生日是：{{birth}} {#app} ====================== \`\`\` 效果： !\[img\](课件图片/wps5A82.tmp.jpg) ### 2. 侦听器watch watch可以让我们监控一个值的变化。从而做出相应的反应。示例： \`\`\`javascript \`\`\` 效果： !\[img\](课件图片/wps5A92.tmp.jpg) ## 壹. 课程总结 \~\~\~ 1. 前端发展历史：htmlcss - js - jsp/asp/php - ajax - jQuery - h5\[单页面\] - nodejs/npm 2. ES6新语法: 声明变量：let和var，const 解构表达式：对数组解构\[\]，对对象解构{} 箭头函数：在对象定义函数可以使用箭头函数：()=\>{} 发送异步请求：axios - Promise - ajax 3. Vue概述：前端js渐进式【js本身比较下，你需要什么插件直接安装】框架 vue特点：1.轻量，体积比较20kb 2.vue指令 3.提供了很多插件，安装即用 4.组件-自定义标签 4. Vue入门：1.安装 2.引入 3.div用于挂载 4.newVue实例 5.再使用 注意事项： Vue实例属性：el，data，methods，mounted，computed，watch 5. Vue表达式：{{}} ：计算，运算符，字符串操作，数组操作，对象操作 6. Vue指令 v-text: 操作存文本 - {{}} v-html: 操作html文本 v-bind: 绑定属性值，简写： v-show: 控制元素是否显示 v-on: 绑定事件，简写@ v-if: 判断 v-for: 遍历 v-model: 双向绑定 - 绑定value属性值 MVVM模式：Model-模型数据vue实例中的数据【data,methods】,view视图页面，View-Model做双向绑定的 \~\~\~ ## 贰. 面试问题 \~\~\~ 1.你用过得Vue指令 \~\~\~ ## 叁. 常见问题 \~\~\~ \~\~\~ ## 肆. 课后作业 \~\~\~ 1. 课程总结 2. 课堂代码再写一遍：homework-day1113-vue01 a. ES6新语法【变量和常量，解构表达式，箭头函数】 b. Vue指令 = 再敲1遍 c. 计算属性和侦听器 \~\~\~ ## 伍. 扩展知识 \~\~\~ 前端技术： 1. html - 5节课 超文本标记语言 - 用来编写网页内容的 2. css - 1节课 层叠样式表 - 渲染页面的 选择器：id，类，\*，元素 3. js - 2天 与用户和浏览器交互的脚本语言 js基础 + Bom Dom + Ajax 4. jQuery - 1天 前端的js框架 - 编写逻辑代码 5. Bootstrap - 1天 前端的UI框架 - 帮助开发者开发响应式页面 6. GridManager 表格插件 - 帮助前端开发人员渲染表格，分页和高级查询 \~\~\~ \~\~\~ 发送异步请求： 1. js中用原生的ajax发送异步请求 1.获取ajax对象 2.准备请求 3.设置回调函数 4.发送请求 2. jQuery发送异步请求 $.get() $.post() $.ajax() 3. gridManager发送异步请求 4. vue推荐使用axios发送有请求 \~\~\~ \~\~\~ nvm是一个node的版本管理工具,可以简单操作node版本的切换、安装、查看 \~\~\~ \~\~\~ HTML发展史： HTML（Hypertext Markup Language）是一种用于创建网页的标准标记语言。它的发展可以追溯到1990年代初，以下是HTML的发展史： 1. HTML 1.0（1991年）：HTML 1.0是最早的HTML版本，它只包含一些基本的标记，如标题、段落和链接。它用于创建简单的网页，没有任何样式或复杂的布局 2. HTML 2.0（1995年）：HTML 2.0引入了一些新的标记，如表格、图像和表单。这些新的标记使得网页的布局更加复杂和丰富 3. HTML 3.2（1997年）：HTML 3.2引入了样式表（CSS）的概念，使得开发者可以通过样式表来控制网页的外观和布局。此外，HTML 3.2还引入了一些新的标记，如框架和嵌入式对象 4. HTML 4.01（1999年）：HTML 4.01是一个更加完整和严格的HTML规范，它引入了一些新的标记和属性，如层（div）和层叠样式表（CSS） 5. XHTML（2000年）：XHTML（可扩展超文本标记语言）是HTML的一种变体，它更加严格和符合XML的语法规则。XHTML的目标是使HTML更加规范和可扩展 6. HTML5（2014年）：HTML5是HTML的最新版本，它引入了许多新的功能和标记，如视频、音频、画布和地理定位。HTML5还支持响应式设计，使得网页可以适应不同的设备和屏幕尺寸 \~\~\~ \~\~\~ ECMAScript发展历史： ECMA欧洲计算机制造商协会。是1961年成立的旨在建立统一的电脑操作格式标准（包括程序语言和输入输出）的组织 1997.6 ECMA 发布了ECMA-262 -\> ECMAScript（规范化 脚本script语言） 1.0 1998.6 ECMAScript 2.0 1999.12 ECMAScript 3.0 2000 ECMAScript 4.0 草案没被TC39(Technical Committee 39)通过 TC39: ECMA的第39号技术专家委员会，成员包括以Yahoo、Microsoft、Google为首的浏览器大公司 2007.10 ECMAScript 4.0版草案发布，对3.0版做了大幅升级，预计次年8月发布正式版本 草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。 以Yahoo、Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动； 以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案 2008.7 中止ECMAScript 4.0的开发 由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进， ECMA开会决定，中止ECMAScript 4.0的开发，将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1， 而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。 会后不久，ECMAScript 3.1就改名为ECMAScript 5。 2009.12 ECMAScript 5.0版正式发布 2011.6 ECMAscript 5.1版发布，并且成为ISO国际标准（ISO/IEC 16262:2011） 2013.12 ECMAScript 6草案发布。然后是12个月的讨论期，听取各方反馈。 2015.6.17日 ECMAScript 6发布正式版本，即ECMAScript 2015 注意：ES5的语法浏览器完全支持，ES6的语法浏览器部分不支持（import，export）。Vue和elementUI大量使用了ES6的语法 \~\~\~ \~\~\~ Debug作用：看运行时代码的逻辑与我们编写/你心目中的逻辑是否一致，如果不一致那就说明这行代码有问题，是程序员专门用来调试代码找BUG的神器 - Debug分类 1.前端Debug：只能作用在JS代码 2.后端Debug：只能在方法中使用，必须要使用Debug启动 - 使用 1.前端：使用debugger关键字，打在JS代码内部 2.后端：使用debug启动，在代码的左侧鼠标左键点击一下 \~\~\~