超详细!Vue-coderwhy个人学习笔记(一)（Day1-Day2）_coderYYY_coderwhy vue

网络 02-07 2178

必看

笔记目录汇总以及资料源码的获取学Vue，看这篇就够了-Vue个人学习笔记汇总(含资料代码项目地址) 本篇是Day1到Day2的笔记（如果觉得不错大家可以给我三连哦~欢迎一起学习交流，我的公众号：richGirlyyy）

一、(了解)课程介绍

课程介绍

?项目介绍

二、邂逅Vuejs

(一) 、内容概述

(二)、(理解)认识Vue.js

?1.为什么要学习Vue.js

2.简单认识一下Vuejs

(三)、(掌握)Vue.js安装

(四)、(掌握)Vue初体验

1.Hello Vuejs

2.Vue列表显示

3.案例：计数器

(五)、(理解)Vue中的MVVM

1.Vue中的MVVM

MVVM的实现原理：MVVM的实现主要是三个核心点：

2.计数器中的MVVM

(六)、(理解)Vue中的options

1.创建Vue实例传入的options

2.Vue的生命周期

三、基础语法

(一)、内容概述

(二)、(了解)定义Vue中的template

VScode中的template

(三)、(掌握)插值操作

1. Mustache

?2.v-once

?3.v-html

4.v-text

5.v-pre

6.v-cloak

(四)、绑定属性(v-bind)

1.v-bind介绍

2.(掌握)v-bind基础

?3.v-bind动态绑定class

4.(掌握)v-bind绑定class--(对象语法)

5.(了解)v-bind绑定class--(数组语法)

6.(完成) 作业：v-bind和v-for的结合--点击哪项，该项变红色

7.v-bind绑定style

8.(掌握)v-bind绑定style--对象语法

9.(了解)v-bind绑定style--数组语法

(五)、计算属性

1.(掌握)什么是计算属性？计算属性的基本使用

?2.(掌握)计算属性的复杂操作

3.(理解)计算属性的setter和getter

?4.(掌握)计算属性的缓存(计算属性和methods的对比)

(六)、(掌握)ES6补充

1.(掌握）块级作用域--let/var

2.(理解)三种方案对比(ES5没有闭包-有闭包-ES6的let)

3.(掌握)const的使用和注意点

4.(掌握)ES6对象字面量的增强写法

(七)、(掌握)事件监听v-on

1.事件监听

2.v-on基础

3.v-on参数

?4.v-on修饰符

?(八)、条件判断v-if、v-else-if、v-else

1.v-if、v-else-if、v-else

3.条件渲染案例--登录切换

4.(理解)案例小问题--登录切换input的复用

5.(掌握)v-show的使用以及和v-if的区别

(九)、遍历循环v-for

1.(掌握)v-for遍历数组

2.(掌握)v-for遍历对象

3.(理解)组件的key属性--v-for绑定key和没有绑定key的区别

?4.(掌握)数组中哪些方法是响应式的？

5.(掌握)阶段案例--图书购物车

6.(掌握) JavaScript高阶函数的使用

(十)、(掌握)表单绑定v-model

1.表单绑定v-model

?2.v-model原理

?3.v-model结合radio类型使用

4.v-model结合checkbox类型使用

?5.v-model结合select类型使用

6.input中的值绑定

7.v-model 修饰符的使用

视频对应目录

一、(了解)课程介绍课程介绍

（具体请查看资料里的xmind文件)

?项目介绍

?（这个项目的接口需找老师获取）

二、邂逅Vuejs (一) 、内容概述认识Vuejs 为什么学习Vuejs简单认识一下VuejsVuejs安装方式 CDN引入NPM安装管理下载和引入Vuejs初体验 Hello VuejsVue列表展示案例：计数器Vuejs的MVVM Vue中的MVVM

(二)、(理解)认识Vue.js ?1.为什么要学习Vue.js 我相信每个人学习Vue的目的是各部相同的。可能你的公司正要将原有的项目使用Vue进行重构。也可能是你的公司新项目决定使用Vue的技术栈。当然，如果你现在正在换工作，你会发现招聘前端的需求中，10个有8个都对Vue有或多或少的要求。当然，作为学习者我们知道Vuejs目前非常火，可以说是前端必备的一个技能。

2.简单认识一下Vuejs

