JS && VUE && jQuery 学习

理清楚思路

思路一：对象思维

思路二：函数

第一步定义函数

定义函数要思考（ 函数参数是什么？函数做了什么事？函数返回了什么？ ）

第二步调用函数

调用函数要思考（函数参数是什么？返回的东西给谁？）

思路三：IO思维

graph LR
    whatis输入-->whatis处理 --> whatis结果

文本框DIV

思维四：客户端/服务器端

事件区别

JS按钮事件

Jque按钮事件

第一天

练习一

练习一：显示（输出）八个版本的Hello，world！

	JS原生	jQuery	Layui	VUE
直接输出	✔	✔	✘	✘
DIV输出	✔	✔	✔	✔

理解

$(function(){

})，就是document;

>this指针的指向问题

this指针四种情况

页面指针

{}指针

vue里的this

标签行里的this

总结：

	技术	运行级别
框架	Vue、LayUI、easyUI、elementUI。。。。。	★★
应用	jQuery (DOM)	★★★
基础	HTML、CSS、Javascript	★

Bootstrap很少操作DOM，偏CSS

LayUI是通过jquery在操作DOM

jQuery完全操作DOM

原生JS，目前80%操作DOM

练习二

练习二：通过单击按钮事件，在DIV中输出Hello，world！

	js原生	jQuery	Vue
点击按钮事件	✔	✔	✔

原生JS

jquery

vue

第二天

知识点

vue指令-v-on:click，@click

vue指令v-model

练习三：文本框里输入数学表达式，单击按钮实现

练习三：在一个文本框里输入数学表达式，单击按钮实现

文本框和DIV的取值和赋值

	JS原生	jQuery	Vue
input Text	value	val	v-model:value
DIV	innerText innerHTML	text html	{{ 变量 }}

vue敲代码

第三天

各种输入练习

基础格式（要先得到数据，必先取得标签）

原生javascript版本

jquery版本

练习四：两个文本框相加

练习四：两个文本框相加

	js/jQuery思路	Vue思路
第一步	html	html	视图
第二步	构建button事件	判断有多少数据(1、输入数据；2、输出的数据)	数据
第三步	事件里获取，文本框的值	绑定数据（data）（v-model）	数据
第四步	把获取的值做运算	事件绑定到（methods）（v-on）	数据
第五步	运算的结果赋值给显示DIV标签	运算	数据

练习五：选择框

练习五：选择框

练习六：单击单选框

练习六：单击单选框

实现方法

for


jquery

this

练习七：计算器

练习七：勾选复选框

练习八：计算器

计算器

总结

到目前为止我们的程序思维

graph LR
    whatis输入-->whatis处理 --> whatis结果

输入（各种框。。。。。）

处理：

1、字符串数据类型的转换；

2、多个输入变量进行拼接，后运算；

输出（DIV）

提示

脑子一定要清醒，输入了什么，然后对输入做了什么?最后输出到哪里？

练习九：计算器

计算器

练习十：计算器

计算器

知识点

第四天

总结：（整体）

1、页面（表格、HTML标签）（UI）

2、响应式（布局）、样式（CSS、bootstratp、layUI）（UI）

3、互动页面（UI）本质：操作DOM

​ a、框架实现一些特效（混动条、轮播。。。）（UI）

​ b、表单互动（用户要输入）(编程)

4、交互页面（后端、Vue）（编程）

昨天：

表单（Text、select、radio、checkbox），file

练习十一：表单练习

表单练习

练习十二：输入下拉列表

输入下拉列表

练习十三：多行文本框练习

多行文本框练习

练习十四：富文本

富文本

练习十五：窗口计算器

窗口计算器

VUE重要概念：

数据驱动视图

v-model

练习十六：五步Vue法

Vue五步法

	js/jQuery思路	Vue思路
第一步	html	html	视图
第二步	构建button事件	判断有多少数据(1、输入数据；2、输出的数据)	数据
第三步	事件里获取，文本框的值	绑定数据（data）（v-model）	数据
第四步	把获取的值做运算	事件绑定到（methods）（v-on）	数据
第五步	运算的结果赋值给显示DIV标签	运算	数据

有多少输入表单，就有多少data，变量;

有多少事件，就有多少个methods

练习十七

注意：绑定 v-model[select]

第五天

学习技巧

3W1H

why、what、where

How（怎么用！！）

