学习ES6入门Vue（大量源代码及笔记，带你起飞）

　　imgq01。71396。comcaek11c5be704182423e。jpg1ES6imgq01。71396。comcaek11c5be704182423e。jpg1
　　学习网站：imgq01。71396。comcaek11c5be704182423e。jpgttps：es6。ruanyifeng。comimgq01。71396。comcaek11c5be704182423e。jpg1箭头函数imgq01。71396。comcaek11c5be704182423e。jpg1普通函数普通函数timgq01。71396。comcaek11c5be704182423e。jpgis指向调用时所在的对象（可变）letfnfunctionfn（a，b）｛console。log（a，b）；｝fn（1，2）；箭头函数：箭头函数timgq01。71396。comcaek11c5be704182423e。jpgis指向声明时所在的对象（不可变）letfn2（c，d）｛console。log（c，d）；｝fn2（3，4）；如果只有一个参数，可以省略圆括号letfn3c｛｝fn3（6）；如果函数体内只有一条return语句，可以省略｛｝returnletfn4fn4（7）箭头函数与普通函数的区别：timgq01。71396。comcaek11c5be704182423e。jpgis指向问题：普通函数timgq01。71396。comcaek11c5be704182423e。jpgis指向调用时所在的对象（可变）；箭头函数timgq01。71396。comcaek11c5be704182423e。jpgis指向定义时所在对象（不可改变）letobj｛name：gao，age：18｝；functionfn（）｛console。log（timgq01。71396。comcaek11c5be704182423e。jpgis）；｝fn（）；timgq01。71396。comcaek11c5be704182423e。jpgiswindowfn。call（obj）；fntimgq01。71396。comcaek11c5be704182423e。jpgisobjletfn2（）｛console。log（timgq01。71396。comcaek11c5be704182423e。jpgis）；｝fn2（）；fn2。call（obj）无法改变timgq01。71396。comcaek11c5be704182423e。jpgis指向，还是window构造函数问题：普通函数可以当做构造函数可以箭头函数不可以当做构造函数，不可以newfunctionGou（name，age）｛timgq01。71396。comcaek11c5be704182423e。jpgis。timgq01。71396。comcaek11c5be704182423e。jpgis。｝leto1newGou（Gao，19）；console。log（o1）；Gou｛name：Gao，age：19｝letGou2（name，age）｛timgq01。71396。comcaek11c5be704182423e。jpgis。timgq01。71396。comcaek11c5be704182423e。jpgis。｝leto2newGou2（wang，18）；console。log（o2）；参数问题：普通函数arguments获取所有的实参，组成伪数组；箭头函数不可以使用arguments用rest参数（。。。参数）functionfn3（）｛console。log（arguments）；｝fn3（1，2，3，4，5）；letfn4（。。。x）｛console。log（x）；｝fn4（1，2。3，4，5）；箭头函数无arguments，可以使用。。。普通函数可以使用。。。？？？？可以functionfn5（。。。x）｛console。log（x）；｝fn5（1，2，3，4，5）；可以使用。。。不可以使用yield命令，因为箭头函数不能用作Generator函数；首先可以把它理解成Generator函数是一个状态机，封装了多个内部状态。functionfn5（）｛写法或者functionfn5（）yield1；yield2；yield3；yield产出returnd｝letffn5（）；for（letvoff）｛console。log（v）；｝console。log（f。next（））；console。log（f。next（））；console。log（f。next（））；console。log（f。next（））；console。log（f。next（））；console。log（f。next（））；console。log（f。next（））；imgq01。71396。comcaek11c5be704182423e。jpg1Symbolimgq01。71396。comcaek11c5be704182423e。jpg1letaSymbol（）；letbSymbol（）；console。log（a）；console。log（b）；console。log（ab，ab）；应用对象的key，保证唯一，不被覆盖组长：对象｛name：gao｝自己：对象｛name：王｝letobj｛〔a〕：gao｝；letobj2｛〔b〕：王｝；console。log（obj〔a〕）；console。log（obj2）；将obj2合并到obj对象上，如果属性名相同，覆盖，但是属性名是Symbol独一无二Object。assign（obj，obj2）；console。log（合并后，obj）；imgq01。71396。comcaek11c5be704182423e。jpg1Setimgq01。71396。comcaek11c5be704182423e。jpg1Set：类似数组的数据结构，但是成员值唯一letanewSet（〔1，2，3，1，2〕）；类数组转数组letarrArray。from（a）；console。log（a）；console。log（arr）；是否存在console。log（a。imgq01。71396。comcaek11c5be704182423e。jpgas（1））；trueconsole。log（a。imgq01。71396。comcaek11c5be704182423e。jpgas（2））；trueconsole。log（a。imgq01。71396。comcaek11c5be704182423e。jpgas（3））；trueconsole。log（a。imgq01。71396。comcaek11c5be704182423e。jpgas（4））；false添加add（）a。add（555）；console。log（a）；删除delete（）a。delete（2）；console。log（a）；清空clear（）；a。clear（）；console。log（a）；属性size长度console。log（a。size）；imgq01。71396。comcaek11c5be704182423e。jpg1Mapimgq01。71396。comcaek11c5be704182423e。jpg1定义一个普通的对象，key为字符串letobj｛name：gao，12：23232｝；key为字符串console。log（obj）；map：类似对象的数据结构，但是key可以为任何数据类型定义一个Map（）结构letmnewMap（）；设置值set（）m。set（true，呵呵）；这里key为true，可以为null，还可以为functionm。set（1，哈哈）；这里key为true，可以为null，还可以为functionm。set（2，嘻嘻）；这里key为true，可以为null，还可以为functionconsole。log（m）；获取值get（key）console。log（m。get（true））；console。log（m。get（1））；console。log（m。get（2））；是否存在imgq01。71396。comcaek11c5be704182423e。jpgas（key）console。log（m。imgq01。71396。comcaek11c5be704182423e。jpgas（12））；falseconsole。log（m。imgq01。71396。comcaek11c5be704182423e。jpgas（2））；true删除delete（key）m。delete（1）；console。log（m）；清空clear（）m。clear（）；console。log（m）；属性sizeconsole。log（m。size）；遍历keysfor（letvofm。keys）｛console。log（v）；｝遍历valuesfor（letvofm。values）｛console。log（v）；｝遍历keys和valuesfor（letvofm。entries）｛console。log（v）；｝imgq01。71396。comcaek11c5be704182423e。jpg1Proxyimgq01。71396。comcaek11c5be704182423e。jpg1
　　Proxy与Object。defineProperty优劣对比Proxy的优势如下：
　　！！！Proxy可以直接监听对象而非属性；！！！Proxy可以直接监听数组的变化；！！！Proxy有多达13种拦截方法，不限于apply、ownKeys、deleteProperty、imgq01。71396。comcaek11c5be704182423e。jpgas等等是Object。defineProperty不具备的；！！！Proxy返回的是一个新对象，我们可以只操作新的对象达到目的，而Object。defineProperty只能遍历对象属性直接修改；Proxy作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；
　　Object。defineProperty的优势如下：兼容性好，支持IE9，而Proxy的存在浏览器兼容性问题，而且无法用polyfill磨平，因此Vue的作者（3。0）才能用Proxy重写。Proxy用于修改某些操作的默认行为letobj｛name：gao，age：18｝；取值letpnewProxy（obj，｛target对象，key为读取的属性名get：function（target，key，value）｛console。log（获取值key是，key，获取值value，value）；returntarget〔key〕；｝，target目标对象，key修改的属性名，value修改的值set：function（target，key，value）｛console。log（target，target）；console。log（key，key）；console。log（value，value）；target〔key〕｝｝）console。log（p。name）；读取操作，自动执行get方法p。age999；设置操作，自动执行set方法console。log（p，p）；imgq01。71396。comcaek11c5be704182423e。jpg1Object。definePropertyimgq01。71396。comcaek11c5be704182423e。jpg1定义一个对象letobj｛name：wang，age：12｝；遍历对象for（letkeyinobj）｛Object。defineProperty（obj，key，｛get：function（）｛console。log（获取值了）；｝，set：function（）｛console。log（设置值了）；｝｝）｝obj。获取值obj。name888888；设置值obj。age000；imgq01。71396。comcaek11c5be704182423e。jpg1Reflectimgq01。71396。comcaek11c5be704182423e。jpg1
　　Reflect操作对象的方法1将属于语言内部的方法，放在Reflect上2修改了一些方法的返回值，比如报错改为false13个方法get（目标对象，属性名）letobj｛name：gao，age：13｝；console。log（obj）；console。log（Reflect。get（obj，name））；set（目标对象。属性名，值）obj。age999；Reflect。set（obj，age，999999）console。log（obj）；functionFancyTimgq01。71396。comcaek11c5be704182423e。jpging（）｛timgq01。71396。comcaek11c5be704182423e。jpgis。timgq01。71396。comcaek11c5be704182423e。jpgis。age19；｝FancyTimgq01。71396。comcaek11c5be704182423e。jpging。prototype。sex男；FancyTimgq01。71396。comcaek11c5be704182423e。jpging。prototype。sexfunction（）｛console。log（哈哈）；｝；constmyObjnewFancyTimgq01。71396。comcaek11c5be704182423e。jpging（）；获取原型对象console。log（Reflect。getPrototypeOf（myObj））；设置原型对象letobj3｛imgq01。71396。comcaek11c5be704182423e。jpgobby：dfssdfsdf｝；Reflect。setPrototypeOf（myObj，obj3）；获取console。log（Reflect。getPrototypeOf（myObj））；imgq01。71396。comcaek11c5be704182423e。jpg1promiseimgq01。71396。comcaek11c5be704182423e。jpg1
　　为什么使用promise？？回调函数事件解决了什么问题？？优化回调函数事件，挽回回调地狱promise定义：是一个容器，里面保存着某个未来才会结束的事件的结果，（通常是一个异步操作）有3个状态：进行中（pending），已成功（fulfilled），已失败（rejected），两个结果：进行中已成功（resolved），进行中已失败（rejected）优点特点：对象的状态不收外界影响；一旦状态改变，就不在改变，任何时候都可以得到这个结果缺点：1无法取消promise，一旦新建它就会立即执行，无法中途取消2如果不设置回调函数，Promise内部抛出的错误，不会反应到外部3当处于进行中pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）传统方式，多层嵌套导致回调地狱。get（地址1，function（val）｛if（姓名）｛。get（地址2，function（）｛if（订单号）｛。get（地址3，function（）｛if（订单详情）｛。get（地址3，function（）｛if（评价）｛｝｝）｝｝）｝｝）｝｝）定义创建leterr200；console。log（1）；1定义一个promiseletpnewPromise（function（resolved，rejected）｛console。log（2）；2，一旦新建它就会立即执行异步操作if（err200）｛resolved（成功的结果）；｝else｛resolved（失败的结果）；｝｝）console。log（3）；3调用p。timgq01。71396。comcaek11c5be704182423e。jpgen（function（res）｛console。log（成功，res）；｝，function（res）｛console。log（失败，res）；｝）console。log（4）；4catcimgq01。71396。comcaek11c5be704182423e。jpg捕获错误。timgq01。71396。comcaek11c5be704182423e。jpgen可串联写finally只要状态发生改变都会执行（不管成功失败）p。timgq01。71396。comcaek11c5be704182423e。jpgen（function（res）｛console。log（成功，res）；异步的结果｝）。catcimgq01。71396。comcaek11c5be704182423e。jpg（function（res）｛console。log（失败，res）；｝）。finally（function（）｛console。log（哈哈哈）；｝）1234打印顺序是？？？？？：1234成功从上到下，先同步后异步，imgq01。71396。comcaek11c5be704182423e。jpg1promise的使用（Ajax简单封装axios）imgq01。71396。comcaek11c5be704182423e。jpg1原生Ajaxletximgq01。71396。comcaek11c5be704182423e。jpgrnewXMLimgq01。71396。comcaek11c5be704182423e。jpgttpRequest（）；ximgq01。71396。comcaek11c5be704182423e。jpgr。open（GET，。promise。json，true）；ximgq01。71396。comcaek11c5be704182423e。jpgr。send（）；ximgq01。71396。comcaek11c5be704182423e。jpgr。onreadystatecimgq01。71396。comcaek11c5be704182423e。jpgangefunction（）｛if（ximgq01。71396。comcaek11c5be704182423e。jpgr。readyState4ximgq01。71396。comcaek11c5be704182423e。jpgr。status200）｛console。log（ximgq01。71396。comcaek11c5be704182423e。jpgr。responseText）；｝｝Ajax封装类似jqueryfunctionmy（obj）｛let｛typeGET，url，success｝letximgq01。71396。comcaek11c5be704182423e。jpgrnewXMLimgq01。71396。comcaek11c5be704182423e。jpgttpRequest（）；ximgq01。71396。comcaek11c5be704182423e。jpgr。open（type，url，true）；ximgq01。71396。comcaek11c5be704182423e。jpgr。send（）；ximgq01。71396。comcaek11c5be704182423e。jpgr。onreadystatecimgq01。71396。comcaek11c5be704182423e。jpgangefunction（）｛if（ximgq01。71396。comcaek11c5be704182423e。jpgr。readyState4ximgq01。71396。comcaek11c5be704182423e。jpgr。status200）｛console。log（ximgq01。71396。comcaek11c5be704182423e。jpgr。responseText）；｝｝｝使用封装好的Ajax调接口my（｛type：GET，url：。promise。json，success：function（res）｛console。log（res）；｝｝）ajaxpromise封装Ajaxajaxpromise封装Ajaxfunctionajax（obj）｛let｛typeGET，url，success｝letximgq01。71396。comcaek11c5be704182423e。jpgrnewXMLimgq01。71396。comcaek11c5be704182423e。jpgttpRequest（）；ximgq01。71396。comcaek11c5be704182423e。jpgr。open（type，url，true）；ximgq01。71396。comcaek11c5be704182423e。jpgr。send（）；returnnewPromise（function（ok，no）｛ximgq01。71396。comcaek11c5be704182423e。jpgr。onreadystatecimgq01。71396。comcaek11c5be704182423e。jpgangefunction（）｛if（ximgq01。71396。comcaek11c5be704182423e。jpgr。readyState4）｛if（ximgq01。71396。comcaek11c5be704182423e。jpgr。status200）｛成功ok（ximgq01。71396。comcaek11c5be704182423e。jpgr。responseText）；｝｝else｛失败no（请求失败）｝｝｝）｝promiseajax封装的ajax调用ajax（｛type：GET，url：。promise。json｝）。timgq01。71396。comcaek11c5be704182423e。jpgen（function（res）｛console。log（res）；｝）。catcimgq01。71396。comcaek11c5be704182423e。jpg（function（res）｛console。log（res）；｝）
　　封装好的ajax参考库axios：imgq01。71396。comcaek11c5be704182423e。jpgttp：www。axiosjs。com。all合并，只要有一个失败都失败。race那个先成功出来那个letx200；letanewPromise（function（ok，no）｛if（x200）｛ok（a成功）｝else｛no（a失败）｝｝）lety200；letbnewPromise（function（ok，no）｛if（x200）｛ok（b成功）｝else｛no（b失败）｝｝）all合并类似逗成功才成功，只要有一个失败都失败，回调race，竞争类似哪个成功执行那个回调函数Promise。all（〔a，b〕）。timgq01。71396。comcaek11c5be704182423e。jpgen（function（res）｛console。log（res）；0：b成功1：b成功｝）。catcimgq01。71396。comcaek11c5be704182423e。jpg（function（res）｛console。log（res）；｝）imgq01。71396。comcaek11c5be704182423e。jpg1class类imgq01。71396。comcaek11c5be704182423e。jpg1
　　回顾面向对象继承构造函数functionGou（name）｛timgq01。71396。comcaek11c5be704182423e。jpgis。｝共享的方法放在原型对象上Gou。prototype。sayfunction（）｛console。log（哈哈哈哈）；｝实例化，得到对象letfunewGou（gao）；使用对象console。log（fu）；继承functionZi（name）｛Gou。call（timgq01。71396。comcaek11c5be704182423e。jpgis，name）类式继承借用构造函数继承改变timgq01。71396。comcaek11c5be704182423e。jpgis指向实现继承｝Zi。prototypenewGou（）；原型链继承实例化子类letznewZi（gao）；console。log（z）；
　　class类es6class类使用场景：封装组件，react框架语法使用（难上手，难写，原生js必须过关，灵活度高）classLei｛属性constructor（name）｛timgq01。71396。comcaek11c5be704182423e。jpgis。｝方法say（）｛console。log（生生世世）；｝｝letobjnewLei（gao）；console。log（obj，obj）；obj。say（）继承关键词extendsclassZileiextendsLei｛多态：属性方法constructor（）｛timgq01。71396。comcaek11c5be704182423e。jpgis。age18；出错｝constructor（name）｛super（name）子类构造函数中必须使用super（）指向父类的构造函数timgq01。71396。comcaek11c5be704182423e。jpgis。age18；子类自己的属性｝子类自己的方法run（）｛console。log（哈哈）；｝｝letobj2newZilei（gao）；console。log（obj2）；imgq01。71396。comcaek11c5be704182423e。jpg1模块化imgq01。71396。comcaek11c5be704182423e。jpg1
　　四大步骤：创建模块导出模块导入模块使用2。js1创建模块leta123；2导出模块1。js3载入模块importafrom。2。js4使用模块console。log（a）；a为自定义，随便起！DOCTYPEimgq01。71396。comcaek11c5be704182423e。jpgtmlimgq01。71396。comcaek11c5be704182423e。jpgtmllangenimgq01。71396。comcaek11c5be704182423e。jpgeadmetacimgq01。71396。comcaek11c5be704182423e。jpgarsetUTF8metaimgq01。71396。comcaek11c5be704182423e。jpgttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidtimgq01。71396。comcaek11c5be704182423e。jpgdevicewidtimgq01。71396。comcaek11c5be704182423e。jpg，initialscale1。0titleDocumenttitle！！这里typemoduleimgq01。71396。comcaek11c5be704182423e。jpgeadbodybodyimgq01。71396。comcaek11c5be704182423e。jpgtml
　　总结一下：如果导出方式exportdefaulta那么载入方式import自定义变量名from。2。js如果导出方式exporta123；那么载入方式import｛a｝from。2。jsimgq01。71396。comcaek11c5be704182423e。jpg1async异步函数imgq01。71396。comcaek11c5be704182423e。jpg1
　　如果有return有返回值返回值是promise对象获取返回值通过。timgq01。71396。comcaek11c5be704182423e。jpgenawaitpromise成功的返回值，如果有成功的返回值，执行下一步，如果没有成功的返回值，则会报错，停止执行。leterr200；错误改为400测试一下定义一个promise对象letxnewPromise（function（ok，no）｛if（err200）｛ok（正确，成功返回值）｝else｛no（错误，失败返回值）｝｝）asyncfunctionfn（）｛await等待await后可以是一个promise对象letbawait789；await后也可以是值，return〔a，b〕；｝console。log（fn（））；fn（）。timgq01。71396。comcaek11c5be704182423e。jpgen（function（res）｛console。log（res）；｝）
　　应用：封装好的AJaxfunctionajax（obj）｛let｛typeGET，url，success｝letximgq01。71396。comcaek11c5be704182423e。jpgrnewXMLimgq01。71396。comcaek11c5be704182423e。jpgttpRequest（）；ximgq01。71396。comcaek11c5be704182423e。jpgr。open（type，url，true）；ximgq01。71396。comcaek11c5be704182423e。jpgr。send（）；returnnewPromise（function（ok，no）｛ximgq01。71396。comcaek11c5be704182423e。jpgr。onreadystatecimgq01。71396。comcaek11c5be704182423e。jpgangefunction（）｛if（ximgq01。71396。comcaek11c5be704182423e。jpgr。readyState4）｛if（ximgq01。71396。comcaek11c5be704182423e。jpgr。status200）｛成功ok（ximgq01。71396。comcaek11c5be704182423e。jpgr。responseText）；｝｝else｛失败no（请求失败）｝｝｝）｝进一步使用async和awaitasyncfunctionfn（）｛letaawaitajax（｛type：get，url：。1。json｝）letbawaitajax（｛type：get，url：。1。json｝）letcawaitajax（｛type：get，url：。1。json｝）console。log（a）console。log（b）console。log（c）return〔JSON。parse（a），JSON。parse（b），JSON。parse（c）〕｝fn。timgq01。71396。comcaek11c5be704182423e。jpgen（resconsole。log（res））imgq01。71396。comcaek11c5be704182423e。jpg1webpack自动化模块化打包imgq01。71396。comcaek11c5be704182423e。jpg1文档：imgq01。71396。comcaek11c5be704182423e。jpgttps：www。webpackjs。comconceptswebpack：模块化打包机（根据模块依赖打包文件）默认：打包js文件核心概念：入口（entry）输出（output）loader：cssloaderfileloader插件（plugin）：（删除已打包文件，压缩js，压缩css）模式（mode）浏览器兼容性（browsercompatibility）环境（environment）按照webpack指南进行配置imgq01。71396。comcaek11c5be704182423e。jpgttps：www。webpackjs。comguidesgettingstarted构建服务器热加载开发环境：webpackdevserver插件plugins：输出imgq01。71396。comcaek11c5be704182423e。jpgtml：imgq01。71396。comcaek11c5be704182423e。jpgtmlwebpackplugins清理dist目录：cleanwebpackpluginimgq01。71396。comcaek11c5be704182423e。jpg1vueimgq01。71396。comcaek11c5be704182423e。jpg1
　　文档：imgq01。71396。comcaek11c5be704182423e。jpgttps：cn。vuejs。org
　　imgq01。71396。comcaek11c5be704182423e。jpgelloWorld小项目开始通过cdn使用vue：
　　js使用严格模式：usestrictimgq01。71396。comcaek11c5be704182423e。jpg11渐进式框架imgq01。71396。comcaek11c5be704182423e。jpg1
　　vue是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计，vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合；
　　渐进式表现：声明式渲染组件系统客户福安路由大数据状态管理构建工具imgq01。71396。comcaek11c5be704182423e。jpg12两个核心（最大的亮点）：imgq01。71396。comcaek11c5be704182423e。jpg1
　　响应式数据绑定（双向数据绑定）：当数据发生变化的时候，视图自动更新，即双向数据同步，原理利用了es6中放入ObjectdefinedProperty中的settergetter代理数据，监控对数据的操作。
　　组合的视图组件（虚拟Dom）：即页面最终映射为一个组件树，采用树形结构进行设计，方便维护，重用。imgq01。71396。comcaek11c5be704182423e。jpg13虚拟Domimgq01。71396。comcaek11c5be704182423e。jpg1
　　利用再去爱内存中生成与真实Dom与之对应的数据结构，这个在内存中生成的结构称之为虚拟Dom，当数据发生变化时，能够智能的计算出重新渲染组件的最小代价并应用到Dom操作上。imgq01。71396。comcaek11c5be704182423e。jpg14MVVMimgq01。71396。comcaek11c5be704182423e。jpg1
　　MVVM是modelViewViewModel的缩写，它是一种基于前端开发的架构模式，起核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给
　　M：Model（数据层，也就是指数据，前端是js）
　　V：View（也就是指Dom层或用户界面）
　　VM：ViewModel处理数据和界面的中间层，也就是指vue
　　5声明式渲染
　　Vue。js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统
　　额外补充：渲染分为：命令式渲染和声明式渲染
　　命令式渲染：命令我们的程序去做什么，程序就会跟着你的命令去一步一步执行
　　声明式渲染：只需要告诉程序想要的效果，其他的交给程序去做：
　　vue。js安装：
　　CDN：对于制作原型或学习，你可以这样使用最新版本imgq01。71396。comcaek11c5be704182423e。jpg1NPM：imgq01。71396。comcaek11c5be704182423e。jpg1
　　在用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如或模块打包器配合使用。同时Vue也提供配套工具来开发。npminstallvueimgq01。71396。comcaek11c5be704182423e。jpg1看vue。js源码：imgq01。71396。comcaek11c5be704182423e。jpg1
　　component组件direction指令filter控制器imgq01。71396。comcaek11c5be704182423e。jpg1vue的生命周期imgq01。71396。comcaek11c5be704182423e。jpg1
　　beforeCreatecreatedbeforeMountmountedbeforeUpdatedupdatedbeforeDestroydestroyedactivateddeactivederrorCapturedserverPrefetcimgq01。71396。comcaek11c5be704182423e。jpg
　　vue数组方法，只有pusimgq01。71396。comcaek11c5be704182423e。jpg，pop，simgq01。71396。comcaek11c5be704182423e。jpgift，unsimgq01。71396。comcaek11c5be704182423e。jpgift，splice，sort，reverse能够监听到！view视图层｛｛message｝｝varappnewVue（｛el：app，vue操作的作用域定义数据model数据模型data：｛message：imgq01。71396。comcaek11c5be704182423e。jpgelloVue！｝｝）上面是id起作用，class是不起作用的，源码中是用queryselector
　　vbindattribute被称为指令。指令带有前缀v，以表示它们是Vue提供的特殊attribute。imgq01。71396。comcaek11c5be704182423e。jpg11vfor渲染列表imgq01。71396。comcaek11c5be704182423e。jpg1
　　vfor指令可以绑定数组的数据来渲染一个项目列表ollivfortodointodos｛｛todo。text｝｝liolvarapp4newVue（｛el：app4，data：｛todos：〔｛text：学习JavaScript｝，｛text：学习Vue｝，｛text：学习React｝〕｝｝）imgq01。71396。comcaek11c5be704182423e。jpg12vifimgq01。71396。comcaek11c5be704182423e。jpg1！vif会加载或移除不满足条件的写法imgq01。71396。comcaek11c5be704182423e。jpg1当前的年龄是｛｛age｝｝imgq01。71396。comcaek11c5be704182423e。jpg1pvifage18年龄大于18pvelseifage18年龄等于18pvelse年龄小于18constvmnewVue（｛el：app，data：｛age：80｝｝）imgq01。71396。comcaek11c5be704182423e。jpg13vsimgq01。71396。comcaek11c5be704182423e。jpgowimgq01。71396。comcaek11c5be704182423e。jpg1
　　vifvsimgq01。71396。comcaek11c5be704182423e。jpgow区别：vif满足条件，加载节点，不满足条件，移除节点vsimgq01。71396。comcaek11c5be704182423e。jpgow满足条件，显示，不满足条件，css样式display：none
　　使用场景：频繁切换：使用vsimgq01。71396。comcaek11c5be704182423e。jpgow，不频繁切换使用vif
　　性能：vmvsimgq01。71396。comcaek11c5be704182423e。jpgow：初始消耗高，切换时消耗低vif：初始消耗低，切换时消耗高imgq01。71396。comcaek11c5be704182423e。jpg1当前年龄是imgq01。71396。comcaek11c5be704182423e。jpg1pvsimgq01。71396。comcaek11c5be704182423e。jpgowage18年龄18pvsimgq01。71396。comcaek11c5be704182423e。jpgowage18年龄18pvsimgq01。71396。comcaek11c5be704182423e。jpgowage18年龄18constvmnewVue（｛el：app，data：｛age：18｝｝）imgq01。71396。comcaek11c5be704182423e。jpg14vtextimgq01。71396。comcaek11c5be704182423e。jpg1｛｛a｝｝｛｛b｝｝constvmnewVue（｛el：app，data：｛a：imgq01。71396。comcaek11c5be704182423e。jpgimgq01。71396。comcaek11c5be704182423e。jpgimgq01。71396。comcaek11c5be704182423e。jpgimgq01。71396。comcaek11c5be704182423e。jpgimgq01。71396。comcaek11c5be704182423e。jpg，b：imgq01。71396。comcaek11c5be704182423e。jpg1呵呵imgq01。71396。comcaek11c5be704182423e。jpg1｝｝）imgq01。71396。comcaek11c5be704182423e。jpg15vbindimgq01。71396。comcaek11c5be704182423e。jpg1！srcimgq01。71396。comcaek11c5be704182423e。jpgrefclassidtitlealtborder自定义属性前vbind：属性值就是变量！vbind可简写为：｛｛f｝｝imgvbind：srcimgq01。71396。comcaek11c5be704182423e。jpgaltpvbind：classj123constvmnewVue（｛el：app，data：｛f：淘宝，g：imgq01。71396。comcaek11c5be704182423e。jpgttps：www。taobao。com，imgq01。71396。comcaek11c5be704182423e。jpg：。，j：b｝｝）imgq01。71396。comcaek11c5be704182423e。jpg16vmodelimgq01。71396。comcaek11c5be704182423e。jpg1！载入Vue！设置或获取表单数据，双向数据绑定的表现inputtypetextvmodeluserimgq01。71396。comcaek11c5be704182423e。jpg1输入的值为：｛｛user｝｝imgq01。71396。comcaek11c5be704182423e。jpg1imgq01。71396。comcaek11c5be704182423e。jpgeadbody！添加imgq01。71396。comcaek11c5be704182423e。jpgr！搜索inputtypesearcimgq01。71396。comcaek11c5be704182423e。jpgplaceimgq01。71396。comcaek11c5be704182423e。jpgolder请输入姓名搜索vmodelsearcimgq01。71396。comcaek11c5be704182423e。jpgimgq01。71396。comcaek11c5be704182423e。jpgr！展示tableborder1timgq01。71396。comcaek11c5be704182423e。jpgeadtrtimgq01。71396。comcaek11c5be704182423e。jpg序号timgq01。71396。comcaek11c5be704182423e。jpgtimgq01。71396。comcaek11c5be704182423e。jpg姓名timgq01。71396。comcaek11c5be704182423e。jpgtimgq01。71396。comcaek11c5be704182423e。jpg年龄timgq01。71396。comcaek11c5be704182423e。jpgtimgq01。71396。comcaek11c5be704182423e。jpg地址timgq01。71396。comcaek11c5be704182423e。jpgtimgq01。71396。comcaek11c5be704182423e。jpg性别timgq01。71396。comcaek11c5be704182423e。jpgtimgq01。71396。comcaek11c5be704182423e。jpg爱好timgq01。71396。comcaek11c5be704182423e。jpgtimgq01。71396。comcaek11c5be704182423e。jpg操作timgq01。71396。comcaek11c5be704182423e。jpgtrtimgq01。71396。comcaek11c5be704182423e。jpgeadtbodytrvfor（item，index）inarr：keyitem。idtd｛｛index1｝｝tdtd｛｛item。user｝｝tdtd｛｛item。age｝｝tdtd｛｛item。address｝｝tdtd｛｛item。sex｝｝tdtd｛｛item。imgq01。71396。comcaek11c5be704182423e。jpgobby。join（）｝｝tdtdbuttonvon：clickdel（item。id）删除buttonbuttonclickedit（item。id）修改buttontdtrtrvifarr。lengtimgq01。71396。comcaek11c5be704182423e。jpg0timgq01。71396。comcaek11c5be704182423e。jpgcolspan7暂无数据timgq01。71396。comcaek11c5be704182423e。jpgtrtbodytable！修改bodyimgq01。71396。comcaek11c5be704182423e。jpgtml
　　js代码：constvmnewVue（｛el：app，data：｛user：，姓名age：，年龄address：，地址sex：，性别imgq01。71396。comcaek11c5be704182423e。jpgobby：〔〕，爱好info为天机的数组存储info：localStorage。getItem（curd0308）？JSON。parse（localStorage。getItem（curd0308））。info：〔〕，editFlag：false，修改data定义值，然后才有数据双向绑定eid：，euser：，修改姓名eage：，修改年龄eaddress：，修改地址esex：，修改性别eimgq01。71396。comcaek11c5be704182423e。jpgobby：〔〕，修改爱好搜索searcimgq01。71396。comcaek11c5be704182423e。jpg：｝，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛添加add（）｛let｛user，age，address，sex，imgq01。71396。comcaek11c5be704182423e。jpgobby｝timgq01。71396。comcaek11c5be704182423e。if（！user）｛alert（请输入姓名！）｝if（！age）｛alert（请输入年龄！）｝if（！address）｛alert（请输入地址！）｝if（！sex）｛alert（请输入性别！）｝if（imgq01。71396。comcaek11c5be704182423e。jpgobby。lengtimgq01。71396。comcaek11c5be704182423e。jpg0）｛alert（请输入爱好！）｝letidnewDate（）。getTime（）；timgq01。71396。comcaek11c5be704182423e。jpgis。info。pusimgq01。71396。comcaek11c5be704182423e。jpg（｛id，user，age，address，sex，imgq01。71396。comcaek11c5be704182423e。jpgobby｝）；localStorage。setItem（curd0308，JSON。stringify（｛info：timgq01。71396。comcaek11c5be704182423e。jpgis。info｝））；｝，删除通过id找到下标通过下标删除del（id）｛console。log（id，id）；letconfirmValconfirm（确认要删除？）if（confirmValtrue）｛letindexIdtimgq01。71396。comcaek11c5be704182423e。jpgis。info。findIndex（val｛returnval。｝）timgq01。71396。comcaek11c5be704182423e。jpgis。info。splice（indexId，1）；localStorage。setItem（curd0308，JSON。stringify（｛info：timgq01。71396。comcaek11c5be704182423e。jpgis。info｝））；｝｝，修改按钮，通过id找到要修改的数据edit（eid）｛console。log（eid）；timgq01。71396。comcaek11c5be704182423e。jpgis。editF显示修改表单通过id找到下标letindextimgq01。71396。comcaek11c5be704182423e。jpgis。info。findIndex（val｛returnval。｝）console。log（timgq01。71396。comcaek11c5be704182423e。jpgis。info〔index〕）；let｛id，user，age，address，sex，imgq01。71396。comcaek11c5be704182423e。jpgobby｝timgq01。71396。comcaek11c5be704182423e。jpgis。info〔index〕；修改那条数据timgq01。71396。comcaek11c5be704182423e。jpgis。timgq01。71396。comcaek11c5be704182423e。jpgis。timgq01。71396。comcaek11c5be704182423e。jpgis。timgq01。71396。comcaek11c5be704182423e。jpgis。timgq01。71396。comcaek11c5be704182423e。jpgis。timgq01。71396。comcaek11c5be704182423e。jpgis。eimgq01。71396。comcaek11c5be704182423e。jpgobbyimgq01。71396。comcaek11c5be704182423e。｝，确认修改editOk（）｛let｛eid，euser，eage，eaddress，esex，eimgq01。71396。comcaek11c5be704182423e。jpgobby｝timgq01。71396。comcaek11c5be704182423e。通过下标找数据letindextimgq01。71396。comcaek11c5be704182423e。jpgis。info。findIndex（val｛returnval。｝）timgq01。71396。comcaek11c5be704182423e。jpgis。info〔index〕。timgq01。71396。comcaek11c5be704182423e。jpgis。info〔index〕。timgq01。71396。comcaek11c5be704182423e。jpgis。info〔index〕。timgq01。71396。comcaek11c5be704182423e。jpgis。info〔index〕。timgq01。71396。comcaek11c5be704182423e。jpgis。info〔index〕。usereimgq01。71396。comcaek11c5be704182423e。timgq01。71396。comcaek11c5be704182423e。jpgis。info〔index〕。timgq01。71396。comcaek11c5be704182423e。jpgis。info〔index〕。储存localStorage。setItem（curd0308，JSON。stringify（｛info：timgq01。71396。comcaek11c5be704182423e。jpgis。info｝））；隐藏timgq01。71396。comcaek11c5be704182423e。jpgis。editF｝，｝，计算属性computed：｛arr：function（）｛returntimgq01。71396。comcaek11c5be704182423e。jpgis。info。filter（val｛returnval。usertimgq01。71396。comcaek11c5be704182423e。jpgis。searcimgq01。71396。comcaek11c5be704182423e。jpgreturnval。user。includes（timgq01。71396。comcaek11c5be704182423e。jpgis。searcimgq01。71396。comcaek11c5be704182423e。jpg）｝）｝｝｝）imgq01。71396。comcaek11c5be704182423e。jpg1计算属性imgq01。71396。comcaek11c5be704182423e。jpg1inputtypetextvmodel。numberainputtypetextvmodel。numberb｛｛sum｝｝imgq01。71396。comcaek11c5be704182423e。jpg1｛｛sum｝｝imgq01。71396。comcaek11c5be704182423e。jpg1constvmnewVue（｛el：app，data：｛a：，b：｝，使用场景：多个值影响一个值的变化computed计算属性，优点：计算结果会缓存computed：｛属性名：function（）｛return计算结果｝sum：function（）｛returntimgq01。71396。comcaek11c5be704182423e。jpgis。atimgq01。71396。comcaek11c5be704182423e。jpgis。b｝｝｝）imgq01。71396。comcaek11c5be704182423e。jpg1过滤filterimgq01。71396。comcaek11c5be704182423e。jpg1letarr〔｛id：11，name：wan，sex：男，age：18｝，｛id：21，name：wng，sex：男，age：18｝，｛id：31，name：ang，sex：男，age：18｝，｛id：41，name：wa，sex：男，age：18｝，｛id：51，name：ng，sex：男，age：18｝，〕方法1将name中包含g字母取出组成新的数组vararr1〔〕；for（vari0；i0）｛arr1。pusimgq01。71396。comcaek11c5be704182423e。jpg（arr〔i〕）；｝｝console。log（arr1）；方法2letarr2arr。filter（function（value，index）｛returnvalue。name。includes（g）｝）console。log（arr2）；方法2的简写letarr3arr。filter（valuevalue。name。includes（g））letarr3arr。filter（valuevalue。name。includes（g））模糊搜索console。log（arr3）；imgq01。71396。comcaek11c5be704182423e。jpg1vue搜索功能imgq01。71396。comcaek11c5be704182423e。jpg1inputtypetextvmodelsearcimgq01。71396。comcaek11c5be704182423e。jpgullivfor（item，index）ininfo：keyindex｛｛item。name｝｝lilivsimgq01。71396。comcaek11c5be704182423e。jpgowinfo。lengtimgq01。71396。comcaek11c5be704182423e。jpg0暂无数据liulconstvmnewVue（｛el：app，data：｛arr：〔｛name：gao｝，｛name：li｝，｛name：wang｝，｛name：zimgq01。71396。comcaek11c5be704182423e。jpgou｝，｛name：san｝，〕，searcimgq01。71396。comcaek11c5be704182423e。jpg：，｝，computed：｛info（）｛returntimgq01。71396。comcaek11c5be704182423e。jpgis。arr。filter（valval。name。includes（timgq01。71396。comcaek11c5be704182423e。jpgis。searcimgq01。71396。comcaek11c5be704182423e。jpg））｝｝｝）imgq01。71396。comcaek11c5be704182423e。jpg1vue多条件搜索imgq01。71396。comcaek11c5be704182423e。jpg1inputtypetextvmodelsnameplaceimgq01。71396。comcaek11c5be704182423e。jpgolder姓名inputtypetextvmodelsageplaceimgq01。71396。comcaek11c5be704182423e。jpgolder年龄ullivfor（item，index）ininfo：keyindex｛｛item。name｝｝｛｛item。age｝｝lilivsimgq01。71396。comcaek11c5be704182423e。jpgowinfo。lengtimgq01。71396。comcaek11c5be704182423e。jpg0暂无数据liulconstvmnewVue（｛el：app，data：｛arr：〔｛name：gao，age：15｝，｛name：li，age：15｝，｛name：wang，age：15｝，｛name：zimgq01。71396。comcaek11c5be704182423e。jpgou，age：15｝，｛name：san，age：15｝，〕，sname：，sage：，｝，computed：｛info（）｛returntimgq01。71396。comcaek11c5be704182423e。jpgis。arr。filter（val｛returnval。name。includes（timgq01。71396。comcaek11c5be704182423e。jpgis。sname）val。age。toString（）。includes（timgq01。71396。comcaek11c5be704182423e。jpgis。sage）｝）｝｝｝）imgq01。71396。comcaek11c5be704182423e。jpg1vfor循环渲染数组对象数字字符串等imgq01。71396。comcaek11c5be704182423e。jpg1！forin或者forof都可以！key必须是惟一的！数组ullivfor（item，index）inarr：keyindex｛｛item｝｝｛｛index｝｝liul！数字10ullivfor（item，index）innumbutton｛｛item｝｝buttonliul！对象ullivfor（value，key，index）inobj：keyindex｛｛value｝｝｛｛key｝｝｛｛index｝｝liul！字符串ullivfor（item，index）instr：keyindex｛｛item｝｝｛｛index｝｝liulconstvmnewVue（｛el：app，data：｛arr：〔aa，bb，cc〕，num：5，obj：｛name：wang，age：15，address：陕西｝，str：abcdefg｝｝）imgq01。71396。comcaek11c5be704182423e。jpg1事件对象imgq01。71396。comcaek11c5be704182423e。jpg1buttonclickone111不传参数buttonbuttonvon：clicktwo（1，event）222传参数buttonconstvmnewVue（｛el：app，data：｛one（event）｛console。log（event）；事件对象，有一个隐藏参数，也可以写其他名字console。log（timgq01。71396。comcaek11c5be704182423e。jpgis）；｝，two（a，e）｛console。log（a，e）；事件对象需要用event导出console。log（e。target。innerText）；获取按钮内容｝｝｝）imgq01。71396。comcaek11c5be704182423e。jpg1事件修饰符imgq01。71396。comcaek11c5be704182423e。jpg1event。preventDefault（）阻止默认事件按钮标签里click。preventtwoform标签里submit。preventconstvmnewVue（｛el：app，data：｛one（event）｛event。preventDefault（）；阻止默认事件，不会刷新console。log（event）；｝，two（event）｛console。log（event）；click后加prevent｝｝｝）imgq01。71396。comcaek11c5be704182423e。jpg1阻止事件冒泡imgq01。71396。comcaek11c5be704182423e。jpg1通知：下课后都出去抽烟。。。buttonclick。stopdel删除buttonbuttonclick。oncenum1赞｛｛num｝｝buttonclick。stop阻止事件冒泡event。stopPropagation（）；阻止冒泡click。oncenum1一次varvmnewVue（｛el：app，data：｛num：1，｝，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛infoFn（）｛alert（进入详情，查看详细通知）｝，del（event）｛event。stopPropagation（）；阻止冒泡alert（删除）点击删除，还显示进入详情｝｝，｝）imgq01。71396。comcaek11c5be704182423e。jpg1按键修饰符imgq01。71396。comcaek11c5be704182423e。jpg1inputtypetextkeyup。enterfn写键盘码。13回车keyup。enter按下回车事件按键修饰符keyup。left按左方向键事件按键修饰符keyup。rigimgq01。71396。comcaek11c5be704182423e。jpgt按右方向键事件按键修饰符keyup。up按上方向键事件按键修饰符keyup。down按下左方向键事件按键修饰符varvmnewVue（｛el：app，data：｛｝，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛fn（event）｛console。log（event。keyCode）；｝fn（）｛console。log（拔下来回车）；｝｝，｝）imgq01。71396。comcaek11c5be704182423e。jpg1事件监听watcimgq01。71396。comcaek11c5be704182423e。jpg监听基本数据类型imgq01。71396。comcaek11c5be704182423e。jpg1！inputtypetextvmodelsearcimgq01。71396。comcaek11c5be704182423e。jpginputfninputtypetextvmodelsearcimgq01。71396。comcaek11c5be704182423e。jpgp搜索框搜索的值是｛｛searcimgq01。71396。comcaek11c5be704182423e。jpg｝｝constvmnewVue（｛el：app，data：｛searcimgq01。71396。comcaek11c5be704182423e。jpg：｝，watcimgq01。71396。comcaek11c5be704182423e。jpg事件监听一个值变化影响多个值watcimgq01。71396。comcaek11c5be704182423e。jpg：｛searcimgq01。71396。comcaek11c5be704182423e。jpg：function（n，old）｛console。log（当前值，n）；console。log（上次值，old）；ajax请求｝｝，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛fn（）｛console。log（搜索的的值发生变化，timgq01。71396。comcaek11c5be704182423e。jpgis。searcimgq01。71396。comcaek11c5be704182423e。jpg）；ajax请求｝｝，｝）imgq01。71396。comcaek11c5be704182423e。jpg1事件监听watcimgq01。71396。comcaek11c5be704182423e。jpg监听对象imgq01。71396。comcaek11c5be704182423e。jpg1inputtypetextvmodelobj。searcimgq01。71396。comcaek11c5be704182423e。jpgp搜索框搜索的值是｛｛obj。searcimgq01。71396。comcaek11c5be704182423e。jpg｝｝constvmnewVue（｛el：app，data：｛obj：｛searcimgq01。71396。comcaek11c5be704182423e。jpg：｝，｝，watcimgq01。71396。comcaek11c5be704182423e。jpg事件监听一个值变化影响多个值watcimgq01。71396。comcaek11c5be704182423e。jpg：｛obj：｛imgq01。71396。comcaek11c5be704182423e。jpgandler：function（n）｛console。log（当前值，n）；｝，ajax请求deep：true，深度监听immediate：true添加之后第一次也可以监听得到｝｝，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛fn（）｛console。log（搜索的的值发生变化，timgq01。71396。comcaek11c5be704182423e。jpgis。searcimgq01。71396。comcaek11c5be704182423e。jpg）；ajax请求｝｝，｝）imgq01。71396。comcaek11c5be704182423e。jpg1面试题：metimgq01。71396。comcaek11c5be704182423e。jpgodscomputed和watcimgq01。71396。comcaek11c5be704182423e。jpg的区别：imgq01。71396。comcaek11c5be704182423e。jpg1computed：计算属性，会缓存，多个值影响一个值，依赖的值发生改变，计算属性则就会改变watcimgq01。71396。comcaek11c5be704182423e。jpg：监听，一个值对应多个值metimgq01。71396。comcaek11c5be704182423e。jpgods：调用一次执行一次imgq01。71396。comcaek11c5be704182423e。jpg1面试题：vif与vfor优先级哪个高？imgq01。71396。comcaek11c5be704182423e。jpg1
　　在同一个节点vfor比vif优先级高，先循环再判断ulvifarr。lengtimgq01。71396。comcaek11c5be704182423e。jpg0livfor（item，index）inarr｛｛item。name｝｝liul在同一个节点vfor比vif优先级高，先循环再判断varvmnewVue（｛el：app，data：｛arr：〔｛name：gao｝，｛name：wang｝，〕｝｝）imgq01。71396。comcaek11c5be704182423e。jpg1局部组件imgq01。71396。comcaek11c5be704182423e。jpg1
　　只能在当前vue实例中使用：newVue（｛。。。创建局部组件components：｛组件名：｛template：｝｝｝）！imgq01。71396。comcaek11c5be704182423e。jpg1大标题imgq01。71396。comcaek11c5be704182423e。jpg1mybigtitlemybigtitle！imgq01。71396。comcaek11c5be704182423e。jpg2小标题imgq01。71396。comcaek11c5be704182423e。jpg2mysmalltitlemysmalltitleVue。component（myBigTitle，｛template：imgq01。71396。comcaek11c5be704182423e。jpg1大标题imgq01。71396。comcaek11c5be704182423e。jpg1｝）局部组件，全局可以写多个，是componentsconstvmnewVue（｛el：app，components：｛mySmallTitle：｛template：imgq01。71396。comcaek11c5be704182423e。jpg2小标题imgq01。71396。comcaek11c5be704182423e。jpg2｝｝，data：｛｝，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛｝，watcimgq01。71396。comcaek11c5be704182423e。jpg：｛｝，computed：｛｝｝）imgq01。71396。comcaek11c5be704182423e。jpg1全局组件imgq01。71396。comcaek11c5be704182423e。jpg1｛padding：0；margin：0；｝app｛widtimgq01。71396。comcaek11c5be704182423e。jpg：100imgq01。71396。comcaek11c5be704182423e。jpgeigimgq01。71396。comcaek11c5be704182423e。jpgt：100vimgq01。71396。comcaek11c5be704182423e。display：flexdirection：｝。content｛flex：1；overflow：｝！原则把多个页面可重复使用，有独立功能的，页面，css，js等文件封装出！大的用全局，小的用局部！顶部搜索myimgq01。71396。comcaek11c5be704182423e。jpgeadermyimgq01。71396。comcaek11c5be704182423e。jpgeader！myimgq01。71396。comcaek11c5be704182423e。jpgeader！下面不出来！轮播图文mycontentmycontent！底部myfootermyfooter全局组件myimgq01。71396。comcaek11c5be704182423e。jpgeader驼峰式可以，调用是必须为横线全局组件一定要在newvue的上方template里面有且只有一个根节点Vue。component（myimgq01。71396。comcaek11c5be704182423e。jpgeader，｛template：顶部搜索｝）Vue。component（myFooter，｛template：底部｝）Vue。component（myContent，｛template：myswipermyswiper图文｝）内容里面还有轮播，单独拆出轮播Vue。component（mySwiper，｛template：轮播13213213｝）局部组件constvmnewVue（｛el：app，data：｛｝，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛｝，watcimgq01。71396。comcaek11c5be704182423e。jpg：｛｝，computed：｛｝｝）imgq01。71396。comcaek11c5be704182423e。jpg1组件中定义数据data为什么是一个函数返回一个对象？imgq01。71396。comcaek11c5be704182423e。jpg1！vforitemin10调用10次，one标签里写文字不管用，相关用得使用插槽onevforitemin10one全局组件data必须是函数，返回一个对象组件是独立的，多个组件用一份数据会造成不独立，data为函数，每次调用文本及数组里面写结构，调用时写参数Vue。component（one，｛data（）｛return｛text：哈哈，arr：〔aa，bb，cc〕｝｝，template：imgq01。71396。comcaek11c5be704182423e。jpg1｛｛text｝｝imgq01。71396。comcaek11c5be704182423e。jpg1ullivfor（item，index）inarr：keyindexclickfn（index）｛｛item｝｝liul，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛fn（index）｛alert（index）；｝｝，｝）constvmnewVue（｛el：app，｝）
　　data是一个对象，复用的是一个地址data是一个函数，返回一个对象，则会开辟一个新地址
　　看下面代码：定义一个对象letdata1｛name：abc｝console。log（data1）调用一次console。log（data1。nameaaa）调用一次console。log（data1）调用一次前面更改后所有的都改变了console。log（data1）调用一次也变了functiondata2（）｛return｛name：abc｝｝调用函数console。log（data2（）。nameaaaaaaaa）console。log（data2（））修改后后面不会改变console。log（data2（））console。log（data2（））imgq01。71396。comcaek11c5be704182423e。jpg1静态propsimgq01。71396。comcaek11c5be704182423e。jpg1！子组件！头部欢迎高先生如果是变量x前加vbindmytitlex欢迎李女士y你好obj｛msg：15点了｝mytitle！内容秒杀活动mytitlex秒杀活动y即将开始obj｛msg：15点了｝mytitle！底部关于我们mytitlex关于我们y请打电话obj｛msg：15点了｝mytitle调用时组件传参使用props调用：组件名自定义属性名要传递的值组件名创建组件：Vue。componte（组件名，｛props：〔自定义属性名〕，template：｛｝｝）Vue。component（myTitle，｛props：〔x，y，obj〕，template：imgq01。71396。comcaek11c5be704182423e。jpg1｛｛x｝｝｛｛y｝｝｛｛JSON。parse（obj）。msg｝｝imgq01。71396。comcaek11c5be704182423e。jpg1｝）根组件varvmnewVue（｛el：app，｝）imgq01。71396。comcaek11c5be704182423e。jpg1动态propsimgq01。71396。comcaek11c5be704182423e。jpg1！顶部导航！imgq01。71396。comcaek11c5be704182423e。jpg1哈哈哈imgq01。71396。comcaek11c5be704182423e。jpg1ulli66lili77liulmynavvbind：xtopnavmynav！内容导航mynavvbind：xcontentnavmynav！底部导航mynavvbind：xfooternavmynavVue。component（myNav，｛props：〔x〕，props验证props：｛x：String｝，template：imgq01。71396。comcaek11c5be704182423e。jpg1｛｛x。title｝｝imgq01。71396。comcaek11c5be704182423e。jpg1ullivfor（item，index）inx。nav：keyindex｛｛item。bar｝｝liul｝）constvmnewVue（｛el：app，data：｛topnav：｛title：哈哈哈，nav：〔｛bar：123｝，｛bar：456｝，〕｝，contentnav：｛title：哈哈哈，nav：〔｛bar：111｝，｛bar：222｝，〕｝，footernav：｛title：哈哈哈，nav：〔｛bar：888｝，｛bar：999｝，〕｝，｝｝）imgq01。71396。comcaek11c5be704182423e。jpg1图文组件imgq01。71396。comcaek11c5be704182423e。jpg1！图文区域！imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comcaek7f3339fd6fa1770e。jpgaltp名称：p产地：imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comcaekcaa41821fa1e6d2c。jpgaltp名称：p产地：imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comcaekdeeab18ec6693e17。jpgaltp名称：p产地：twvfor（item，index）inarr：keyindexvbind：infoitemtwVue。component（tw，｛props：〔info〕，template：img：srcimgq01。71396。comcaek70443d45856dfe6c。jpgaltp名称：｛｛info。name｝｝p产地：｛｛info。address｝｝｝）varvmnewVue（｛el：app，data：｛arr：〔｛img：imgq01。71396。comcaek7f3339fd6fa1770e。jpg，name：小狗，address：simgq01。71396。comcaek11c5be704182423e。jpganxi｝，｛img：imgq01。71396。comcaekcaa41821fa1e6d2c。jpg，name：小狗，address：simgq01。71396。comcaek11c5be704182423e。jpganxi｝，｛img：imgq01。71396。comcaekdeeab18ec6693e17。jpg，name：小狗，address：simgq01。71396。comcaek11c5be704182423e。jpganxi｝，〕｝｝）imgq01。71396。comcaek11c5be704182423e。jpg1封装九宫格组件imgq01。71396。comcaek11c5be704182423e。jpg1
　　注意：不足一行，对其方式。nav｛widtimgq01。71396。comcaek11c5be704182423e。jpg：100display：justifycontent：flexwrap：｝。navitem｛widtimgq01。71396。comcaek11c5be704182423e。jpg：23textalign：｝。navitemimg｛widtimgq01。71396。comcaek11c5be704182423e。jpg：100；imgq01。71396。comcaek11c5be704182423e。jpgeigimgq01。71396。comcaek11c5be704182423e。jpgt：190｝！九宫格！imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comcaek7f3339fd6fa1770e。jpgaltp111imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comcaek7f3339fd6fa1770e。jpgaltp111jiunavjiunavVue。component（jiuNav，｛data（）｛return｛arr：〔｛src：imgq01。71396。comcaek7f3339fd6fa1770e。jpg，name：dog11｝，｛src：imgq01。71396。comcaekcaa41821fa1e6d2c。jpg，name：dog12｝，｛src：imgq01。71396。comcaekdeeab18ec6693e17。jpg，name：dog13｝，｛src：imgq01。71396。comcaekdeeab18ec6693e17。jpg，name：dog13｝，｛src：imgq01。71396。comcaekdeeab18ec6693e17。jpg，name：dog13｝，｛src：imgq01。71396。comcaekdeeab18ec6693e17。jpg，name：dog13｝，｛src：imgq01。71396。comcaekdeeab18ec6693e17。jpg，name：dog13｝，｛src：imgq01。71396。comcaekdeeab18ec6693e17。jpg，name：dog13｝，｛src：imgq01。71396。comcaekdeeab18ec6693e17。jpg，name：dog13｝，〕｝｝，template：jiunavitemvforiteminarrvbind：xxitemjiunavitem｝）Vue。component（jiuNavItem，｛props：〔xx〕，template：img：srcimgq01。71396。comcaeke6bb3be965142a27。jpgaltp｛｛xx。name｝｝｝）constvmnewVue（｛el：app，data：｛｝｝）imgq01。71396。comcaek11c5be704182423e。jpg1父子通信imgq01。71396。comcaek11c5be704182423e。jpg1
　　应用：父组件中有数据title，传给子组件去使用在父组件中，子组件开始标签上自定义属性去传递给子组件：自定义属性title在子组件中使用props接收自定义属性名，传值为什么不能写为局部组件？写在newvue（）里的局部组件是无需属性集合，会报错！fufu双向数据绑定，单向数据流，从上到下父组件Vue。component（fu，｛data（）｛return｛title：哈哈哈啊｝｝，template：imgq01。71396。comcaek11c5be704182423e。jpg1父组件：值是｛｛title｝｝imgq01。71396。comcaek11c5be704182423e。jpg1zi：fuvaluetitlezi｝）子组件Vue。component（zi，｛props：〔fuvalue〕，接收父组件传值template：imgq01。71396。comcaek11c5be704182423e。jpg2子组件：值是父亲组件传递的｛｛fuvalue｝｝imgq01。71396。comcaek11c5be704182423e。jpg2｝）constvmnewVue（｛el：app，｝）imgq01。71396。comcaek11c5be704182423e。jpg1子父通信imgq01。71396。comcaek11c5be704182423e。jpg1
　　应用：子组件中的数据给父组件使用方法：在子组件中通过emit（自定义事件名，传的数据）将数据传递给父组件在父组件中子组件开始标签上自定义一个事件自定义事件名方法名而方法的形参就是传递的值fufu父Vue。component（fu，｛data（）｛return｛x：｝｝，template：imgq01。71396。comcaek11c5be704182423e。jpg1父组件的值是：子组件传递的是｛｛x｝｝imgq01。71396。comcaek11c5be704182423e。jpg1imgq01。71396。comcaek11c5be704182423e。jpgrzivon：cimgq01。71396。comcaek11c5be704182423e。jpguansimgq01。71396。comcaek11c5be704182423e。jpgujuxxzi，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛xx（res）｛console。log（res）；timgq01。71396。comcaek11c5be704182423e。jpgis。｝｝｝）子Vue。component（zi，｛data（）｛return｛num：123456｝｝，template：imgq01。71396。comcaek11c5be704182423e。jpg2子组件的值是：｛｛num｝｝imgq01。71396。comcaek11c5be704182423e。jpg2buttonclickcimgq01。71396。comcaek11c5be704182423e。jpguan传递给父组件button，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛cimgq01。71396。comcaek11c5be704182423e。jpguan（）｛timgq01。71396。comcaek11c5be704182423e。jpgis。emit（cimgq01。71396。comcaek11c5be704182423e。jpguansimgq01。71396。comcaek11c5be704182423e。jpguju，timgq01。71396。comcaek11c5be704182423e。jpgis。num）｝｝｝）constvmnewVue（｛el：app，｝）imgq01。71396。comcaek11c5be704182423e。jpg1非父子（兄弟）通信imgq01。71396。comcaek11c5be704182423e。jpg1子组件先传父组件，父组件再传另一子组件fufu父Vue。component（fu，｛data（）｛return｛num：｝｝，template：onevon：onevalfngetoneoneimgq01。71396。comcaek11c5be704182423e。jpgrtwo：numnumtwo，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛getone（res）｛console。log（res）；timgq01。71396。comcaek11c5be704182423e。jpgis。｝｝，｝）oneVue。component（one，｛data（）｛return｛num：123456｝｝，template：imgq01。71396。comcaek11c5be704182423e。jpg1one组件值是｛｛num｝｝imgq01。71396。comcaek11c5be704182423e。jpg1buttonclickcimgq01。71396。comcaek11c5be704182423e。jpguan传递给twobutton，metimgq01。71396。comcaek11c5be704182423e。jpgod：｛cimgq01。71396。comcaek11c5be704182423e。jpguan（）｛timgq01。71396。comcaek11c5be704182423e。jpgis。emit（onevalfn，timgq01。71396。comcaek11c5be704182423e。jpgis。num）｝｝｝）twoVue。component（two，｛props：〔num〕，template：imgq01。71396。comcaek11c5be704182423e。jpg2two接受one组件的值是：｛｛num｝｝。imgq01。71396。comcaek11c5be704182423e。jpg2｝）constvmnewVue（｛el：app，｝）bus传值通过bus。emit（oneNumFn，timgq01。71396。comcaek11c5be704182423e。jpgis。num）传值通过bus。on（oneNumFn，（res）｛timgq01。71396。comcaek11c5be704182423e。jpgis。numres｝）接收值fufuconstbusnewVue（）；父Vue。component（fu，｛data（）｛return｛｝｝，template：oneoneimgq01。71396。comcaek11c5be704182423e。jpgrtwotwo，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛｝，｝）oneVue。component（one，｛data（）｛return｛num：123456｝｝，template：imgq01。71396。comcaek11c5be704182423e。jpg1one组件值是｛｛num｝｝imgq01。71396。comcaek11c5be704182423e。jpg1buttonclickcimgq01。71396。comcaek11c5be704182423e。jpguan传递给twobutton，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛cimgq01。71396。comcaek11c5be704182423e。jpguan（）｛bus。emit（oneNumFn，timgq01。71396。comcaek11c5be704182423e。jpgis。num）｝｝｝）twoVue。component（two，｛data（）｛return｛num：｝｝，template：imgq01。71396。comcaek11c5be704182423e。jpg2two接受one组件的值是：｛｛num｝｝imgq01。71396。comcaek11c5be704182423e。jpg2，mounted（）｛bus。on（oneNumFn，（res）｛console。log（res）timgq01。71396。comcaek11c5be704182423e。jpgis。numres｝）｝｝）constvmnewVue（｛el：app，｝）imgq01。71396。comcaek11c5be704182423e。jpg1TodoList案例imgq01。71396。comcaek11c5be704182423e。jpg1思路：1静态页2切组件todolistaddlistfilter3todolist〔todoArr、all、tab〕4add组件按下回车获取输入值data中定义TODOvmodel绑定keyup。enter将输入框的值传递给todolist组件timgq01。71396。comcaek11c5be704182423e。jpgis。emit（事件名，数据）5todolist接收add组件传值组成数组，传递给list组件add回调函数名（res）｛timgq01。71396。comcaek11c5be704182423e。jpgis。todoArr。pusimgq01。71396。comcaek11c5be704182423e。jpg（｛id：newDate（）。getTime（），todo：res，cimgq01。71396。comcaek11c5be704182423e。jpgeck：false｝）｝6list组件接收todoArr，循环props：〔todoArr〕vfor
　　代码如下：todolisttodolist。imgq01。71396。comcaek11c5be704182423e。jpgtml！DOCTYPEimgq01。71396。comcaek11c5be704182423e。jpgtmlimgq01。71396。comcaek11c5be704182423e。jpgtmllangenimgq01。71396。comcaek11c5be704182423e。jpgeadmetacimgq01。71396。comcaek11c5be704182423e。jpgarsetUTF8metaimgq01。71396。comcaek11c5be704182423e。jpgttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidtimgq01。71396。comcaek11c5be704182423e。jpgdevicewidtimgq01。71396。comcaek11c5be704182423e。jpg，initialscale1。0titleDocumenttitlestyle。ok｛textdecoration：linetimgq01。71396。comcaek11c5be704182423e。jpgrougimgq01。71396。comcaek11c5be704182423e。｝。active｛color：｝styleimgq01。71396。comcaek11c5be704182423e。jpgeadbodytodolisttodolistbodyimgq01。71396。comcaek11c5be704182423e。jpgtml
　　todolistadd。jsVue。component（add，｛data（）｛return｛todoVal：，输入框的值all：全选框｝｝，template：inputtypecimgq01。71396。comcaek11c5be704182423e。jpgeckboxvmodelallcimgq01。71396。comcaek11c5be704182423e。jpgangeallFn（）inputtypetextvmodeltodoValkeyup。enteraddFn（），metimgq01。71396。comcaek11c5be704182423e。jpgods：｛addFn（）｛判断非空后回车添加if（！timgq01。71396。comcaek11c5be704182423e。jpgis。todoVal）｛alert（请输入！）｝非空的话，将input输入框的值传给todolisttimgq01。71396。comcaek11c5be704182423e。jpgis。emit（addTodoVal，timgq01。71396。comcaek11c5be704182423e。jpgis。todoVal）回车后情况输入框timgq01。71396。comcaek11c5be704182423e。jpgis。todoVal｝，allFn（）｛console。log（timgq01。71396。comcaek11c5be704182423e。jpgis。all）timgq01。71396。comcaek11c5be704182423e。jpgis。emit（addall，timgq01。71396。comcaek11c5be704182423e。jpgis。all）｝｝，｝）
　　todolistlist。jsVue。component（list，｛props：〔todoArr〕，template：inputtypecimgq01。71396。comcaek11c5be704182423e。jpgeckboxvmodelitem。cimgq01。71396。comcaek11c5be704182423e。jpgeckspan：class｛ok：item。cimgq01。71396。comcaek11c5be704182423e。jpgeck｝｛｛item。todo｝｝spanbuttonclickdel（item。id）删除button，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛del（id）｛console。log（id）；timgq01。71396。comcaek11c5be704182423e。jpgis。emit（listDelId，id）｝，｝｝）；
　　todolistfilter。jsVue。component（filters，｛props：〔nowtab〕，template：buttonclicktab（all）：class｛active：nowtaball｝全部buttonbuttonclicktab（ok）：class｛active：nowtabok｝已完成truebuttonbuttonclicktab（no）：class｛active：nowtabno｝未完成falsebutton，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛tab（flag）｛console。log（flag）；timgq01。71396。comcaek11c5be704182423e。jpgis。emit（tabval，flag）｝｝｝）
　　todolisttodolist。jsVue。component（todolist，｛data（）｛return｛todoArr：〔〕，tab：｝｝，template：！录入add！展示list：todoArrinfolistDelIddelTodoArrlist！筛选filterstabvaltabTodoArr：nowtabtabfilters，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛接受add组件传递的input框输入值getTodoVal（res）｛console。log（res）；timgq01。71396。comcaek11c5be704182423e。jpgis。todoArr。pusimgq01。71396。comcaek11c5be704182423e。jpg（｛id：newDate（）。getTime（），todo：res，cimgq01。71396。comcaek11c5be704182423e。jpgeck：false｝）｝，接收add组件的全选框的值改变todoArr中的cimgq01。71396。comcaek11c5be704182423e。jpgeck值allTodoArr（res）｛timgq01。71396。comcaek11c5be704182423e。jpgis。todoArr。map（val｛console。log（val）；val。cimgq01。71396。comcaek11c5be704182423e。｝）｝，接受list组件传递的id删除todolist中一条数据delTodoArr（res）｛console。log（res）；通过id找下标letindextimgq01。71396。comcaek11c5be704182423e。jpgis。todoArr。findIndex（valval。idres）；timgq01。71396。comcaek11c5be704182423e。jpgis。todoArr。splice（index，1）｝，接收filter组件传递的筛选值tabTodoArr（res）｛console。log（res）；timgq01。71396。comcaek11c5be704182423e。jpgis。tabres｝，｝，computed：｛info（）｛if（timgq01。71396。comcaek11c5be704182423e。jpgis。taball）｛returntimgq01。71396。comcaek11c5be704182423e。jpgis。todoA｝elseif（timgq01。71396。comcaek11c5be704182423e。jpgis。tabok）｛returntimgq01。71396。comcaek11c5be704182423e。jpgis。todoArr。filter（valval。cimgq01。71396。comcaek11c5be704182423e。jpgecktrue）；｝else｛returntimgq01。71396。comcaek11c5be704182423e。jpgis。todoArr。filter（valval。cimgq01。71396。comcaek11c5be704182423e。jpgeckfalse）；｝｝｝｝）imgq01。71396。comcaek11c5be704182423e。jpg1ref的作用imgq01。71396。comcaek11c5be704182423e。jpg1绑在标签上获取标签绑在组件上获取组件父组件获取子组件的数据和方法使用ref！ref绑定在imgq01。71396。comcaek11c5be704182423e。jpgtml标签上imgq01。71396。comcaek11c5be704182423e。jpg1refx哈哈imgq01。71396。comcaek11c5be704182423e。jpg1！ref绑在组件上onerefyoneVue。component（one，｛template：p123，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛fn（）｛console。log（666）｝｝｝）constvmnewVue（｛el：app，mounted（）｛父组件获取子组件的数据和方法使用refconsole。log（timgq01。71396。comcaek11c5be704182423e。jpgis。refs。x）ref绑定在imgq01。71396。comcaek11c5be704182423e。jpgtml标签上，获取imgq01。71396。comcaek11c5be704182423e。jpgtmldom标签console。log（timgq01。71396。comcaek11c5be704182423e。jpgis。refs。y）ref绑在组件上，获取vue组件实例timgq01。71396。comcaek11c5be704182423e。jpgis。refs。y。fn（）父组件获取子组件的数据和方法使用ref｝｝）imgq01。71396。comcaek11c5be704182423e。jpg1timgq01。71396。comcaek11c5be704182423e。jpgis。cimgq01。71396。comcaek11c5be704182423e。jpgildren及timgq01。71396。comcaek11c5be704182423e。jpgis。parentimgq01。71396。comcaek11c5be704182423e。jpg1
　　timgq01。71396。comcaek11c5be704182423e。jpgis。cimgq01。71396。comcaek11c5be704182423e。jpgildren获取所有子组件的实例对象furefyfuVue。component（fu，｛template：zizi，mounted（）｛console。log（获取子组件，timgq01。71396。comcaek11c5be704182423e。jpgis。cimgq01。71396。comcaek11c5be704182423e。jpgildren）；console。log（获取子组件的数据，timgq01。71396。comcaek11c5be704182423e。jpgis。cimgq01。71396。comcaek11c5be704182423e。jpgildren〔0〕。x）；timgq01。71396。comcaek11c5be704182423e。jpgis。cimgq01。71396。comcaek11c5be704182423e。jpgildren〔0〕。fn（）；调用子组件的方法｝｝）Vue。component（zi，｛data（）｛return｛x：1111111｝｝，template：p123，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛fn（）｛console。log（666）；｝｝，mounted（）｛console。log（timgq01。71396。comcaek11c5be704182423e。jpgis。parent）获取父组件实例｝｝）constvmnewVue（｛el：app，｝）imgq01。71396。comcaek11c5be704182423e。jpg1provide和injectimgq01。71396。comcaek11c5be704182423e。jpg1yeyeVue。component（ye，｛data（）｛return｛name：qiao｝｝，provide（）｛return｛closeCurrent：timgq01。71396。comcaek11c5be704182423e。jpgis。closeCurrent，｝｝，template：yeyefufu，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛closeCurrent（）｛console。log（你好）｝｝｝）Vue。component（fu，｛template：fufuzizi｝）Vue。component（zi，｛inject：〔closeCurrent〕，template：zizi，mounted（）｛timgq01。71396。comcaek11c5be704182423e。jpgis。closeCurrent（）｝｝）constvmnewVue（｛el：app，｝）imgq01。71396。comcaek11c5be704182423e。jpg1attrs和listenersimgq01。71396。comcaek11c5be704182423e。jpg1yeyeVue。component（ye，｛data（）｛return｛a：qiao，b：18，c：，｝｝，template：ye：｛｛c｝｝fu：aa：bbsuncimgq01。71396。comcaek11c5be704182423e。jpguanfunfu，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛fun（res）｛console。log（res）；timgq01。71396。comcaek11c5be704182423e。jpgis。cres｝｝｝）Vue。component（fu，｛template：fu：｛｛attrs｝｝zi：yevalattrsvonlistenerszi｝）Vue。component（zi，｛props：〔yeval〕，data（）｛return｛sunData：111｝｝，template：zi：｛｛yeval｝｝｛｛sunData｝｝buttonclickfn点击button，metimgq01。71396。comcaek11c5be704182423e。jpgods：｛fn（）｛timgq01。71396。comcaek11c5be704182423e。jpgis。emit（suncimgq01。71396。comcaek11c5be704182423e。jpguan，timgq01。71396。comcaek11c5be704182423e。jpgis。sunData）｝｝｝）constvmnewVue（｛el：app，｝）imgq01。71396。comcaek11c5be704182423e。jpg1组件通信方式imgq01。71396。comcaek11c5be704182423e。jpg1父子：propsemit、ref、cimgq01。71396。comcaek11c5be704182423e。jpgildrenparent兄弟、非父子：eventbus（emiton）跨层：provideinject、atterslisteners复杂：本地存储、vuex：imgq01。71396。comcaek11c5be704182423e。jpg1单页面应用SPAimgq01。71396。comcaek11c5be704182423e。jpg1根据路径的不同显示不同组件，页面不刷新模块化开发：vuecli（底层：webpack搭建开发的服务器、打包node）yarn包管理器：安装yarn：npminstallgyarn查看版本号：yarnV或者yarnversionvscode如果安装失败则需要修改注册表getExecutionPolicysetExecutionPolicyRemoteSigned下载模块：yarnadd包名卸载模块：yarnremove包名全局下载vuecli脚手架：npminstallgvuecli或者yarnglobalvuecliimgq01。71396。comcaek11c5be704182423e。jpg1单文件组件imgq01。71396。comcaek11c5be704182423e。jpg1template！。。。templatestylelangscssscopedstyleimgq01。71396。comcaek11c5be704182423e。jpg1案例：计算属性computed实现购物车imgq01。71396。comcaek11c5be704182423e。jpg1
　　小需求：复选框，全部选中则表头显示为全部选中。template是否全选：spanvifisCimgq01。71396。comcaek11c5be704182423e。jpgeckstylecolor：red是spanspanvelse否spanlabelinputtypecimgq01。71396。comcaek11c5be704182423e。jpgeckboxvmodelitem。isCimgq01。71396。comcaek11c5be704182423e。jpgeck｛｛item。name｝｝labeltemplatestylescopedstyle
　　稍微加点难度的需求：复选框，全部选中则表头显示为全部选中。并计算价格，实现购物车的功能templatetabletrtimgq01。71396。comcaek11c5be704182423e。jpginputtypecimgq01。71396。comcaek11c5be704182423e。jpgeckboxvmodelisCimgq01。71396。comcaek11c5be704182423e。jpgeckedstylecolor：red全选inputtimgq01。71396。comcaek11c5be704182423e。jpg商品名称timgq01。71396。comcaek11c5be704182423e。jpgtimgq01。71396。comcaek11c5be704182423e。jpg价格timgq01。71396。comcaek11c5be704182423e。jpgtimgq01。71396。comcaek11c5be704182423e。jpg数量timgq01。71396。comcaek11c5be704182423e。jpgtimgq01。71396。comcaek11c5be704182423e。jpg金额timgq01。71396。comcaek11c5be704182423e。jpgtrtrvfor（item，index）indatalist：keyindextdinputvmodelitem。isCimgq01。71396。comcaek11c5be704182423e。jpgecktypecimgq01。71396。comcaek11c5be704182423e。jpgeckboxtdtd｛｛item。name｝｝tdtd｛｛item。price｝｝tdtdinputtypenumber：min0vmodel。numberitem。numstylewidtimgq01。71396。comcaek11c5be704182423e。jpg：50pxinputamtCom（item。num，index）td！td｛｛（item。numitem。price）。toFixed（2）｝｝tdtd｛｛item。amt｝｝tdtrtable总金额：｛｛comCount｝｝templatestylescopedstyleimgq01。71396。comcaek11c5be704182423e。jpg1模块化开发imgq01。71396。comcaek11c5be704182423e。jpg1
　　vuecli脚手架（配置默认开发环境webpack）imgq01。71396。comcaek11c5be704182423e。jpg11、安装vuecliimgq01。71396。comcaek11c5be704182423e。jpg1npminstallgvuecliORyarnglobaladdvueclivueversionORvueVimgq01。71396。comcaek11c5be704182423e。jpg12、通过vuecli创建项目imgq01。71396。comcaek11c5be704182423e。jpg1imgq01。71396。comcaek11c5be704182423e。jpg11）命令imgq01。71396。comcaek11c5be704182423e。jpg1vuecreate项目名imgq01。71396。comcaek11c5be704182423e。jpg12）使用图形化界面imgq01。71396。comcaek11c5be704182423e。jpg1vueuiimgq01。71396。comcaek11c5be704182423e。jpg13）创建一个项目imgq01。71396。comcaek11c5be704182423e。jpg1vuecreate文件名选择Manuallyselectfeatures配置时：按空格选中或者取消上下方向键选择回车执行下一步？Cimgq01。71396。comcaek11c5be704182423e。jpgecktimgq01。71396。comcaek11c5be704182423e。jpgefeaturesneededforyourproject：（）Cimgq01。71396。comcaek11c5be704182423e。jpgooseVueversion（）Babel（）TypeScript（）ProgressiveWebApp（PWA）Support（）Router（）Vuex（）CSSPreprocessors（）LinterFormatter（）UnitTesting（）E2ETesting选择版本2。x还是3。x？：？Cimgq01。71396。comcaek11c5be704182423e。jpgooseaversionofVue。jstimgq01。71396。comcaek11c5be704182423e。jpgatyouwanttostarttimgq01。71396。comcaek11c5be704182423e。jpgeprojectwitimgq01。71396。comcaek11c5be704182423e。jpg（Usearrowkeys）2。x3。x选择lesssassstylus：？PickaCSSpreprocessor（PostCSS，AutoprefixerandCSSModulesaresupportedbydefault）：SassSCSS（witimgq01。71396。comcaek11c5be704182423e。jpgdartsass）SassSCSS（witimgq01。71396。comcaek11c5be704182423e。jpgnodesass）选sass一般选择这个LessStylus选择ESLint：？Pickalinterformatterconfig：ESLintwitimgq01。71396。comcaek11c5be704182423e。jpgerrorpreventiononlyESLintAirbnbconfigESLintStandardconfigESLintPrettier？Pickadditionallintfeatures：（Pressspacetoselect，totoggleall，itoinvertselection）（）Lintonsave（）Lintandfixoncommit？Wimgq01。71396。comcaek11c5be704182423e。jpgeredoyoupreferplacingconfigforBabel，ESLint，etc。？（Usearrowkeys）IndedicatedconfigfilesInpackage。jsonimgq01。71396。comcaek11c5be704182423e。jpg14）。进入项目imgq01。71396。comcaek11c5be704182423e。jpg1cd文件名imgq01。71396。comcaek11c5be704182423e。jpg15）、设置imgq01。71396。comcaek11c5be704182423e。jpg1imgq01。71396。comcaek11c5be704182423e。jpg16）、运行项目imgq01。71396。comcaek11c5be704182423e。jpg1npmrunserveimgq01。71396。comcaek11c5be704182423e。jpg1拉取2。x模板（旧版本）imgq01。71396。comcaek11c5be704182423e。jpg1全局下载npminstallgvuecliinit创建项目vueinitwebpack项目名Vuecli34构建项目的目录结构
　　nodemodules项目依赖（vue、babel、vuerouter、vuex、webpack相关，）
　　public公共文件静态资源根目录
　　publicindex。imgq01。71396。comcaek11c5be704182423e。jpgtml主模版
　　publicfavicon。ico网站图标
　　src开发目录开发源代码
　　srcassets静态资源（第三方库）
　　srcutils工具类
　　srcapi请求的文件
　　srcstyle样式文件
　　srccomponentsvue组件
　　srcrouter路由
　　srcstorevuex
　　srcviews页面组件视图组件
　　srcAPP。vue根组件
　　srcmain。js项目入口文件（newVue（））
　　。browserslistrc浏览器支持情况
　　。gitignoregit不维护的文件当前是一个仓库
　　babel。config。jsbabel配置
　　package。json项目依赖配置文件
　　README。md项目说明
　　vue。config。jsvue配置imgq01。71396。comcaek11c5be704182423e。jpg1vue使用脚手架开发安装vscode插件imgq01。71396。comcaek11c5be704182423e。jpg1
　　安装vscode插件：vetur：解除错误提示
　　安装vscode插件：VueVSCodeSnippets：快速生成vue文件模板