(附：Vue官网）

Vue (读音 /vju?/，类似于 view)，不要读错。Vue是一个渐进式的框架，什么是渐进式的呢？渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。Vue有很多特点和Web开发中常见的高级功能解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOM这些特点，你不需要一个个去记住，我们在后面的学习和开发中都会慢慢体会到的，一些技术点我也会在后面进行讲解。学习Vuejs的前提？从零学习Vue开发，并不需要你具备其他类似于Angular、React，甚至是jQuery的经验。但是你需要具备一定的HTML、CSS、JavaScript基础。

(三)、(掌握)Vue.js安装使用一个框架，我们第一步要做什么呢？安装下载它安装Vue的方式有很多：方式一：直接CDN引入你可以选择引入开发环境版本还是生产环境版本  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

（开发环境：源码没有经过压缩，可以直接查看源码，学习阶段使用CDN更慢）

方式二：下载和引入（前期学习使用这个，后续学习CLI使用NPM）开发环境生产环境方式三：NPM安装后续通过webpack和CLI的使用，我们使用该方式。

(四)、(掌握)Vue初体验 1.Hello Vuejs 我们来做我们的第一个Vue程序，体验一下Vue的响应式代码做了什么事情？我们来阅读JavaScript代码，会发现创建了一个Vue对象。创建Vue对象的时候，传入了一些options：{} {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上{}中包含了data属性：该属性中通常会存储一些数据这些数据可以是我们直接定义出来的，比如像上面这样。也可能是来自网络，从服务器加载的。浏览器执行代码的流程：执行到10~13行代码显然出对应的HTML执行第16行代码创建Vue实例，并且对原HTML进行解析和修改。并且，目前我们的代码是可以做到响应式的。

代码：

<body> <div id="app"> <h2>{{message}}</h2> <h1>{{name}}</h1> </div> <div>{{message}}</div> <script src="../js/vue.js"></script> <script> // 源码里面有类似于这样的东西有一个Vue的类可以往里面传一些参数 Vue的参数是对象类型 function Vue(){ } </script> <script> // let(变量)/const(常量) // 编程范式: 声明式编程实例管理div时，只需声明显示什么东西 const app = new Vue({ el: '#app', // 用于挂载要管理的元素 data: { // 定义数据 message: '你好啊,李银河!', name: 'coderwhy' } }) // 原始js的做法(编程范式: 命令式编程) 明确告诉一步步该如何做 // 1.创建div元素,设置id属性 // 2.定义一个变量叫message // 3.将message变量放在前面的div元素中显示 // 4.修改message的数据: 今天天气不错! // 5.将修改后的数据再次替换到div元素 // Vue的响应式 --> 可以在打印台修改 app.name='yyy' </script> </body> 2.Vue列表显示现在，我们来展示一个更加复杂的数据：数据列表。比如我们现在从服务器请求过来一个列表希望展示到HTML中。HTML代码中，使用v-for指令该指令我们后面会详细讲解，这里先学会使用。是不是变得So Easy，我们再也不需要在JavaScript代码中完成DOM的拼接相关操作了而且，更重要的是，它还是响应式的。也就是说，当我们数组中的数据发生改变时，界面会自动改变。依然让我们打开开发者模式的console，来试一下

代码：

<div id="app"> <ul> <li v-for="item in movies">{{item}}</li> </ul> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', movies: ['星际穿越', '大话西游', '少年派', '盗梦空间'] } }) </script> 3.案例：计数器现在，我们来实现一个小的计数器点击 + 计数器+1点击 - ?计数器 -1这里，我们又要使用新的指令和属性了新的属性：methods，该属性用于在Vue对象中定义方法。新的指令：@click, 该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是methods中定义的方法)你可能会疑惑？这些@click是什么东西？Vue对象中又是定义el/data/methods，到底都有哪些东西可以定义，以及它们的作用是什么？这些疑惑在后续学习中都会一一解开。

(五)、(理解)Vue中的MVVM 1.Vue中的MVVM 什么是MVVM呢？通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科)https://zh.wikipedia.org/wiki/MVVM维基百科的官方解释，我们这里不再赘述。我们直接来看Vue的MVVM（Model-View-ViewModel）

View层：视图层在我们前端开发中，通常就是DOM层。主要的作用是给用户展示各种信息。Model层：数据层数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。VueModel层: 视图模型层视图模型层是View和Model沟通的桥梁。一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。 MVVM的实现原理：MVVM的实现主要是三个核心点：

响应式：vue如何监听data的属性变化模板解析：vue的模板是如何被解析的渲染：vue模板是如何被渲染成HTML的

?推荐文章：

????????Vue中的MVVM

2.计数器中的MVVM 计数器的MVVM 我们的计数器中就有严格的MVVM思想 View依然是我们的DOMModel就是我们我们抽离出来的objViewModel就是我们创建的Vue对象实例它们之间如何工作呢？首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。有了Vue帮助我们完成VueModel层的任务，在后续的开发，我们就可以专注于数据的处理，以及DOM的编写工作了。

代码：

<div id="app"> <h2>当前计数: {{counter}}</h2>   <button v-on:click="add">+</button> <button v-on:click="sub">-</button>   </div> <script src="../js/vue.js"></script> <script> // 语法糖: 简写 // proxy /* ---2.这是我们的Model--- */ const obj = { counter: 0, message: 'abc' } new Vue() /* 3.创建一个 Vue 实例或 "ViewModel" 它连接 View 与 Model ViewModel层的核心是Vue中的双向数据绑定 */ const app = new Vue({ el: '#app', data: obj, methods: { add: function () { console.log('add被执行'); this.counter++ }, sub: function () { console.log('sub被执行'); this.counter-- } }, beforeCreate: function () { }, created: function () { console.log('created'); }, mounted: function () { console.log('mounted'); } }) // 1.拿button元素 // 2.添加监听事件 </script>

(六)、(理解)Vue中的options 1.创建Vue实例传入的options 你会发现，我们在创建Vue实例的时候，传入了一个对象options。这个options中可以包含哪些选项呢？详细解析：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE目前掌握这些选项： el: 类型：string | HTMLElement作用：决定之后Vue实例会管理哪一个DOM。data: 类型：Object | Function （组件当中data必须是一个函数）作用：Vue实例对应的数据对象。methods: 类型：{ [key: string]: Function }作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。 2.Vue的生命周期

生命周期:?事物从诞生到消亡的整个过程

官网详细描述

Vue的生命周期图示

英文版

中文版

?在Vue源码里查看生命周期 vue-2.5.21\src\core\index.js 入口函数? ??找到instance/index

Vue源码\vue-2.5.21\src\core\instance\index.js

?Vue生命周期的意义:执行到哪个步骤之后的回调，我可以做对应的事情

生命周期函数也叫hook(钩子)函数只看视频可能不太理解，用代码体会下就能理解了，推荐一些文章:

????????超详细vue生命周期解析(详解)

????????vue生命周期

????????vue之生命周期（详细）

????????vue生命周期钩子函数详解

????????Vue生命周期(11个钩子函数)

三、基础语法 (一)、内容概述插值操作绑定属性计算属性事件监听条件判断循环遍历阶段案例v-model

(二)、(了解)定义Vue中的template VScode中的template

?创建

?使用（回车即可出现定义的template）

(三)、(掌握)插值操作 1. Mustache 如何将data中的文本数据，插入到HTML中呢？我们已经学习过了，可以通过Mustache语法(也就是双大括号)。Mustache: 胡子/胡须.我们可以像下面这样来使用，并且数据是响应式的

代码：

<div id="app"> <h2>{{message}}</h2> <h2>{{message}}, 李银河!</h2>   <h2>{{firstName + lastName}}</h2> <h2>{{firstName + ' ' + lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2> <h2>{{counter * 2}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', firstName: 'kobe', lastName: 'bryant', counter: 100 }, }) // 模板语法指的就是：写代码时，按照规定好的方式来 ?2.v-once 但是，在某些情况下，我们可能不希望界面随意的跟随改变这个时候，我们就可以使用一个Vue的指令v-once: 该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。代码如下：

<div id="app"> <h2>{{message}}</h2> <h2 v-once>{{message}}</h2> </div>  <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) // 指令的本质就是自定义属性 </script> ?3.v-html 某些情况下，我们从服务器请求到的数据本身就是一个HTML代码如果我们直接通过{{}}来输出，会将HTML代码也一起输出。但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。如果我们希望解析出HTML展示可以使用v-html指令该指令后面往往会跟上一个string类型会将string的html解析出来并且进行渲染 <div id="app"> <h2>{{url}}</h2> <h2 v-html="url"></h2> </div>  <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', url: '<a href="http://·blogs.com/amujoe/p/11376940.html } } }) </script> 3.(理解)计算属性的setter和getter 每个计算属性都包含一个getter和一个setter 在上面的例子中，我们只是使用getter来读取。在某些情况下，你也可以提供一个setter方法（不常用）。在需要写setter的时候，代码如下：

用到了set

?代码：

<div id="app"> <h2>{{fullName}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { firstName: 'Kobe', lastName: 'Bryant' }, computed: { // computed本质是一个对象里面可以有属性，里面的属性又是一个对象，里面又可以写方法 // 简写 // fullName: function () { // return this.firstName + ' ' + this.lastName // } // name: 'coderwhy' // 完整写法 // 计算属性一般是没有set方法, 只读属性. // 计算属性一般实现get方法，没有实现set方法,一般不希望别人给计算属性设置值，一般直接删除set // 所以调用计算属性不需要加() 本质是调用属性fullname 里面的get fullName: { // 对象 set: function(newValue) { // 如果想实现set方法，这里是有一个参数的 // 可以在控制台试试 app.fullName="yang yanyan" 就会调用set console.log('-----', newValue); const names = newValue.split(' '); this.firstName = names[0];// 赋值 this.lastName = names[1]; }, get: function () { return this.firstName + ' ' + this.lastName } }, // fullName: function () { // 这个函数就是get方法 // return this.firstName + ' ' + this.lastName // } } }) </script> ?4.(掌握)计算属性的缓存(计算属性和methods的对比) 我们可能会考虑这样的一个问题： methods和computed看起来都可以实现我们的功能，那么为什么还要多一个计算属性这个东西呢？原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。我们来看下面的代码：

?在浏览器控制台查看缓存：

（fullName没有变化,就调用了一次)

(fullName有变化，重新调用)

?代码：

<div id="app">  <h2>{{firstName}} {{lastName}}</h2>  <h2>{{getFullName()}}</h2> <h2>{{getFullName()}}</h2> <h2>{{getFullName()}}</h2> <h2>{{getFullName()}}</h2>  <h2>{{fullName}}</h2> <h2>{{fullName}}</h2> <h2>{{fullName}}</h2> <h2>{{fullName}}</h2> </div> <script src="../js/vue.js"></script> <script> // angular -> google // TypeScript(microsoft) -> ts(类型检测) // flow(facebook) -> const app = new Vue({ el: '#app', data: { firstName: 'Kobe', lastName: 'Bryant' }, methods: { getFullName: function () { console.log('getFullName'); return this.firstName + ' ' + this.lastName } }, computed: { fullName: function () { console.log('fullName'); // 会观察有没有变化没有变化就直接返回原来结果而不是重新计算有变化就重新调用一次 // 浏览器控制台 app.fullName='why' 会再调用一次 return this.firstName + ' ' + this.lastName } } }) </script>

(六)、(掌握)ES6补充 1.(掌握）块级作用域--let/var 事实上var的设计可以看成JavaScript语言设计上的错误，但是这种错误多半不能修复和移除,以为需要向后兼容大概十年前BrendanEich(js的作者)就决定修复这个问题，于是他添加了一个新的关键字：let我们可以将let看成更完美的var块级作用域 JS中使用var来声明一个变量时，变量的作用域主要是和函数的定义有关针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题

1.变量作用域:?变量在什么范围内是可用

// 下面是一个代码块。{} 就是一个代码块，有没有{}对于定义变量来说没任何意义内外都可以使用name { var name = 'why'; console.log(name); } console.log(name); // 可以使用name

????????补充：JS：代码块{}，及代码块的作用是什么？

2.没有块级作用域引起的问题:?if的块级

if (true) { var name = 'why'; } console.log(name);// 可以打印 if (true) { var name = 'why'; } console.log(name);// 可以打印 var func; if (true) { var name = 'why'; func = function () { // 这个变量是为了打印这里的name console.log(name); } // func();// 可以打印 } name = 'kobe'; // 这里把变量改掉了，不应该能改 func(); // 依然可以打印 // console.log(name);

3.没有块级作用域引起的问题:?for的块级

监听按钮的点击

<button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> var btns = document.getElementsByTagName('button'); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); // 点击了第1个，打印却是第5个，点击其他按钮也是打印第5个 // 与上面的那个有点像，打印的i是在一个函数里面，在点击之前，这个i已经被改掉了，进行了5次循环 }) } </script>

综上，if和for里面没有块级

为了解决这个问题，我们一般用一个闭包

闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。????????????????

????????补充：立即执行函数

// 立即执行函数 (function () { }()) (function () { })() 为什么闭包可以解决问题:?函数是一个作用域. var name = "yyyy"; function abc(name) { console.log(name); } name="why"; abc('aaaaaa');// 无论外部怎么改变name，打印的还是aaaa var name = 'why' function abc(bbb) { // bbb = 'why' console.log(bbb); } abc(name);// 也不会有任何冲突 name还是why name = 'kobe'

补充：关于一些闭包的文章

????????闭包，看这一篇就够了——带你看透闭包的本质，百发百中

????????【JS】函数闭包（重点）

????????前端面试题：闭包

总结 ES5之前因为if和for都没有块级作用域的概念,?所以在很多时候,?我们都必须借助于function的作用域来解决应用外面变量的问题.ES6中,加入了let,?let它是有if和for的块级作用

?总之，记住

ES5中的var是没有块级作用域的(if/for)?

ES6中的let是由块级作用的(if/for)

// es6写法 const btns = document.getElementsByTagName('button') for (let i = 0; i < btns.length; i++) { btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) }

?ES6?为什么let可以呢，有它自己的作用域了?i只属于?for?(let?i?=?0;?i?<?btns.length;?i++)?{}?里面的作用域

{ i = 0 btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } { i = 1 btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } { i = 2 btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } { i = 3 btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } { i = 4 btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } 而ES5 // ES5 var i = 5 { btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } { btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } { btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } { btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } { btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } 2.(理解)三种方案对比(ES5没有闭包-有闭包-ES6的let) <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <script> // 1.没有块级作用域引起的问题: for的块级 // 为什么闭包可以解决问题: 函数是一个作用域. var btns = document.getElementsByTagName('button'); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } // 伪代码： // 1.情况一: ES5中没有使用闭包(错误的方式) i = 2 { // 在里面定义在外面定义都是一样的 // i = 0 btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } { i = 1 btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } { // i = 2 btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } // 2.情况二: ES5中使用闭包 var btns = document.getElementsByTagName('button'); for (var i = 0; i < btns.length; i++) { (function (i) { // 0 btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) })(i) } i = 100000000 function (i) { // i = 0 btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) }(0) function (i) { // i = 1 btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) }(1) function (i) { // i = 2 btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) }(2) // ES6中的let const btns = document.getElementsByTagName('button') for (let i = 0; i < btns.length; i++) { btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } i = 10000000 { i = 0 btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } { i = 1 btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } { i = 2 btns[i].addEventListener('click', function () { console.log('第' + i + '个按钮被点击'); }) } </script> 3.(掌握)const的使用和注意点 const关键字在很多语言中已经存在比如C/C++中主要的作用是将某个变量修饰为常量在JavaScript中也是如此使用const修饰的标识符为常量,不可以再次赋值什么时候使用const呢? 当我们修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性建议:在ES6开发中优先使用const只有需要改变某一个标识符的时候才使用letconst的注意 const注意一???????? ?const a=20; a=30;// 错误:不可以修改 const注意二 const name; // 错误:const修饰的标识符必须赋值

// 1.注意一: 一旦给const修饰的标识符被赋值之后, 不能修改 // const name = 'why'; // name = 'abc'; // 2.注意二: 在使用const定义标识符,必须进行赋值 // const name; // 3.注意三: 常量的含义是指向的对象不能修改, 但是可以改变对象内部的属性. const obj = { name: 'why', age: 18, height: 1.88 } // obj = {} console.log(obj); obj.name = 'kobe'; obj.age = 40; obj.height = 1.87; console.log(obj); 4.(掌握)ES6对象字面量的增强写法 const obj = new Object() const obj = { // 这个{} 就是对象的字面量 name: 'why', age: 18, run: function () { console.log('在奔跑'); }, eat: function () { console.log('在次东西'); } }

1.属性的增强写法

const name = 'why'; const age = 18; const height = 1.88

????????ES5的写法：

// ES5的写法 const obj = { name: name, age: age, height: height } console.log(obj);

? ? ? ? ES6的写法：

// ES6的写法 const obj = { name, age, height, } console.log(obj); 2.函数的增强写法

? ? ? ? ES5的写法

// ES5的写法 const obj = { run: function () { }, eat: function () { } }

? ? ? ? ES6的写法

// ES6 const obj = { run() { }, eat() { } }

(七)、(掌握)事件监听v-on 1.事件监听在前端开发中，我们需要经常和用于交互。这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等在Vue中如何监听事件呢？使用v-on指令v-on介绍作用：绑定事件监听器缩写：@预期：Function | Inline Statement | Object参数：event下面，我们就具体来学习v-on的使用。 2.v-on基础这里，我们用一个监听按钮的点击事件，来简单看看v-on的使用下面的代码中，我们使用了v-on:click="counter++”另外，我们可以将事件指向一个在methods中定义的函数

注：v-on也有对应的语法糖： v-on:click可以写成@click?

代码：

<div id="app"> <h2>{{counter}}</h2>       <button @click="increment">+</button> <button @click="decrement">-</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { counter: 0 }, methods: { increment() { this.counter++ }, decrement() { this.counter-- } } }) </script> 3.v-on参数当通过methods中定义方法，以供@click调用时，需要注意参数问题：情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

代码：

<div id="app">  <button @click="btn1Click()">按钮1</button> <button @click="btn1Click">按钮1</button>     <button @click="btn2Click">按钮2</button>   <button @click="btn3Click(abc, $event)">按钮3</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', abc: 123 }, methods: { btn1Click() { console.log("btn1Click"); }, btn2Click(event) { console.log('--------', event); }, btn3Click(abc, event) { console.log('++++++++', abc, event); } } }) // 如果函数需要参数,但是没有传入, 那么函数的形参为undefined // function abc(name) { // console.log(name); // } // // abc() ?4.v-on修饰符在某些情况下，我们拿到event的目的可能是进行一些事件处理。Vue提供了修饰符来帮助我们方便的处理一些事件： .stop - 调用 event.stopPropagation()。.prevent - 调用 event.preventDefault()。.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。.native - 监听组件根元素的原生事件。.once - 只触发一次回调。?

<div id="app">  <div @click="divClick"> aaaaaaa <button @click.stop="btnClick">按钮</button> </div>  <br> <form action="baidu"> <input type="submit" value="提交" @click.prevent="submitClick"> </form>  <input type="text" @keyup.enter="keyUp">  <button @click.once="btn2Click">按钮2</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' }, methods: { btnClick() { console.log("btnClick"); }, divClick() { console.log("divClick"); }, submitClick() { console.log('submitClick'); }, keyUp() { console.log('keyUp'); }, btn2Click() { console.log('btn2Click'); } } }) </script>

?(八)、条件判断v-if、v-else-if、v-else 1.v-if、v-else-if、v-else v-if、v-else-if、v-else 这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件简单的案例演示：

v-if的原理： v-if后面的条件为false时，对应的元素以及其子元素不会渲染。也就是根本没有不会有对应的标签出现在DOM中。?

代码：

? ? ? ? ○ v-if的使用

<div id="app"> <h2 v-if="isShow"> <div>abc</div> <div>abc</div> <div>abc</div> <div>abc</div> <div>abc</div> {{message}} </h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', isShow: true } }) </script>

????????? ○ v-if 和v-else 的使用

<div id="app"> <h2 v-if="isShow"> <div>abc</div> <div>abc</div> <div>abc</div> <div>abc</div> <div>abc</div> {{message}} </h2> <h1 v-else>isShow为false时, 显示我</h1> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', isShow: true } }) </script>

????????? ○ v-if 、v-else-if和v-else 的使用

<div id="app"> <h2 v-if="score>=90">优秀</h2> <h2 v-else-if="score>=80">良好</h2> <h2 v-else-if="score>=60">及格</h2> <h2 v-else>不及格</h2> <h1>{{result}}</h1> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { score: 99 }, computed: { result() { let showMessage = ''; if (this.score >= 90) { showMessage = '优秀' } else if (this.score >= 80) { showMessage = '良好' } // ... return showMessage } } }) </script> 3.条件渲染案例--登录切换我们来做一个简单的小案例：用户再登录时，可以切换使用用户账号登录还是邮箱地址登录。类似如下情景：

?代码：

<div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户账号"> </span> <span v-else> <label for="email">用户邮箱</label> <input type="text" id="email" placeholder="用户邮箱"> </span> <button @click="isUser = !isUser">切换类型</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { isUser: true } }) </script> 4.(理解)案例小问题--登录切换input的复用小问题：如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。但是按道理讲，我们应该切换到另外一个input元素中了。在另一个input元素中，我们并没有输入内容。为什么会出现这个问题呢？?问题解答

这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。

在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了

解决方案

如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key

并且我们需要保证key的不同

代码：

<div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户账号" key="username"> </span> <span v-else> <label for="email">用户邮箱</label> <input type="text" id="email" placeholder="用户邮箱" key="email"> </span> <button @click="isUser = !isUser">切换类型</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { isUser: true } }) </script> 5.(掌握)v-show的使用以及和v-if的区别 v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：v-if和v-show对比v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？ v-if当条件为false时，压根不会有对应的元素在DOM中。v-show当条件为false时，仅仅是将元素的display属性设置为none而已。开发中如何选择呢？当需要在显示与隐藏之间切换很频繁时，使用v-show当只有一次切换时，通过使用v-if

代码：

<div id="app">  <h2 v-if="isShow" id="aaa">{{message}}</h2>  <h2 v-show="isShow" id="bbb">{{message}}</h2> </div>  <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', isShow: true } }) </script>

(九)、遍历循环v-for 1.(掌握)v-for遍历数组当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。 v-for的语法类似于JavaScript中的for循环。格式如下：item in items的形式。我们来看一个简单的案例：如果在遍历的过程中不需要使用索引值 v-for="movie in movies"依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？语法格式：v-for=(item, index) in items其中的index就代表了取出的item在原数组的索引值。

代码：?

<div id="app">  <ul> <li v-for="item in names">{{item}}</li> </ul>  <ul> <li v-for="(item, index) in names"> {{index+1}}.{{item}} </li> </ul> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { names: ['why', 'kobe', 'james', 'curry'] } }) </script> 2.(掌握)v-for遍历对象 v-for可以用户遍历对象：比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。

?代码：

<div id="app">  <ul> <li v-for="item in info">{{item}}</li> </ul>  <ul> <li v-for="(value, key) in info">{{value}}-{{key}}</li> </ul>  <ul> <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li> </ul> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { info: { name: 'why', age: 18, height: 1.88 } } }) </script> 3.(理解)组件的key属性--v-for绑定key和没有绑定key的区别官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。为什么需要这个key属性呢（了解）？这个其实和Vue的虚拟DOM的Diff算法有关系。这里我们借用React’s diff algorithm中的一张图来简单说明一下：