框架（结构）

12345.。。

基础认知：Vue

1. 语法（js、HTML、分离）
2. 指令（数据驱动）
3. 模板
4. 路由
5. 脚手架
   1. 客户端

      前端客户端（浏览器——>DOM）

   2. 服务器端
      1. 硬服务器
         1. 电脑、运算处理速度比较厉害的电脑
      2. 软服务器
         1. 提供HTTP服务的软件（ｎｇｉｎｘ，ａｐａｃｈｅ，ｉｉｓ）

http服务基本上来讲，有两大操作：接受请求（request）、返回响应（response）

前端客户端语言：HTML、CSS、JS、各种前端框架（bootstratp、Layui、Vue、React。）

后端语言：PHP、ASP、JSP、GO、Perl、ruby、python。。。。。

==Node.js在哪里？？（供前端人员使用的后端语言）==

总结：

B/S架构。即：Browser/Server

Client/Server 客户端/服务器

C#、JAVA

python、go、C/C++

13个Vue指令

1. v-show✅
2. v-if ✅
3. v-else✅
4. v-elseif 🗹
5. v-text✅
6. v-html✅
7. v-bind✅
8. v-on✅
9. v-clocak🗹
10. v-model✅
11. v-for
12. v-once 🗹
13. v-per 🗹

格式：

指令="变量" ，变量即vue里的，data的某个变量=

技巧

["] [‘] [‘] ["]

‘ "" ‘ 里外引号的使用

v-html/v-text 指令

注意和原生js的区别

xxx.innerHTMl

xxx.innerText

jquery

xxx.html()

xxx.text()

码云 中国版 github

练习十八：bind属性改变

bind属性

v-bind 指令

指令:XXX="变量" ，XXX属性，属性是HTML的属性

注意坑：

{{}} ,插值表达式，只能在 <> 外，

❌ < { { }} >这种表述是错误的！！！！！❌

错误的表达式

{{}} 必须在 el 挂载的DIV之间才有用

	v-bind:属性="变量"，变量即vue， data
	v-bind:src="变量"	变量="图片地址"
	v-bind:style="xxx:yyy"	xxx="值" ，yyy="值"
	v-bind:style="color:yyy" ，即："’color:’+yyy"
	v-bind:style="xxx + ‘:’ + yyy" ，注意字符串和变量
	v-bind:属性="变量"
	v-bind:属性=‘变量’
	v-bind:属性=变量
	v-bind:属性=变量1+“字符串” + 变量2
	v-bind:属性=变量1+’字符串‘ +变量2
	v-bind:属性=’ 变量1 + ”字符串“ + 变量2‘
	v-bind:属性=” 变量1 +’字符串‘ +变量2 “

练习十九：动态改变样式

原生js

jquery

vue

练习二十

当时checkbox的时候，用v-model，绑定的变量，只有 true 和 false

初始变量值是空的时候，页面未被选中

chenkbox多个相同名字的变量时，要用data[]

{{ true:"当true的时候执行这里"?"当假的时候执行这里" }}

jquery实现

练习二十一

radio一定要写value

button

不支持button v-model

v-if指令

这个语法的作用：{{ }}

1、显示变量（data）；

2、执行methods里的函数；

3、当有多个变量的时候，用运算符连接 ，即"+"

4、{{ }}此语法不能在 <>中，所以才有了v-bind ❌

5、{{ }} 此语法中，不能出现其他的的'{}’ ❌

6、可以简单的ifelse结构，即：变量?"为真这里":"为假这里"

练习二十二：v-show和v-if的区别

练习二十三：v-once

练习二十四：v-pre（显示原意 {{}}）

练习二十五：用户注册界面

防止表单提交

==onsubmit="return false"==

第六天

for循环

练习二十六

输出：10，20，30，40，50.。。。

输出：100、80、60、40、20.。。

练习二十七

输出：斐波拉契数

1,1,2,3,5,8,13,21,34,55,89

练习二十八

动态增加select选项

练习二十九

v-for指令

格式：

指令="变量"

v-for=”变量“

格式：

v-for="(x,y) in z"

v-for="(a,b,c) in z"

v-for="x in y"

select,checkbox,radio,text,password，这些表单input一定要注意value

表单操作注意事项：

id名字、name 名字 、value ，class、type、"< >X</ > 错把X当成value"

常见错误：

