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

　　ES6
　　学习网站： //imgq01.71396.com/ca/ek/11c5be704182423e.jpgttps://es6.ruanyifeng.com/ 箭头函数普通函数 //普通函数 t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis 指向调用时所在的对象(可变) let fn = function fn(a, b) {     console.log(a, b); } fn(1, 2);箭头函数: 箭头函数t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis指向声明时所在的对象(不可变) let fn2 = (c, d) => {    console.log(c, d);  }  fn2(3, 4);如果只有一个参数,可以省略圆括号 let fn3 = c => { }  fn3(6);如果函数体内只有一条 return 语句,可以省略 {} return let fn4 = d => d;  fn4(7)箭头函数与普通函数的区别: t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis 指向问题：普通函数  t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis   指向调用时所在的对象(可变); 箭头函数  t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis   指向定义时所在对象(不可改变) let obj={＂name＂:＂gao＂,＂age＂:18};  function fn(){    console.log(t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis);  }  fn();//t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis-->window  fn.call(obj);//fn-->t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis-->obj  let fn2=()=>{    console.log(t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis);  }  fn2();  fn2.call(obj)//无法改变t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis指向,还是window构造函数问题：普通函数 可以当做构造函数 可以  new  ; 箭头函数 不可以当做构造函数,不可以  new  function Gou(name, age) {    t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.name = name;    t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.age = age;  }  let o1 = new Gou(＂Gao＂, 19);  console.log(o1); //Gou {name: ＂Gao＂, age: 19} //-----------------------  let Gou2 = (name, age) => {    t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.name = name;    t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.age = age;  }  let o2 = new Gou2(＂wang＂, 18);  console.log(o2);参数问题：普通函数  arguments   获取所有的实参,组成伪数组 ; 箭头函数不可以使用  arguments   用  rest   参数(...参数) function fn3(){    console.log(arguments);  }  fn3(1,2,3,4,5);  let fn4=(...x)=>{    console.log(x);  }  fn4(1,2.3,4,5);//箭头函数无arguments,可以使用...  //普通函数可以使用...????--->可以  function fn5(...x){    console.log(x);  }  fn5(1,2,3,4,5); //可以使用...不可以使用  yield   命令,因为箭头函数不能用作  Generator   函数;首先可以把它理解成  Generator   函数是一个状态机,封装了多个内部状态.  function *fn5(){//写法或者function* fn5()     yield ＂1＂;     yield ＂2＂;     yield ＂3＂; //yield产出     return ＂d＂   }  let f = fn5();  for( let v of f){    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() );Symbollet a = Symbol(); let b = Symbol();  console.log(a); console.log(b);  console.log(a == b, a === b); //应用-->对象的key,保证唯一,不被覆盖 //组长:对象{name:＂gao＂} //自己:对象{name:＂王＂}  let obj = {     [a]: ＂gao＂ };  let obj2 = {     [b]: ＂王＂ }; console.log(obj[a]); console.log(obj2);  //将obj2合并到obj对象上,----如果属性名相同,覆盖,但是属性名是Symbol独一无二  Object.assign(obj, obj2); console.log(＂合并后＂, obj);Set//Set :类似数组的数据结构,但是成员值唯一 let a = new Set([1, 2, 3, 1, 2]);  //类数组转数组 let arr = Array.from(a); console.log(a); console.log(arr);  //是否存在 console.log(a.//imgq01.71396.com/ca/ek/11c5be704182423e.jpgas(1)); //true console.log(a.//imgq01.71396.com/ca/ek/11c5be704182423e.jpgas(2)); //true console.log(a.//imgq01.71396.com/ca/ek/11c5be704182423e.jpgas(3)); //true console.log(a.//imgq01.71396.com/ca/ek/11c5be704182423e.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);Map//定义一个普通的对象，key 为字符串 let obj = {     ＂name＂: ＂gao＂,     ＂12＂: 23232 }; //key为字符串 console.log(obj);   //map  :类似对象的数据结构,但是 key 可以为任何数据类型  //定义一个Map()结构 let m = new Map();  // 设置值set() m.set(true, ＂呵呵＂); //这里key为true,可以为null,还可以为function      m.set(1, ＂哈哈＂); //这里key为true,可以为null,还可以为function      m.set(2, ＂嘻嘻＂); //这里key为true,可以为null,还可以为function      console.log(m);  //获取值get(key) console.log(m.get(true)); console.log(m.get(1)); console.log(m.get(2));  //是否存在//imgq01.71396.com/ca/ek/11c5be704182423e.jpgas(key) console.log(m.//imgq01.71396.com/ca/ek/11c5be704182423e.jpgas(12)); //false console.log(m.//imgq01.71396.com/ca/ek/11c5be704182423e.jpgas(2)); //true  //删除 delete(key) m.delete(1); console.log(m);  //清空clear() m.clear(); console.log(m);  //属性size console.log(m.size);  //遍历keys for (let v of m.keys) {     console.log(v); } //遍历values for (let v of m.values) {     console.log(v); } //遍历keys和values for (let v of m.entries) {     console.log(v); }Proxy
　　Proxy   与  Object.defineProperty   优劣对比  Proxy   的优势如下 :
　　!!! Proxy   可以直接监听 对象 而非属性； !!! Proxy   可以直接监听 数组 的变化； !!! Proxy   有多达 13 种拦截方法,不限于  apply  、 ownKeys  、 deleteProperty  、 //imgq01.71396.com/ca/ek/11c5be704182423e.jpgas   等等是  Object.defineProperty   不具备的； !!! Proxy   返回的是一个 新对象 ,我们可以只操作新的对象达到目的,而  Object.defineProperty   只能遍历对象属性直接修改；  Proxy   作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；
　　Object.defineProperty   的优势如下: 兼容性好，支持 IE9，而  Proxy   的存在浏览器兼容性问题,而且无法用  polyfill   磨平，因此  Vue   的作者( 3.0 )才能用  Proxy   重写。 //Proxy用于修改某些操作的默认行为 let obj = {     ＂name＂: ＂gao＂,     ＂age＂: 18 };  //取值 let p = new Proxy(obj, {      //target䯮对象,key为读取的属性名     get: function (target, key, value) {         console.log(＂获取值key是＂, key, ＂获取值value＂, value);         return target[key];     },      //target目标对象,key修改的属性名,value修改的值     set: function (target, key, value) {         console.log(＂target＂, target);         console.log(＂key＂, key);         console.log(＂value＂, value);          target[key] = value;     } })  console.log(p.name); //读取操作,自动执行get方法  p.age = 999; //设置操作,自动执行set方法  console.log(＂p＂,p); Object.defineProperty//定义一个对象 let obj = {     ＂name＂: ＂wang＂,     ＂age＂: 12 };  // 遍历对象 for (let key in obj) {     Object.defineProperty(obj, key, {         get: function () {             console.log(＂获取值了＂);         },         set: function () {             console.log(＂设置值了＂);         }     }) }  obj.age; //获取值 obj.name = ＂888888＂; //设置值 obj.age = 000;Reflect
　　Reflect   操作对象的方法 1 将属于语言内部的方法,放在 Reflect 上 2 修改了一些方法的返回值,比如报错改为 false 13个方法 //get(目标对象,属性名) let obj = {     ＂name＂: ＂gao＂,     ＂age＂: 13 }; console.log(obj); console.log(Reflect.get(obj, ＂name＂)); //set(目标对象.属性名,值) obj.age = 999; Reflect.set(obj, ＂age＂, ＂999999＂) console.log(obj);  function FancyT//imgq01.71396.com/ca/ek/11c5be704182423e.jpging() {     t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.name = ＂gao＂;     t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.age = 19; }  FancyT//imgq01.71396.com/ca/ek/11c5be704182423e.jpging.prototype.sex = ＂男＂; FancyT//imgq01.71396.com/ca/ek/11c5be704182423e.jpging.prototype.sex = function () {     console.log(＂哈哈＂); };  const myObj = new FancyT//imgq01.71396.com/ca/ek/11c5be704182423e.jpging();  //获取原型对象 console.log(Reflect.getPrototypeOf(myObj));  //设置原型对象 let obj3 = {     ＂//imgq01.71396.com/ca/ek/11c5be704182423e.jpgobby＂: ＂dfssdfsdf＂ };  Reflect.setPrototypeOf(myObj, obj3);  //获取 console.log( Reflect.getPrototypeOf(myObj) );promise
　　为什么使用  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 (评价) {                              }                         })                     }                  })             }          })     }  }) //------------------------------------  //定义--创建-- let err = 200; console.log(1); //--1  //定义一个promise let p = new Promise(function (resolved, rejected) {          console.log(2); //--2,一旦新建它就会立即执行          //异步操作         if (err == 200) {             resolved(＂成功的结果＂);         } else {             resolved(＂失败的结果＂);         } })  console.log(3); //--3  //调用 p.t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgen(function (res) {     console.log(＂成功＂, res); }, function (res) {     console.log(＂失败＂, res); }) console.log(4);//--4  //  catc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg  捕获错误  .t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgen可串联写   finally只要状态发生改变都会执行(不管成功失败)   p.t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgen(function (res) {     console.log(＂成功＂, res); //---异步的结果 }).catc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg(function (res) {     console.log(＂失败＂, res);  }).finally(function(){     console.log(＂哈哈哈＂);  })  //1234打印顺序是?????    :1-2-3-4-成功  //从上到下,先同步后异步,promise的使用 ( Ajax简单封装 axios)原生  Ajax  let x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr = new XML//imgq01.71396.com/ca/ek/11c5be704182423e.jpgttpRequest(); x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.open(＂GET＂, ＂./promise.json＂, true); x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.send(); x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.onreadystatec//imgq01.71396.com/ca/ek/11c5be704182423e.jpgange = function () {     if (x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.readyState == 4 && x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.status == 200) {         console.log(x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.responseText);     } } Ajax   封装 类似  jquery  function $my(obj) {     let {type = ＂GET＂, url, success} = obj;     let x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr = new XML//imgq01.71396.com/ca/ek/11c5be704182423e.jpgttpRequest();     x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.open(type, url, true);     x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.send();     x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.onreadystatec//imgq01.71396.com/ca/ek/11c5be704182423e.jpgange = function () {         if (x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.readyState == 4 && x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.status == 200) {             console.log(x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.responseText);         }     } }  // 使用封装好的 Ajax 调接口 $my({     type: ＂GET＂,     url: ＂./promise.json＂,     success: function (res) {         console.log(res);     } })ajax-promise   封装  Ajax  // ajax-promise  封装 Ajax  function $ajax(obj) {     let {         type = ＂GET＂, url, success     } = obj;     let x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr = new XML//imgq01.71396.com/ca/ek/11c5be704182423e.jpgttpRequest();     x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.open(type, url, true);     x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.send();      return new Promise(function (ok, no) {         x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.onreadystatec//imgq01.71396.com/ca/ek/11c5be704182423e.jpgange = function () {             if (x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.readyState == 4){                 if(x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.status == 200){                     //成功                 ok(x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.responseText);                 }              }else{                 //失败                     no(＂请求失败＂)             }         }     }) }  // promise-ajax 封装的 ajax 调用 $ajax({     type:＂GET＂,     url:＂./promise.json＂ }).t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgen(function(res){     console.log(res); }).catc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg(function(res){     console.log(res); })
　　封装好的  ajax   参考 库  axios   : //imgq01.71396.com/ca/ek/11c5be704182423e.jpgttp://www.axios-js.com/  .all   合并,只要有一个失败都失败  .race   那个先成功出来那个 let x = 200; let a = new Promise(function (ok, no) {     if (x == 200) {         ok(＂a 成功＂)     } else {         no(＂a 失败＂)     } })  let y = 200; let b = new Promise(function (ok, no) {     if (x == 200) {         ok(＂b 成功＂)     } else {         no(＂b 失败＂)     } })  //all合并  类似&& 逗成功才成功,只要有一个失败都失败,回调  //race,竞争  类似|| 哪个成功执行那个回调函数  Promise.all([a, b]).t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgen(function (res) {     console.log(res);     //0: ＂b成功＂     //1: ＂b成功＂ }).catc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg(function(res){         console.log(res); }) class类
　　回顾面向对象继承 //构造函数 function Gou(name) {     t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.name = name;  }  //共享的方法 - 放在原型对象上 Gou.prototype.say = function () {     console.log(＂哈哈哈哈＂); }  //实例化,得到对象 let fu = new Gou(＂gao＂);  //使用对象 console.log(fu);  // 继承 function Zi(name) {     Gou.call(t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis, name) //类式继承/借用构造函数继承/改变t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis指向实现继承 }  Zi.prototype = new Gou(); //原型链继承  // 实例化子类 let z = new Zi(＂gao＂);  console.log(z);
　　class   类 //es6 -------class类 //使用场景:封装组件, react 框架语法使用(难上手,难写,原生js必须过关,灵活度高) class Lei {     //属性     constructor(name) {         t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.name = name;     }     //方法     say() {         console.log(＂生生世世＂);     } } let obj = new Lei(＂gao＂); console.log(＂obj＂,obj);  obj.say()  //继承  关键词 extends  class Zilei extends Lei {     //  多态: 属性  方法      //-------------------------     //   constructor(){     //       t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.age = 18;     //出错     //   }     //--------------------------      constructor(name) {         super(name)     //子类构造函数中必须使用 super()  指向父类的构造函数         t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.age = 18;   //子类自己的属性     }      //子类自己的方法     run() {         console.log(＂哈哈＂);     } } let obj2 = new Zilei(＂gao＂); console.log(obj2);模块化
　　四大步骤：创建模块 --> 导出模块 --> 导入模块 --> 使用 // 2.js  //1---创建模块 let a=123; //2---导出模块 export default a;// 1.js  //3---载入模块 import a from ＂./2.js＂ //4---使用模块 console.log(a); //a为自定义,随便起                                                         
　　总结一下： 如果导出方式 export default a   那么载入方式  import 自定义变量名 from ＂./2.js＂  如果导出方式 export a=123;   那么载入方式  import { a } from ＂./2.js＂  async异步函数
　　如果有  return   ===> 有返回值 ===> 返回值是  promise   对象 ===> 获取返回值通过  .t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgen    await    promise   成功的返回值,如果有 成功的返回值,执行下一步, 如果没有成功的返回值，则会报错,停止执行. let err = 200;//错误改为400测试一下  // 定义一个 promise 对象 let x = new Promise(function(ok,no){     if(err == 200){         ok(＂正确,成功返回值＂)     }else{         no(＂错误,失败返回值＂)     } })  async function fn(){      //await 等待     let a = await x; //await 后可以是一个 promise 对象     let b = await 789;//await 后也可以是值，     return [a,b];  } console.log( fn() );   fn().t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgen(function(res){     console.log(res); })
　　应用： //封装好的 AJax function $ajax(obj) {     let {         type = ＂GET＂, url, success     } = obj;     let x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr = new XML//imgq01.71396.com/ca/ek/11c5be704182423e.jpgttpRequest();     x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.open(type, url, true);     x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.send();      return new Promise(function (ok, no) {         x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.onreadystatec//imgq01.71396.com/ca/ek/11c5be704182423e.jpgange = function () {             if (x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.readyState == 4){                 if(x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.status == 200){                     //成功                 ok(x//imgq01.71396.com/ca/ek/11c5be704182423e.jpgr.responseText);                 }              }else{                 //失败                     no(＂请求失败＂)             }         }     }) }  // 进一步使用 async 和 await  async function fn(){     let a = await $ajax({＂type＂:＂get＂,＂url＂:＂./1.json＂})     let b = await $ajax({＂type＂:＂get＂,＂url＂:＂./1.json＂})     let c = await $ajax({＂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.t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgen( res => console.log(res) )webpack自动化模块化打包文档： //imgq01.71396.com/ca/ek/11c5be704182423e.jpgttps://www.webpackjs.com/concepts/ webpack  : 模块化打包机（根据模块依赖打包文件） 默认：打包  js   文件 核心概念： 入口( entry  ) 输出( output  ) loader  :  css-loader   /  file-loader  插件( plugin  ): (删除已打包文件，压缩js，压缩css) 模式( mode  ) 浏览器兼容性( browser compatibility  ) 环境( environment  ) 按照  webpack   指南进行配置 //imgq01.71396.com/ca/ek/11c5be704182423e.jpgttps://www.webpackjs.com/guides/getting-started/ 构建服务器热加载开发环境：  webpack-dev-server  插件 plugins: 输出//imgq01.71396.com/ca/ek/11c5be704182423e.jpgtml：//imgq01.71396.com/ca/ek/11c5be704182423e.jpgtml-webpack-plugins 清理dist 目录： clean-webpack-plugin vue
　　文档： //imgq01.71396.com/ca/ek/11c5be704182423e.jpgttps://cn.vuejs.org/
　　//imgq01.71396.com/ca/ek/11c5be704182423e.jpgello World小项目开始 通过 cdn 使用vue :
　　js   使用严格模式： use strict  1/渐进式框架
　　vue是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计,vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合;
　　渐进式表现:声明式渲染-->组件系统-->客户福安路由-->大数据状态管理-->构建工具 2两个核心(最大的亮点):
　　响应式数据绑定(双向数据绑定):  当数据发生变化的时候,视图自动更新,即双向数据同步,原理利用了es6中放入Object definedProperty中的setter/getter代理数据,监控对数据的操作.
　　组合的视图组件(虚拟Dom): 即页面最终映射为一个组件树,采用树形结构进行设计,方便维护,重用. 3 虚拟Dom
　　利用再去爱内存中生成与真实 Dom  与之对应的数据结构,这个在内存中生成的结构称之为虚拟Dom,当数据发生变化时,能够智能的计算出重新渲染组件的最小代价并应用到 Dom  操作上. 4 MVVM
　　MVVM  是 model-View-ViewModel  的缩写,它是一种基于前端开发的架构模式,起核心是提供对View和 ViewModel  的双向数据绑定,这使得 ViewModel  的状态改变可以自动传递给
　　M  : Model  (数据层,也就是指数据,前端是 js  )
　　V  : View  (也就是指 Dom  层或用户界面)
　　VM  : ViewModel  处理数据和界面的中间层,也就是指 vue
　　5声明式渲染
　　Vue.js   的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进  DOM   的系统
　　额外补充:渲染分为:命令式渲染和声明式渲染
　　命令式渲染:命令我们的程序去做什么,程序就会跟着你的命令去一步一步执行
　　声明式渲染:只需要告诉程序想要的效果,其他的交给程序去做:
　　vue.js  安装:
　　CDN  : 对于制作原型或学习，你可以这样使用最新版本 NPM:
　　在用  Vue   构建大型应用时推荐使用  NPM   安装。 NPM   能很好地和诸如 或模块打包器配合使用。同时  Vue   也提供配套工具来开发。 $ npm install vue看vue.js源码:
　　component  组件  direction  指令  filte  r控制器 vue的生命周期
　　beforeCreate    created    beforeMount    mounted    beforeUpdated    updated    beforeDestroy    destroyed    activated    deactived    errorCaptured    serverPrefetc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg
　　vue   数组方法,只有 pus//imgq01.71396.com/ca/ek/11c5be704182423e.jpg  , pop  , s//imgq01.71396.com/ca/ek/11c5be704182423e.jpgift  , uns//imgq01.71396.com/ca/ek/11c5be704182423e.jpgift  , splice  , sort  , reverse  能够监听到     {{ message }} var app = new Vue({   el: ＂#app＂,//vue操作的作用域   //定义数据--model数据模型   data: {     message: ＂//imgq01.71396.com/ca/ek/11c5be704182423e.jpgello Vue!＂   } }) //上面是id起作用,class是不起作用的,源码中是用queryselector
　　v-bind   attribute 被称为 指令 。指令带有前缀  v-  ，以表示它们是 Vue 提供的特殊 attribute。 1 v-for渲染列表
　　v-for  指令可以绑定数组的数据来渲染一个项目列表    
     
       {{ todo.text }}     
   
 var app4 = new Vue({   el: ＂#app-4＂,   data: {     todos: [       { text: ＂学习 JavaScript＂ },       { text: ＂学习 Vue＂ },       { text: ＂学习 React＂ }     ]   } })2 v-if                 当前的年龄是--{{ age }}         
18＂ > 年龄大于18         
 年龄等于18        
 年龄小于18      const vm=new Vue({     el:＂#app＂,     data:{         age:80     } })3 v-s//imgq01.71396.com/ca/ek/11c5be704182423e.jpgow
　　v-if    v-s//imgq01.71396.com/ca/ek/11c5be704182423e.jpgow   区别：  v-if   满足条件,加载节点,不满足条件,移除节点  v-s//imgq01.71396.com/ca/ek/11c5be704182423e.jpgow   满足条件,显示,不满足条件, css  样式 display:none
　　使用场景: 频繁切换:使用  v-s//imgq01.71396.com/ca/ek/11c5be704182423e.jpgow  , 不频繁切换使用 v-if
　　性能:  vmv-s//imgq01.71396.com/ca/ek/11c5be704182423e.jpgow  :初始消耗高,切换时消耗低   v-if  :初始消耗低,切换时消耗高           当前年龄是      
18＂>年龄>18      
年龄=18      
年龄<18     const vm=new Vue({     el:＂#app＂,     data:{            age:18     } })4 v-text     {{ a }}     {{ b }}                       const vm = new Vue({     el: ＂#app＂,     data: {         a: ＂//imgq01.71396.com/ca/ek/11c5be704182423e.jpg//imgq01.71396.com/ca/ek/11c5be704182423e.jpg//imgq01.71396.com/ca/ek/11c5be704182423e.jpg//imgq01.71396.com/ca/ek/11c5be704182423e.jpg//imgq01.71396.com/ca/ek/11c5be704182423e.jpg＂,         b: ＂呵呵＂     } })5 v-bind        {{ f }}                 
123 const vm=new Vue({     el:＂#app＂,     data:{         f:＂淘宝＂,         g:＂//imgq01.71396.com/ca/ek/11c5be704182423e.jpgttps://www.taobao.com＂,         //imgq01.71396.com/ca/ek/11c5be704182423e.jpg:＂./＂,         j:＂b＂     } })6 v-model              输入的值为: {{ user }}   -->                                                                                              
                 序号姓名年龄地址性别爱好操作暂无数据
             
                                                                                                                                                                    
                          
                 
                     
 {{ index+1 }} 
                     
 {{ item.user }} 
                     
 {{ item.age }} 
                     
 {{ item.address }} 
                     
 {{ item.sex }} 
                     
 {{ item.//imgq01.71396.com/ca/ek/11c5be704182423e.jpgobby.join(＂/＂) }} 
                     
                         删除                         修改                     
                 
                 
                                      
             
         
                          
　　js代码： const vm = new Vue({     el: ＂#app＂,     data: {         user: ＂＂,   //姓名         age: ＂＂,    //年龄         address: ＂＂,//地址         sex: ＂＂,    //性别         //imgq01.71396.com/ca/ek/11c5be704182423e.jpgobby: [],  //爱好    //info为天机的数组存储         info: localStorage.getItem(＂curd0308＂) ? JSON.parse(localStorage.getItem(＂curd0308＂)).info : [],         editFlag: false,         //修改-->data定义值,然后才有数据双向绑定         eid:＂＂,         euser: ＂＂,//修改姓名         eage: ＂＂,//修改年龄         eaddress: ＂＂,//修改地址         esex: ＂＂,//修改性别         e//imgq01.71396.com/ca/ek/11c5be704182423e.jpgobby: [],//修改爱好         //搜索         searc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg: ＂＂      },     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods: {          //添加         add() {             let {user,age,address,sex,//imgq01.71396.com/ca/ek/11c5be704182423e.jpgobby} = t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis;             if(!user){                 alert(＂请输入姓名！＂)                 return;             }             if(!age){                 alert(＂请输入年龄！＂)                 return;             }             if(!address){                 alert(＂请输入地址！＂)                 return;             }             if(!sex){                 alert(＂请输入性别！＂)                 return;             }             if(//imgq01.71396.com/ca/ek/11c5be704182423e.jpgobby.lengt//imgq01.71396.com/ca/ek/11c5be704182423e.jpg == 0){                 alert(＂请输入爱好！＂)                 return;             }             let id = new Date().getTime();              t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info.pus//imgq01.71396.com/ca/ek/11c5be704182423e.jpg({  id,  user,  age,  address,  sex,  //imgq01.71396.com/ca/ek/11c5be704182423e.jpgobby   });              localStorage.setItem(＂curd0308＂, JSON.stringify({＂info＂: t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info}));         },          //删除  通过id找到下标 通过下标删除         del(id) {             // console.log(＂id＂,id);             let confirmVal = confirm(＂确认要删除？＂)             if(confirmVal == true){                 let indexId = t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info.findIndex(val => {                     return val.id == id;                 })                 t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info.splice(indexId, 1);                      localStorage.setItem(＂curd0308＂, JSON.stringify({＂info＂: t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info }));             }         },          //修改按钮,通过id找到要修改的数据         edit(eid) {             console.log(eid);             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.editFlag = true; //显示修改表单              //通过id找到下标             let index = t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info.findIndex(val => {                 return val.id == eid;             })             console.log(t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info[index]);             let {id,user,age,address,sex,//imgq01.71396.com/ca/ek/11c5be704182423e.jpgobby} = t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info[index];//修改那条数据             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.eid = id;             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.euser = user;             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.eage = age;             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.eaddress = address;             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.asex = sex;             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.e//imgq01.71396.com/ca/ek/11c5be704182423e.jpgobby = //imgq01.71396.com/ca/ek/11c5be704182423e.jpgobby;          },         //确认修改         editOk() {             let {eid,euser,eage,eaddress,esex,e//imgq01.71396.com/ca/ek/11c5be704182423e.jpgobby} = t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis;             //通过下标找数据             let index = t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info.findIndex(val => {                 return val.id == eid;             })              t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info[index].user = euser;             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info[index].age = eage;             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info[index].user = eaddress;             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info[index].user = esex;             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info[index].user = e//imgq01.71396.com/ca/ek/11c5be704182423e.jpgobby;             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info[index].user = euser;             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info[index].user = euser;             //储存             localStorage.setItem(＂curd0308＂, JSON.stringify({ ＂info＂: t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info}));             //隐藏             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.editFlag = false;         },     },      //计算属性     computed: {         ＂arr＂: function () {             return t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.info.filter(val => {                 // return val.user == t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.searc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg                 return val.user.includes(t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.searc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg)             })         }     } })计算属性  +  ={{ sum }}  {{ sum }} const vm=new Vue({     el:＂#app＂,     data:{         a:＂＂,         b:＂＂     },     //使用场景:多个值 影响一个值的变化     //computed计算属性,优点:计算结果会缓存     computed:{         /*             ＂属性名＂:function (){                 return 计算结果             }         */         ＂sum＂:function(){             return t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.a +t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.b         }     } })过滤 filterlet arr=[     {＂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字母取出组成新的数组  var arr1 = []; for (var i=0;i=0){             arr1.pus//imgq01.71396.com/ca/ek/11c5be704182423e.jpg( arr[i] );     } } console.log(arr1);   //--------------方法2------------------  let arr2 = arr.filter( function(value,index){     return value.name.includes(＂g＂) }) console.log(arr2);  //-----------------方法2的简写----------------------------  let arr3 = arr.filter( value => value.name.includes(＂g＂))  // let arr3 = arr.filter( value => value.name.includes(＂g＂)) //模糊搜索  console.log(arr3);vue 搜索功能                  
             
 {{ item.name }} 
             
暂无数据
         
 const vm=new Vue({     el:＂#app＂,     data:{         arr:[             {＂name＂:＂gao＂},             {＂name＂:＂li＂},             {＂name＂:＂wang＂},             {＂name＂:＂z//imgq01.71396.com/ca/ek/11c5be704182423e.jpgou＂},             {＂name＂:＂san＂},         ] ,         searc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg:＂＂,     },            computed:{             info(){                 return t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.arr.filter(val => val.name.includes( t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.searc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg ))             }         } }) vue 多条件搜索                           
             
 {{ item.name }}----{{ item.age }} 
             
暂无数据
         
 const vm = new Vue({     el:＂#app＂,     data:{         arr:[             {＂name＂:＂gao＂,＂age＂:15},             {＂name＂:＂li＂,＂age＂:15},             {＂name＂:＂wang＂,＂age＂:15},             {＂name＂:＂z//imgq01.71396.com/ca/ek/11c5be704182423e.jpgou＂,＂age＂:15},             {＂name＂:＂san＂,＂age＂:15},         ] ,         sname:＂＂,         sage:＂＂,     },            computed:{             info(){                 return t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.arr.filter(val=>{                     return  val.name.includes(t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.sname) && val.age.toString().includes(t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.sage) })             }         } })v-for 循环渲染 数组 对象 数字 字符串等                    
         
 {{ item }} ---{{index}}
     
          
         
 {{ item }}
     
          
         
   {{ value }} ---{{key}}--{{ index }} 
     
          
         
  {{ item }} ---{{ index }} 
     
 const vm=new Vue({     el:＂#app＂,     data:{     arr:[＂aa＂,＂bb＂,＂cc＂],     num:5,     obj:{＂name＂:＂wang＂,＂age＂:15,＂address＂:＂陕西＂},     str:＂abcdefg＂     } })事件对象     111不传参数     222传参数  const vm = new Vue({     el: ＂#app＂,     data: {         one(event) {             console.log(event); //事件对象,有一个隐藏参数,也可以写其他名字             console.log(t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis);         },         two(a, e) {             console.log(a, e);//事件对象需要用$event导出             console.log( e.target.innerText);//获取按钮内容         }     } })事件修饰符      //event.preventDefault()阻止默认事件 //按钮标签里@click.prevent=＂two＂ //form标签里@submit.prevent const vm = new Vue({     el: ＂#app＂,     data: {         one(event) {             event.preventDefault(); //阻止默认事件,不会刷新              //console.log(event);         },         two(event) {             console.log(event); //click后加prevent         }     } })阻止事件冒泡              通知:下课后都出去抽烟...删除           赞{{num}}  //@click.stop阻止事件冒泡  //event.stopPropagation();//阻止冒泡  // @click.once=＂num+=1＂//一次  var vm = new Vue({     el: ＂#app＂,     data: {         num:1,     },     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods: {         infoFn() {             alert(＂进入详情,查看详细通知＂)         },         del(event) {             //event.stopPropagation();//阻止冒泡              alert(＂删除＂) //点击删除,还显示进入详情         }     }, })按键 修饰符      //写键盘码.13  回车  //@keyup.enter按下回车事件--按键修饰符  //@keyup.left按左方向键事件--按键修饰符  //@keyup.rig//imgq01.71396.com/ca/ek/11c5be704182423e.jpgt 按右方向键事件--按键修饰符  //@keyup.up 按上方向键事件--按键修饰符  //@keyup.down 按下左方向键事件--按键修饰符  var vm = new Vue({     el: ＂#app＂,     data: {      },     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods: {         /*  fn(event){                 console.log(event.keyCode);             } */         fn() {             console.log(＂拔下来回车＂);         }     }, })事件监听 watc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg监听基本数据类型               
搜索框搜索的值是{{ searc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg }}      const vm = new Vue({     el: ＂#app＂,     data: {         searc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg: ＂ ＂     },     //watc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg事件监听  一个值变化影响多个值     watc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg: {         ＂searc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg＂: function (n, old) {                 console.log(＂当前值＂,n);                 console.log(＂上次值＂,old);                 //ajax请求         }     },     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods: {         fn() {             console.log(＂搜索的的值发生变化＂, t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.searc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg);             //ajax请求         }     }, })事件监听 watc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg监听对象          
搜索框搜索的值是{{ obj.searc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg }}     const vm = new Vue({     el: ＂#app＂,     data: {         obj: {             searc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg: ＂＂         },     },     //watc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg事件监听  一个值变化影响多个值     watc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg: {         obj: {             //imgq01.71396.com/ca/ek/11c5be704182423e.jpgandler: function (n) {                 console.log(＂当前值＂, n);                              }, //ajax请求             deep: true,//深度监听             immediate:true//添加之后第一次也可以监听得到         }     },     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods: {         fn() {             console.log(＂搜索的的值发生变化＂, t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.searc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg);             //ajax请求         }     }, })面试题：met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgodscomputed和 watc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg的区别：computed  ： 计算属性，会缓存，多个值影响一个值，依赖的值发生改变，计算属性则就会改变 watc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg  ：监听，一个值对应多个值 met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods  ： 调用一次执行一次 面试题：v-if与 v-for优先级哪个高？
　　在同一个节点  v-for   比  v-if   优先级高,先循环再判断      
 0＂>         
{{ item.name }}
     
 //在同一个节点v-for比v-if优先级高,先循环再判断 var  vm = new Vue({     el:＂#app＂,     data:{         arr:[             {＂name＂:＂gao＂},             {＂name＂:＂wang＂},         ]     } })局部组件
　　只能在当前 vue 实例中使用： new Vue({     //...      //创建局部组件     components:{         ＂组件名＂：{             template:`             `         }              } })                             Vue.component(＂myBigTitle＂, {     template: `     大标题     ` })   //局部组件,全局可以写多个,是components const vm = new Vue({     el: ＂#app＂,      components: {         ＂mySmallTitle＂: {             template: `     小标题     `         }     },     data: {},     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods: {},     watc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg: {},     computed: {} })全局组件* {     padding: 0;     margin: 0; }  #app {     widt//imgq01.71396.com/ca/ek/11c5be704182423e.jpg: 100vw;     //imgq01.71396.com/ca/ek/11c5be704182423e.jpgeig//imgq01.71396.com/ca/ek/11c5be704182423e.jpgt: 100v//imgq01.71396.com/ca/ek/11c5be704182423e.jpg;     display: flex;     flex-direction: column; }  .content {     flex: 1;     overflow: auto; }                                                                                           //全局组件//my-//imgq01.71396.com/ca/ek/11c5be704182423e.jpgeader驼峰式可以,调用是必须为横线 //全局组件一定要在new vue的上方 //template里面   有且只有一个根节点  Vue.component(＂my-//imgq01.71396.com/ca/ek/11c5be704182423e.jpgeader＂, {     template: `     顶部搜索     ` })  Vue.component(＂myFooter＂, {     template: ` 底部 ` })  Vue.component(＂myContent＂, {     template: `                       图文     ` }) // 内容里面还有轮播,单独拆出轮播 Vue.component(＂mySwiper＂, {     template: ` 轮播-----13213213 ` }) //局部组件 const vm = new Vue({     el: ＂#app＂,     data: {},     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods: {},     watc//imgq01.71396.com/ca/ek/11c5be704182423e.jpg: {},     computed: {} })组件中定义数据 data为什么是一个函数返回一个对象？         //全局  --组件  data必须是函数,返回一个对象  //组件是独立的,多个组件用一份数据会造成不独立,data为函数,每次调用  //文本及数组  //里面写结构,调用时写参数  Vue.component(＂one＂, {     data() {         return {             ＂text＂: ＂哈哈＂,             ＂arr＂: [＂aa＂, ＂bb＂, ＂cc＂]         }     },     template: `               {{ text }}         
         
{{ item }} 
         
          `,     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods: {         fn(index) {             alert(index);         }     }, })  const vm = new Vue({     el: ＂#app＂, })
　　data   是一个对象,复用的是一个地址  data   是一个函数，返回一个对象，则会开辟一个新地址
　　看下面代码： //定义一个对象 let data1 = {＂name＂:＂abc＂}  console.log(data1)// 调用一次 console.log(data1.name = ＂aaa＂)// 调用一次 console.log(data1)// 调用一次  前面更改后 所有的都改变了 console.log(data1)// 调用一次  也变了   function data2(){     return {＂name＂:＂abc＂} }  //调用函数 console.log( data2().name = ＂aaaaaaaa＂ ) console.log( data2() )    //修改后  后面不会改变 console.log( data2() ) console.log( data2() )静态 props                                                     //调用时组件传参  使用props //调用:<组件名 自定义属性名=＂要传递的值＂><组件名> //创建组件: //Vue.componte(＂组件名＂,{props:[＂自定义属性名＂],template:{`    `}})  Vue.component(＂myTitle＂, {     props:[＂x＂,＂y＂,＂obj＂],     template: `               {{ x }}--{{ y }}--{{ JSON.parse(obj).msg }}           ` }) //根组件 var vm = new Vue({     el: ＂#app＂,  }) 动态 props                                          Vue.component(＂myNav＂,{     //props:[＂x＂],     //props验证     props:{         ＂x＂:String     },     template:`              {{ x.title }}         
             
{{item.bar}}
                   
          ` }) const vm = new Vue({     el: ＂#app＂,     data: {         topnav: {             title: ＂哈哈哈＂,             nav: [{                     ＂bar＂: 123                 },                 {                     ＂bar＂: 456                 },             ]         },         contentnav: {             title: ＂哈哈哈＂,             nav: [{                     ＂bar＂: 111                 },                 {                     ＂bar＂: 222                 },             ]         },         footernav: {             title: ＂哈哈哈＂,             nav: [{                     ＂bar＂: 888                 },                 {                     ＂bar＂: 999                 },             ]         },      } }) 图文组件                     Vue.component(＂tw＂,{     props:[＂info＂],     template:`                                                                                      
名称:{{ info.name }}             
产地:{{ info.address }}                   ` }) var vm = new Vue({     el: ＂#app＂,     data: {             arr:[                 {＂img＂:＂//imgq01.71396.com/ca/ek/7f3339fd6fa1770e.jpg＂,＂name＂:＂小狗＂,＂address＂:＂s//imgq01.71396.com/ca/ek/11c5be704182423e.jpganxi＂},                 {＂img＂:＂//imgq01.71396.com/ca/ek/caa41821fa1e6d2c.jpg＂,＂name＂:＂小狗＂,＂address＂:＂s//imgq01.71396.com/ca/ek/11c5be704182423e.jpganxi＂},                 {＂img＂:＂//imgq01.71396.com/ca/ek/deeab18ec6693e17.jpg＂,＂name＂:＂小狗＂,＂address＂:＂s//imgq01.71396.com/ca/ek/11c5be704182423e.jpganxi＂},             ]     } })封装九宫格组件
　　注意： 不足一行，对其方式 .nav {     widt//imgq01.71396.com/ca/ek/11c5be704182423e.jpg: 100vw;     display: flex;     justify-content: space-between;     flex-wrap: wrap; }  .nav-item {     widt//imgq01.71396.com/ca/ek/11c5be704182423e.jpg: 23vw;     text-align: center; }  .nav-item>img {     widt//imgq01.71396.com/ca/ek/11c5be704182423e.jpg: 100%;     //imgq01.71396.com/ca/ek/11c5be704182423e.jpgeig//imgq01.71396.com/ca/ek/11c5be704182423e.jpgt: 190px; }                Vue.component(＂jiuNav＂, {     data() {         return {             arr: [                 {＂src＂:＂//imgq01.71396.com/ca/ek/7f3339fd6fa1770e.jpg＂,＂name＂:＂dog11＂},                 {＂src＂:＂//imgq01.71396.com/ca/ek/caa41821fa1e6d2c.jpg＂,＂name＂:＂dog12＂},                 {＂src＂:＂//imgq01.71396.com/ca/ek/deeab18ec6693e17.jpg＂,＂name＂:＂dog13＂},                 {＂src＂:＂//imgq01.71396.com/ca/ek/deeab18ec6693e17.jpg＂,＂name＂:＂dog13＂},                 {＂src＂:＂//imgq01.71396.com/ca/ek/deeab18ec6693e17.jpg＂,＂name＂:＂dog13＂},                 {＂src＂:＂//imgq01.71396.com/ca/ek/deeab18ec6693e17.jpg＂,＂name＂:＂dog13＂},                 {＂src＂:＂//imgq01.71396.com/ca/ek/deeab18ec6693e17.jpg＂,＂name＂:＂dog13＂},                 {＂src＂:＂//imgq01.71396.com/ca/ek/deeab18ec6693e17.jpg＂,＂name＂:＂dog13＂},                 {＂src＂:＂//imgq01.71396.com/ca/ek/deeab18ec6693e17.jpg＂,＂name＂:＂dog13＂},             ]         }     },     template: `                                            ` })  Vue.component(＂jiuNavItem＂, {     props:[＂xx＂],     template: `                         
 {{ xx.name }}           ` }) const vm = new Vue({     el: ＂#app＂,     data: {      } })父 -> 子 通信
　　应用 ：父组件中有数据  title  ,传给子组件去使用 在父组件中，子组件开始标签上 自定义属性 去传递给子组件 :自定义属性=＂title＂  在子组件中 使用  props   接收自定义属性名，传值 为什么不能写为局部组件？写在new vue()里的局部组件是无需属性集合，会报错 ！        //双向数据绑定,单向数据流,从上到下  // 父组件 Vue.component(＂fu＂, {     data(){         return {             title: ＂哈哈哈啊＂         }     },     template: `               父组件 : 值是--{{ title }}                                 ` })  //子组件 Vue.component(＂zi＂, {     props: [＂fuvalue＂],     //接收父组件传值     template: `                              子组件：值是父亲组件传递的 {{ fuvalue }}                        ` })  const  vm = new Vue({     el: ＂#app＂, })子 -> 父 通信
　　应用 ：子组件中的数据给父组件使用  方法 ： 在子组件中通过 $emit(＂自定义事件名＂,传的数据)  将数据传递给父组件 在父组件中子组件开始标签上 自定义一个事件 @自定义事件名=＂方法名＂   而方法的形参就是传递的值       //父 Vue.component(＂fu＂, {     data(){         return {             x:＂  ＂         }     },     template: `                      父组件的值是:  子组件传递的是{{ x }}                                              `,         met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods:{             xx(res){                 //console.log(res);                 t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.x = res;             }         } })  //子 Vue.component(＂zi＂, {     data() {         return {             num:123456         }     },     template: `                      子组件的值是:  {{ num }}              传递给父组件                  `,         met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods:{             c//imgq01.71396.com/ca/ek/11c5be704182423e.jpguan(){                 t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$emit(＂c//imgq01.71396.com/ca/ek/11c5be704182423e.jpguans//imgq01.71396.com/ca/ek/11c5be704182423e.jpguju＂,t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.num)             }         } })  const vm = new Vue({     el: ＂#app＂, })非父子 ( 兄弟 ) 通信子组件先传父组件，父组件再传另一子组件        //父 Vue.component(＂fu＂, {     data(){ return{ num:＂＂}  },     template: `                                            `,     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods:{         getone(res){             //console.log(res);             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.num = res;     }      }, })  //one Vue.component(＂one＂, {     data(){         return { num:123456 }         },     template: `                  one组件 值是 {{ num }}              传递给  two               `,     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgod:{         c//imgq01.71396.com/ca/ek/11c5be704182423e.jpguan(){             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$emit(＂ onevalfn＂,t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.num)         }     } })  //two Vue.component(＂two＂, {     props:[＂num＂],     template: `                  two接受one  组件的值是:{{ num }}.              ` }) const vm = new Vue({     el: ＂#app＂,  })bus   传值 通过  bus.$emit(＂oneNumFn＂,t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.num)   传值 通过  bus.$on(＂oneNumFn＂,(res)=>{t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.num = res })   接收值       const bus = new Vue();  //父 Vue.component(＂fu＂, {     data(){          return { }       },     template: `                                                             `,     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods:{} , })  //one Vue.component(＂one＂, {     data(){         return {                            num:123456          }     },     template: `                  one组件 值是 {{ num }}              传递给  two               `,     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods:{         c//imgq01.71396.com/ca/ek/11c5be704182423e.jpguan(){             bus.$emit(＂oneNumFn＂,t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.num)         }     } })  //two Vue.component(＂two＂, {     data(){         return {             num:＂＂         }     },     template: `              two接受one  组件的值是:{{ num }}          `,     mounted(){         bus.$on(＂oneNumFn＂,(res)=>{             console.log(res)             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.num = res         })      } })  const vm = new Vue({     el: ＂#app＂,  })TodoList 案例思路： 1 静态页 2 切组件 todolist add list filter 3 todolist [todoArr、all、tab] 4 add 组件 按下回车获取输入值 data 中定义 TODO v-model 绑定 @keyup.enter 将输入框的值传递给 todolist 组件 t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$emit(事件名，数据) 5 todolist 接收 add 组件传值 组成数组，传递给list组件    回调函数名(res){ t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.todoArr.pus//imgq01.71396.com/ca/ek/11c5be704182423e.jpg({ ＂id＂:new Date().getTime(), ＂todo＂:res, ＂c//imgq01.71396.com/ca/ek/11c5be704182423e.jpgeck＂:false }) }  6 list 组件接收 todoArr ，循环 props:[＂todoArr＂] v-for=＂＂
　　代码如下： todolist/todolist.//imgq01.71396.com/ca/ek/11c5be704182423e.jpgtml                                                                                   
　　todolist/add.js Vue.component(＂add＂,{     data(){       return {           todoVal :＂＂,  //输入框的值                   all:＂＂       //全选框       }     },     template:     `                                  `,     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods: {         addFn(){             // 判断非空后回车添加             if(!t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.todoVal){                 alert(＂请输入！＂)                 return;             }             //非空的话， 将input输入框的值传给todolist             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$emit(＂addTodoVal＂,t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.todoVal)              //回车后情况输入框             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.todoVal = ＂＂         },         allFn(){             console.log(t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.all)             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$emit(＂addall＂,t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.all)                      }     }, })
　　todolist/list.js Vue.component(＂list＂, {     props: [＂todoArr＂],     template:      `                                           {{ item.todo }}               删除                   `,     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods: {         del(id) {             // console.log(id);             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$emit(＂listDelId＂,id)         },      } });
　　todolist/filter.js Vue.component(＂filters＂,{     props:[＂nowtab＂],     template:     `               全部           已完成 true            未完成 false            `,     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods:{         tab(flag){             console.log(flag);             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$emit(＂tabval＂,flag)         }     } })
　　todolist/todolist.js Vue.component(＂todolist＂,{     data() {         return {             todoArr:[],             tab:＂＂         }     },     template:     `                                                                                           `,     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods: {         //接受add组件传递的input框输入值         getTodoVal(res){            console.log(res);             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.todoArr.pus//imgq01.71396.com/ca/ek/11c5be704182423e.jpg({                ＂id＂:new Date().getTime(),                ＂todo＂:res,                ＂c//imgq01.71396.com/ca/ek/11c5be704182423e.jpgeck＂:false            })         },          //接收 add 组件的全选框的值 改变 todoArr 中的 c//imgq01.71396.com/ca/ek/11c5be704182423e.jpgeck 值         allTodoArr(res){             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.todoArr.map(val=>{                 console.log(val);                 val.c//imgq01.71396.com/ca/ek/11c5be704182423e.jpgeck = res;             })         },          //接受list组件传递的id删除todolist中  一条数据         delTodoArr(res){             console.log(res);             //通过id找下标             let index = t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.todoArr.findIndex(val => val.id == res);             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.todoArr.splice(index,1)         },         //接收 filter 组件 传递的筛选值         tabTodoArr(res){             console.log(res);             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.tab = res         },     },     computed:{         info(){             if(t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.tab == ＂all＂){                 return t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.todoArr;             }else if(t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.tab == ＂ok＂){                 return t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.todoArr.filter( val=> val.c//imgq01.71396.com/ca/ek/11c5be704182423e.jpgeck == true);             }else{                 return t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.todoArr.filter( val=> val.c//imgq01.71396.com/ca/ek/11c5be704182423e.jpgeck == false);             }         }     } })ref的作用绑在标签上 获取标签 绑在组件上 获取组件 父组件 获取 子组件的数据 和方法 ==> 使用 ref           哈哈            Vue.component(＂one＂,{     template:`              
123          `,     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods:{         fn(){             console.log(＂666＂)         }     } }) const vm = new Vue({     el:＂#app＂,     mounted(){         // 父组件 获取 子组件的数据 和方法 ==> 使用 ref         console.log( t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$refs.x )//ref绑定在 //imgq01.71396.com/ca/ek/11c5be704182423e.jpgtml 标签上 ,获取 //imgq01.71396.com/ca/ek/11c5be704182423e.jpgtml dom 标签         console.log( t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$refs.y )//ref 绑在组件上, 获取 vue 组件实例          t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$refs.y.fn() //父组件 获取 子组件的数据 和方法 ==> 使用 ref      } })t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$c//imgq01.71396.com/ca/ek/11c5be704182423e.jpgildren及 t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$parent
　　t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$c//imgq01.71396.com/ca/ek/11c5be704182423e.jpgildren   获取所有子组件的实例对象        Vue.component(＂fu＂,{     template:`                        `,     mounted(){                            console.log(＂获取子组件＂, t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$c//imgq01.71396.com/ca/ek/11c5be704182423e.jpgildren );             console.log(＂获取子组件的数据＂, t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$c//imgq01.71396.com/ca/ek/11c5be704182423e.jpgildren[0].x);             t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$c//imgq01.71396.com/ca/ek/11c5be704182423e.jpgildren[0].fn();  //调用子组件的方法                    } })  Vue.component(＂zi＂,{     data(){         return {             x:＂1111111＂         }     },     template:`              
123          `,     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods:{         fn(){             console.log(＂666＂);         }     },     mounted(){         console.log( t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.$parent )   //获取父组件实例     } })  const vm = new Vue({     el:＂#app＂, })provide和 inject      Vue.component(＂ye＂,{     data(){         return {             name:＂qiao＂         }     },     provide(){         return {             closeCurrent:t//imgq01.71396.com/ca/ek/11c5be704182423e.jpgis.closeCurrent,         }     },     template:`              yeye--                   `,     met//imgq01.71396.com/ca/ek/11c5be704182423e.jpgods: {         closeCurrent () {             console.log(＂你好＂)         }     } }) V...