?当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？所以我们需要使用key来给每个节点做一个唯一标识 Diff算法就可以正确的识别此节点找到正确的位置区插入新的节点。所以一句话，key的作用主要是为了高效的更新虚拟DOM。 ?4.(掌握)数组中哪些方法是响应式的？因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。 push()pop()shift()unshift()splice()sort()reverse()

?代码：

<div id="app"> <ul> <li v-for="item in letters">{{item}}</li> </ul> <button @click="btnClick">按钮</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { letters: ['a', 'b', 'c', 'd'] }, methods: { btnClick() { // 1.push方法 // this.letters.push('aaa') // this.letters.push('aaaa', 'bbbb', 'cccc') // 2.pop(): 删除数组中的最后一个元素 // this.letters.pop(); // 3.shift(): 删除数组中的第一个元素 // this.letters.shift(); // 4.unshift(): 在数组最前面添加元素 // this.letters.unshift() // this.letters.unshift('aaa', 'bbb', 'ccc') // 5.splice作用: 删除元素/插入元素/替换元素 // 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素) // 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素 // 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素 // splice(start) // splice(start): this.letters.splice(1, 3, 'm', 'n', 'l', 'x') // this.letters.splice(1, 0, 'x', 'y', 'z') // 5.sort() 排序 // this.letters.sort() // 6.reverse() 反转 // this.letters.reverse() // **注意: 通过索引值修改数组中的元素 // Vue内部没有监听这种方式不是响应式数组有变化，界面无更新 // this.letters[0] = 'bbbbbb'; // 用其他方法 // 法1 // this.letters.splice(0, 1, 'bbbbbb') // 法2 // set(要修改的对象, 索引值, 修改后的值) // Vue.set(this.letters, 0, 'bbbbbb') } } }) // function sum(num1, num2) { // return num1 + num2 // } // // function sum(num1, num2, num3) { // return num1 + num2 + num3 // } // function sum(...num) { // 可变参数 // console.log(num); // } // // sum(20, 30, 40, 50, 601, 111, 122, 33) </script> 5.(掌握)阶段案例--图书购物车

代码实现：HTML、CSS

代码实现：JS代码?

?重点：价格保留两位小数 ----Vue过滤器点击数量按钮，改变对应的数量---用index区分数量最小只能减到1---动态绑定disabled属性

补充：

vue 过滤器filter（全面）

HTML代码：

<div id="app"> <div v-if="books.length"> <table> <thead> <tr> <th></th> <th>书籍名称</th> <th>出版日期</th> <th>价格</th> <th>购买数量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item, index) in books"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td>       {{item.price | showPrice}} </td> <td>  <button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button> {{item.count}} <button @click="increment(index)">+</button> </td> <td><button @click="removeHandle(index)">移除</button></td> </tr> </tbody> </table> <h2>总价格: {{totalPrice | showPrice}}</h2> </div> <h2 v-else>购物车为空</h2> </div> <script src="../js/vue.js"></script> <script src="main.js"></script>

CSS代码：

table { border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th, td { padding: 8px 16px; border: 1px solid #e9e9e9; text-align: left; } th { background-color: #f7f7f7; color: #5c6b77; font-weight: 600; }

JS代码：

const app = new Vue({ el: '#app', data: { books: [ { id: 1, name: '《算法导论》', date: '2006-9', price: 85.00, count: 1 }, { id: 2, name: '《UNIX编程艺术》', date: '2006-2', price: 59.00, count: 1 }, { id: 3, name: '《编程珠玑》', date: '2008-10', price: 39.00, count: 1 }, { id: 4, name: '《代码大全》', date: '2006-3', price: 128.00, count: 1 }, ] }, methods: { // getFinalPrice(price) { // return '￥' + price.toFixed(2) // } increment(index) { this.books[index].count++ }, decrement(index) { this.books[index].count-- }, removeHandle(index) { this.books.splice(index, 1) } }, computed: { totalPrice() { let totalPrice = 0 for (let i = 0; i < this.books.length; i++) { totalPrice += this.books[i].price * this.books[i].count } return totalPrice // 其他计算总价格方法 // for (let i in/of this.books) // reduce } }, filters: { // 过滤器 showPrice(price) { // 参数是你要过滤的东西 // toFixed 保留两位小数 return '￥' + price.toFixed(2) } } })

计算总价格其他方法：

computed: { totalPrice() { // 1.普通的for循环 // let totalPrice = 0 // for (let i = 0; i < this.books.length; i++) { // totalPrice += this.books[i].price * this.books[i].count // } // return totalPrice // 2.for (let i in this.books) // let totalPrice = 0 // for (let i in this.books) { // const book = this.books[i] // totalPrice += book.price * book.count // } // // return totalPrice // 3.for (let i of this.books) // let totalPrice = 0 // for (let item of this.books) { // totalPrice += item.price * item.count // } // return totalPrice return this.books.reduce(function (preValue, book) { return preValue + book.price * book.count }, 0) } },

也可以使用高阶函数reduce，下面介绍高阶函数?

6.(掌握) JavaScript高阶函数的使用 filter/map/reduce // 编程范式: 命令式编程/声明式编程 // 编程范式: 面向对象编程(第一公民:对象)/函数式编程(第一公民:函数) // filter/map/reduce // filter中的回调函数有一个要求: 必须返回一个boolean值 // true: 当返回true时, 函数内部会自动将这次回调的n加入到新的数组中 // false: 当返回false时, 函数内部会过滤掉这次的n const nums = [10, 20, 111, 222, 444, 40, 50] // 高阶函数本身参数也是一个函数 // let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n); // console.log(total); let total = nums.filter(function (n) { return n < 100 }).map(function (n) { return n * 2 }).reduce(function (prevValue, n) { return prevValue + n }, 0) console.log(total); // 1.filter函数的使用 // 10, 20, 40, 50 let newNums = nums.filter(function (n) { return n < 100 }) // console.log(newNums); // 2.map函数的使用 // 20, 40, 80, 100 let new2Nums = newNums.map(function (n) { // 20 return n * 2 }) console.log(new2Nums); // 3.reduce函数的使用 // reduce 作用对数组中所有的内容进行汇总 let total = new2Nums.reduce(function (preValue, n) { return preValue + n }, 0) console.log(total); // 第一次: preValue 0 n 20 // 第二次: preValue 20 n 40 // 第二次: preValue 60 n 80 // 第二次: preValue 140 n 100 // 240 // 普通写法 // 1.需求: 取出所有小于100的数字 let newNums = [] for (let n of nums) { if (n < 100) { newNums.push(n) } } // 2.需求:将所有小于100的数字进行转化: 全部*2 let new2Nums = [] for (let n of newNums) { new2Nums.push(n * 2) } console.log(new2Nums); // 3.需求:将所有new2Nums数字相加,得到最终的记过 let total = 0 for (let n of new2Nums) { total += n } console.log(total);

(十)、(掌握)表单绑定v-model 1.表单绑定v-model 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。Vue中使用v-model指令来实现表单元素和数据的双向绑定。案例的解析：当我们在输入框输入内容时因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。所以，通过v-model实现了双向的绑定。

当然，我们也可以将v-model用于textarea元素

<div id="app"> <input type="text" v-model="message"> {{message}} </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script> ?2.v-model原理 v-model其实是一个语法糖，它的背后本质上是包含两个操作： 1.v-bind绑定一个value属性2.v-on指令给当前元素绑定input事件也就是说下面的代码： <input type="text" v-model="message"> 等同于下面的代码： <input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

<div id="app">     <input type="text" :value="message" @input="message = $event.target.value"> <h2>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' }, methods: { valueChange(event) { this.message = event.target.value; } } }) </script> ?3.v-model结合radio类型使用当存在多个单选框时

单选按钮radio的value会影响v-model的值(input得有value属性，value是什么获取到的就是什么)

<div id="app"> <label for="male">    <input type="radio" id="male" value="男" v-model="sex">男 </label> <label for="female"> <input type="radio" id="female" value="女" v-model="sex">女 </label> <label for="other"> <input type="radio" id="other" value="其他" v-model="sex">其他 </label> <h2>您选择的性别是: {{sex}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', sex: '女' // 可以给radio默认值 } }) </script> 4.v-model结合checkbox类型使用复选框分为两种情况：单个勾选框和多个勾选框单个勾选框： v-model即为布尔值。此时input的value并不影响v-model的值。多个复选框：当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。当选中某一个时，就会将input的value添加到数组中。

?代码：

<div id="app">   <label for="agree"> <input type="checkbox" id="agree" v-model="isAgree">同意协议 </label> <h2>您选择的是: {{isAgree}}</h2> <button :disabled="!isAgree">下一步</button>   <input type="checkbox" value="篮球" v-model="hobbies">篮球 <input type="checkbox" value="足球" v-model="hobbies">足球 <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球 <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球 <h2>您的爱好是: {{hobbies}}</h2>  <label v-for="item in originHobbies" :for="item"> <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}} </label> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', isAgree: false, // 单选框 hobbies: [], // 多选框, originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球'] } }) </script> ?5.v-model结合select类型使用和checkbox一样，select也分单选和多选两种情况。单选：只能选中一个值。 v-model绑定的是一个值。当我们选中option中的一个时，会将它对应的value赋值到mySelect中多选：可以选中多个值。 v-model绑定的是一个数组。当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

?代码：

<div id="app">    <select name="abc" v-model="fruit"> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="榴莲">榴莲</option> <option value="葡萄">葡萄</option> </select> <h2>您选择的水果是: {{fruit}}</h2>    <select name="abc" v-model="fruits" multiple> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="榴莲">榴莲</option> <option value="葡萄">葡萄</option> </select> <h2>您选择的水果是: {{fruits}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', fruit: '香蕉', fruits: [] } }) </script> 6.input中的值绑定初看Vue官方值绑定的时候，我很疑惑：what the hell is that？但是仔细阅读之后，发现很简单，就是动态的给value赋值而已：我们前面的value中的值，可以回头去看一下，都是在定义input的时候直接给定的。但是真实开发中，这些input的值可能是从网络获取或定义在data中的。所以我们可以通过v-bind:value动态的给value绑定值。这不就是v-bind吗？这不就是v-bind在input中的应用吗？搞的我看了很久，搞不清他想将什么。这里不再给出对应的代码，因为会用v-bind，就会值绑定的应用了。? 7.v-model 修饰符的使用 lazy修饰符：默认情况下，v-model默认是在input事件中同步输入框的数据的。也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点或者回车时才会更新number修饰符：默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。number修饰符可以让在输入框中输入的内容自动转成数字类型trim修饰符：如果输入的内容首尾有很多空格，通常我们希望将其去除trim修饰符可以过滤内容左右两边的空格

?代码：

<div id="app">  <input type="text" v-model.lazy="message"> <h2>{{message}}</h2>  <input type="number" v-model.number="age"> <h2>{{age}}-{{typeof age}}</h2>  <input type="text" v-model.trim="name"> <h2>您输入的名字:{{name}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', age: 0, name: '' } }) var age = 0 age = '1111' age = '222' </script>

视频对应目录