JS、JQ："字符串" +变量 ， ‘字符串’ +变量 ,字符串/数字，要和变量联系，必须用”+“号，或者要做数据类型转化

VUE：指令="变量" || 指令:属性=”变量“，此时的双引号，或单引号里面的东西已经变量了

指令=”变量+’字符串’+变量++“

练习三十

★★★★★

v-for="(x,y) in z"

v-for="x in y" : v-for="i in 10" ,v-for="a in ‘hello’"

v-for="( x, y ) in z" : v-for="(i,m) in 100 " , v-for="(i,m) in ‘hello’" ,此时的m永远从0开始，下标0–N

如果z是整数，i就从1开始，到N，如果z是‘hello’ ,那么i就从 ‘h’开始

★★★★★

		v-for格式	当in右边y是数字	当in右边y是字符串
一	x in y	v-for="x in y"	v-for="x in 10"	v-for="x in ‘hello’"	x是循环计数器，y是循环次数，y可以在data里
二	(x,y) in z	v-for="( x, y ) in z"	v-for=" (x,y) in 100 "	v-for="(x,y) in ‘hello’"	y永远是下标，从0开始
三	(x,y,z) in m	v-for="( x, y ,z) in m"	v-for="( x, y ,z) in 200"	v-for="( x, y ,z) in ‘hello,world’"	多了一个z，z?(往下看)

v-for z ，where is z？？？？

m有以下几种情况：（之前in 的右边是整数和字符串）

m除了整数和字符串之外还有第三种数据类型，第三种数据类型，叫Object（对象）

★★★★★

1、 [‘a’,’b’]; （数组）

2、{ a:’xxx’ , b:’yyy’ } （对象）

3、[ { a:’b’ } ,{ a:’c’},{ a:’d’ } ] （集合）

总体格式：

xxx:’yyy’ 或者 xxx:10

	格式		特点
数组	[ ”,”,”,” ]	即[‘a’,’b’,’c’,’d’,’e’]或[1,2,3,4,5,6]	数据类型相同
对象	{ 属性1:’值’ ,属性2:10 }	{ name:’hello’,sex:100 }	可以存放不同类型的数据，属性没有限制，可以有很多属性
集合	[ 对象1, 对象2,对象3 ]	[ {name:’linrui’} ,{name:’fengna’} ,{name:’fengjiali’}	存放很多对象

情况四：

当只有一个对象的时候, {} ，只有一个{} 括号，的时候，循环是按照属性的个数循环的，且只管属性的值

练习三十一

第七天

常见错误：

1、记不住；

2、没思路；（无从下手），不知道干什么？ 【输入，。。。处理输入。。。输出到哪里】

z=?

a=1;b=2;

l=3;i=z;

x=a+b;

y = l+i ;

m = x + y ;

(m)?

3、不仔细，马虎；（ "" , ” , <> , : , = , 对象.属性 ，对象.方法() ，函数【参数()，返回值】，）

数据类型；js（数字、字符串“”，‘’ 、对象（内置、new）、数组[1，2，3，4],[”,”,”,”,]）、集合（对象数组、对象集合、box打包一些列数据）

javascript ；

int x;char/string;

C++; int x;char x; int a[]; char c*；

int x=123;

x=456;

char *s=’123′

我要学习 x=值；

c++:我要学习 x=new 我要学习；(对象)

x.谁=值;

int x=10;long,float,double,boolean;char;….short

int x=10; (c/C++、java)

var / let x=10000000000;

x=10;

x=“hello"

$x=10;

运算符；

4、 不会调试程序；顺序结构（console）

练习三十二

1、表格获取数据（循环，死表头）

2、动态增减数量（1、直接增减；2、方法事件★★★★★）

3、小计

4、获取外部数据；json

5、计算合计；（利用生存周期update）

6、设置数据样式（格式）

知识点：vue生存周期

开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载

生命周期函数

Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

1、beforeCreate（创建前）

表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。

2、created（创建后）

数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在 。

3、beforeMount（挂载前）

vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。

4、mounted（挂载后）

vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。

5、beforeUpdate（更新前）

当 data 变化时，会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。

6、updated（更新后）

当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。

7、beforeDestory（销毁前）

组件销毁之前调用 ，在这一步，实例仍然完全可用。

8、destoryed（销毁后）

组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。

练习三十三

利用生存周期统计sum

练习三十四

过滤器

过滤器的作用

第八天

node安装

安装cnpm

npm install -g cnpm –registry=https://registry.npm.taobao.org

npm install -g vue-cli

npm uninstall vue-cli -g

脚手架的主要作用是用于管理vue的项目

新建项目、配置项目、项目运行、打包、测试

重要的概念：vue脚手架一切依赖于node

npm run dev

项目安装的初始文件成功

运行的结果，npm run dev。通常http://localhost:8080/

vue ui

http://localhost:8000

vue3,main.js

vue2,main.js

import Vue from ‘../node_modules/vue/dist/vue’

练习三十五

练习在脚手架下的基础vue

main.js + index.html

注意vue2.和vue3

vue2

//import Vue from 'vue' //原始导入的是对应的vue文件是，vue.runtime.common.dev.js

import Vue from '../node_modules/vue/dist/vue'

Vue.config.productionTip = false

//main.js。

//vue启动cli模式的入口文件

//main.js启动后，vue实例被创建了，在这里决定挂载html是谁？？？？

new Vue({

 el:'#app',

 data:{

  msg:'hello,world!'

 },

 methods:{

  show:function(){

   console.log("ok");

  }

 },

 mounted(){

  this.msg="ok"

  console.log("man.js创建成功！！！",this.msg);

 }

})

vue3

import { createApp } from 'vue'

import Vue from 'vue/dist/vue.esm-bundler.js'

createApp({
  data(){
​    return {
​      msg:'hello,world!'
​    }
  },
  methods:{
​    show:function(){
​      console.log("ok");
​    }
  },
  mounted(){
​    console.log("mounted",this.msg);
  }
}).mount('#app')

VUE组件

标签程序化

一个完整的vue，

这里是标签

1、已有的标签，img、div、h1.。。。

2、创建

组件的作用，就是用标签的形式，执行script里的程序，让标签的功能更加完善，强大

组件入门格式

Vue.component(tagName, options)

注意细节：

template属性里，不能直接使用vue里的data属性

1、templte属性里，必须含有标签，且第一个值必须是标签

3、自定义的标签里，不能直接用属性 {{}}

4、定义标签时，不能直接使用this.属性

组件的两种实现方法

第九天

总结：

vue指令13个elseif。

指令的格式

v-指令="变量" ，变量在 vue实例的 data属性里

1. v-show✅

   隐藏显示 v-show=“变量”（css实现隐藏）

2. v-if ✅

   判断 ，格式：v-if="变量" （注意和v-show，删除，重新构架了一个对象）

3. v-else✅
4. v-elseif 🗹
5. v-text✅

   用文本的方式显示，格式：v-text="变量"

6. v-html✅

   用html方式显示，格式：v-html="变量"，注意和v-text的区别

7. v-bind✅

   绑定属性。v-bind:属性="变量"，简写语法：:属性="变量"。这里一定能要注意，变量和字符串的拼接。

   " 变量+’字符串’ " (这里一定要小心字符串)

8. v-on✅

   绑定事件。v-on:时间名=“函数/方法” ,函数/方法在vue实例的methods,定义。v-on:时间名=“函数(参数)”，vue的methosd里，也要有相应的参数。

   注意：默认的情况下，其实有一个参数，event

9. v-clocak🗹

   在网路比较慢的情况下，是否显示{{}}的问题

10. v-model✅

    双向数据绑定。格式：v-model="变量" ，是vue里最有特色的一个指令，完全反映了vue数据驱动视图的特点。html的属性，或者html的value、text发生改变的时候，vue实例的data的绑定变量就随之发送变化，反之亦然。★★★★★

11. v-for（重点+难点）★★★★★

    v-for="x in y" (i in 10) ==>1,2,3..10, (x in ‘hello,world’) ==>h,e,l,l,….d

    v-for=“(x,y in z)” ==>1,2,3..10, (x in ‘hello,world’) ==>h,e,l,l,….d,注意y（y是一个index，0,1,2,3,….）

    v-for="(x,y,z in m)"==>1,2,3..10, (x in ‘hello,world’) ==>h,e,l,l,….d，注意y（y依然是index索引，z??？）

    引申出来

    m有以下几种情况

    m就是变量，m是字符串，m是数组，m是一个对象，m是一个集合（当m是对象或者是集合的时候，这个是，y可能就是key，z变成index）

    另外一个思考方式

    用m去推v-for 。m={‘key’:value”} ===>(x,y,z in m) x=value，y=key，z=index

    key:value这样的形式，我们也可以称为：属性：值

12. v-once 🗹

    加载一次，当第一次执行了以后，vue的属性的值，无论发送什么变化，都以第一次的输出为准；

    格式 <标签 v-once>{{变量}} </>

13. v-per 🗹

    要不要把变量（vue实例里的data），进行输出，如果加上v-per，则是 {{}}的形式输出<标签 v-per>{{变量}} </>

vue生命周期

组件

3w1h

what?why?where?how?

注意意识:

切割页面的时候，首先以“行”为导向

遵循公共页面的导向

vue两大核心：

1、数据驱动视图，视图数据相互作用，相互影响；

2、组件和组件化思维；在vue里一切都是组件；

定义和注意谁是根组件

凡是组件，都会有控制程序

全局组件/局部（私有）组件

定义组件的方法

三步骤：

1、定义组件模板

2、注册组件(给即将使用的组件的标签取个名字)

3、使用组件<组件名></组件名>

1、第一种写法：vue.extend方法

两个注意事项：

1、必须只能有一个根元素

2、多行字符串的话，用 ` 这个

2、第二种写法：vue.component方法

3、第三种写法：script方法

4、第四种写法：template

练习三十六

组件思考的问题：

1、子组件的使用

首先：

一定义模板

二注册子组件（要在父组件里注册子组件）

components：{
    '子组件名':{
        template:'要挂载的模板'
    }

}

三要在父组件的模板里，添加子组件的标签

tempate,不能嵌套

练习三十七

子组件的使用

练习三十八

两个儿子

练习三十九

多级嵌套

练习四十

练习九个组件

练习四十一

脚手架实现

main.js+index.html。相当于，用main.js（VUE 实例。直接挂载了html）

练习四十二

main.js->Root.vue

练习四十三

脚手架实现（分工完成）

总结

extend	简写	script法	template法
Vue.extend( { template:’HTml’ } )
Vue.component(‘标签名’,组件对象);	Vue.component(‘ 标签名 ‘ ,{ template:’ html ‘ })	Vue.component( "标签名" ,{ template:’#tmp’ } )	Vue.component("标签名" ,{ template:’#名字’ } )
<标签名></标签名>	<标签名></标签名>	<标签名></标签名>	<标签名></标签名>

注意：

1、template只能有一个根元素；

2、多行字符串的话，用 ` 这个；

3、小心驼峰命名；

脚手架组件格式

脚手架写法

第十天

重点结论：

判断组件的data，或methods能否调用有两点key

1、是否在控制区域内；

2、是否有父子关系；

练习四十四

app和root相互调用

练习四十五

重要的概念

组件里没有data属性，只有data方法

因为组件可能是多份的，多份组件可以共享方法，但是不能共享数据

全局组件和局部组件

当出现多个new Vue()实例的时候，就会出现私有组件

练习四十六

组件中共享全局数据

定义一个全局变量即可。这里的全局变量即全局对象

var XX={

  counter:0

}

组件切换

练习四十七

用if的方式实现组件切换

动态挂接

3W1H(动态的在组件之间进行切换，什么叫动态的切换了，就是状态保存下来（checkbox，data()属性里的值）)，因为if切换实际上是相当于重新new了一个对象，重新实例化了一遍，所有状态没有保存，所以才要用动态挂接。

格式：

<component v-bind:is="变量" ></component>

实质是系统（Vue）自己定义了一个标签，标签的名字叫component ,compont这个标签定义了一个属性，这个属性叫is。

is="变量" ，变量组件的名字

变量=？？？？

练习四十八

component v-bind:is=’变量’

练习四十九

动态挂接练习

两个组件通过 is切换

动态挂接的作用

1、在component标签里用is=”变量“ ，即变量的名字切换组件，不用在<组件>挨个写；

注意：也可以is=”组件名“ ，但是” ‘ ’ “

2、加上标签，即可以保存状态；

练习五十

保存状态

练习五十一

for循环实现

父组件传值给子组件

注意：异步丢失data的问题

第十一天

父传子，属性处理的三种情况

组件子传父

this.$emit( ‘方法名’ ,要传递的数据 ) where？？

<son @fun="show" >

第一步：确定在子组件里我要弹射或我要传递的数据，通常就是在子组件的data()函数里找；即在子组件的methods里定义一个函数，在该函数里 this.$emit( ‘注册一个名字’ ,要传递的数据 )

第二步：我在子组件的调用标签 <子组件的标签名 @:刚才注册名字=”XXXX“ ></子组件的标签名 >;

第三步：因为子组件的使用标签一定在父组件里，所以，在父组件里的methods里定义第二步 XXXX；

第四步：将XXXX里的一个参数，赋值给父组件里的data或data()，相当于，父组件要出一个变量来接收子组件传递过来的数据；

第五步：触发子组件里的this.$emit函数/事件

练习五十二

子父组件

插槽slot

（3W1H），what?why？where?how?

定义：

插槽的原理即：在父组件调用子组件是，在子组件的标签里，带入XXX <子组件>XXXXX</子组件>，当XXXXX要带入子组件时，即构成插槽。即在子组件里，定义即可接收到父组件带入的相关信息。。

注：是以字符串的形式带入，不是变量。是template里使用

练习五十三

插槽练习

练习五十四

多个插槽的使用

总结：

• 指令
• 组件
  • 组件的定义和使用
  • 嵌套组件（即父子组件）
  • 动态挂载
  • 组件的通信
  • 插槽
• • 组件通信
    • props/$emit、Vuex、EventBus，localStoragre
• 路由器
• 脚手架

练习五十五

脚手架练习父传子，子传父

第十二天

路由 vue-router

3W1H(what、why、where、how)

前端

职业习惯

1、看着页面，想布局（xxx行，xxx列）

2、看到页面注意路径

注意

​ 注意路径和浏览器的路径是否一致，（如果一致就说明大家是一起的。如果不一致，就证明跨域了）。什么是跨域，就是不在同一个服务器，或者不在同一个域名下，或者不在同一个IP

​ 注意 ？号

通常这类请求都是GET请求

https://unpkg.com/vue-router/dist/vue-router.js

练习五十六

将router写入根组件

注意：redirect自动跳转到某个组件

练习五十七

脚手架里实现router

路由的几个情况

1. 普通路由
2. 路由样式
3. 路由的参数传递
4. 路由嵌套
5. 路由视图

普通html路由实现和脚手架模式实现路由的区别

	普通模式	脚手架模式
导入	<script src=’‘"xxxx" >	import XXX from ‘ruoter路径’
建模板		新建xxx.vue文件
写链接
注册组件	Vue.component(‘组件标签名’ ,{ …..})	无
实例化VueRouter	var r=new VueRouter( …. )	router文件夹下，index.js文件里，实例化Vouter
映射路径	routes:[ { } ,{ } ]	routes:[ { } ,{ } ]
	{path:’/xxxx’ ,component:组件名}	{path:’/xxxx’ ,component:组件名}:注意。脚手架里的组件名是从import里导入
html加载	</	</
在Vue对象里引入	new Vue（ { 引入}）	index.js，里引入

注意：’/’

练习五十八

练习五十九

路由嵌套

练习六十

vue中路由的高亮

注意：路由的高亮实现，必须是

练习六十一

为路由切换动画

练习六十二

事件总线模式

第一步：声明一个总线

第二步：设置要发送的事件

第三步：设置要接受的事件

练习六十三

命名视图

练习六十四

使用饿了么

https://element.eleme.cn/#/zh-CN

npm i element-ui -S

import ElementUI from ‘element-ui’;

import ‘element-ui/lib/theme-chalk/index.css’;

练习六十五

练习六十六

练习六十七

练习六十八

练习六十九

练习七十

练习七十一

练习七十二

练习七十三

练习七十四

练习七十五

练习七十六

练习七十七

练习七十八

练习七十九

练习八十

练习八十一

练习八十二

练习八十三

练习八十四

练习八十五

练习八十六

练习八十七

练习八十八

练习八十九

练习九十

练习九十一

练习九十二

练习九十三

练习九十四

练习九十五

练习九十六

练习九十七

练习九十八

练习九十九

练习一百

附录

打钩✔打叉✘勾勾叉叉对错特殊符号

√	✓	✔	☑	✅	🗹	🗸	✗	✘	⛒	✕	🗵	❌	✖	❎	🗷	🗶	🗴	⮽	☒	⛌	⛝

✔