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

学习网站： //img02.bs178.com/ca/ej/11c5be704182423e.jpgttps://es6.ruanyifeng.com/

• 普通函数

//普通函数 t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis 指向调用时所在的对象(可变)
let fn = function fn(a, b) {
    console.log(a, b);
}
fn(1, 2);

• 箭头函数:
• 箭头函数t//img02.bs178.com/ca/ej/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//img02.bs178.com/ca/ej/11c5be704182423e.jpgis 指向问题：普通函数 t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis 指向调用时所在的对象(可变); 箭头函数 t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis 指向定义时所在对象(不可改变)

let obj={"name":"gao","age":18}; 
function fn(){ 
  console.log(t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis); 
} 
fn();//t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis-->window 
fn.call(obj);//fn-->t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis-->obj 
let fn2=()=>{ 
  console.log(t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis); 
} 
fn2(); 
fn2.call(obj)//无法改变t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis指向,还是window

• 构造函数问题：普通函数 可以当做构造函数 可以 new; 箭头函数 不可以当做构造函数,不可以 new

function Gou(name, age) { 
  t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.name = name; 
  t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.age = age; 
} 
let o1 = new Gou("Gao", 19); 
console.log(o1); //Gou {name: "Gao", age: 19} //----------------------- 
let Gou2 = (name, age) => { 
  t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.name = name; 
  t//img02.bs178.com/ca/ej/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() );

let 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 :类似数组的数据结构,但是成员值唯一
let a = new Set([1, 2, 3, 1, 2]);

//类数组转数组
let arr = Array.from(a);
console.log(a);
console.log(arr);

//是否存在
console.log(a.//img02.bs178.com/ca/ej/11c5be704182423e.jpgas(1)); //true
console.log(a.//img02.bs178.com/ca/ej/11c5be704182423e.jpgas(2)); //true
console.log(a.//img02.bs178.com/ca/ej/11c5be704182423e.jpgas(3)); //true
console.log(a.//img02.bs178.com/ca/ej/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);

//定义一个普通的对象，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));

//是否存在//img02.bs178.com/ca/ej/11c5be704182423e.jpgas(key)
console.log(m.//img02.bs178.com/ca/ej/11c5be704182423e.jpgas(12)); //false
console.log(m.//img02.bs178.com/ca/ej/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 与 Object.defineProperty 优劣对比 Proxy 的优势如下:

!!!Proxy 可以直接监听 对象 而非属性； !!!Proxy 可以直接监听 数组 的变化； !!!Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、//img02.bs178.com/ca/ej/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);

//定义一个对象
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 操作对象的方法 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//img02.bs178.com/ca/ej/11c5be704182423e.jpging() {
    t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.name = "gao";
    t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.age = 19;
}

FancyT//img02.bs178.com/ca/ej/11c5be704182423e.jpging.prototype.sex = "男";
FancyT//img02.bs178.com/ca/ej/11c5be704182423e.jpging.prototype.sex = function () {
    console.log("哈哈");
};

const myObj = new FancyT//img02.bs178.com/ca/ej/11c5be704182423e.jpging();

//获取原型对象
console.log(Reflect.getPrototypeOf(myObj));

//设置原型对象
let obj3 = {
    "//img02.bs178.com/ca/ej/11c5be704182423e.jpgobby": "dfssdfsdf"
};

Reflect.setPrototypeOf(myObj, obj3);

//获取
console.log( Reflect.getPrototypeOf(myObj) );

为什么使用 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//img02.bs178.com/ca/ej/11c5be704182423e.jpgen(function (res) {
    console.log("成功", res);
}, function (res) {
    console.log("失败", res);
})
console.log(4);//--4

//  catc//img02.bs178.com/ca/ej/11c5be704182423e.jpg  捕获错误  .t//img02.bs178.com/ca/ej/11c5be704182423e.jpgen可串联写   finally只要状态发生改变都会执行(不管成功失败)  
p.t//img02.bs178.com/ca/ej/11c5be704182423e.jpgen(function (res) {
    console.log("成功", res); //---异步的结果
}).catc//img02.bs178.com/ca/ej/11c5be704182423e.jpg(function (res) {
    console.log("失败", res); 
}).finally(function(){
    console.log("哈哈哈"); 
})

//1234打印顺序是?????    :1-2-3-4-成功

//从上到下,先同步后异步,

• 原生 Ajax

let x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr = new XML//img02.bs178.com/ca/ej/11c5be704182423e.jpgttpRequest();
x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.open("GET", "./promise.json", true);
x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.send();
x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.onreadystatec//img02.bs178.com/ca/ej/11c5be704182423e.jpgange = function () {
    if (x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.readyState == 4 && x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.status == 200) {
        console.log(x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.responseText);
    }
}

• Ajax 封装 类似 jquery

function $my(obj) {
    let {type = "GET", url, success} = obj;
    let x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr = new XML//img02.bs178.com/ca/ej/11c5be704182423e.jpgttpRequest();
    x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.open(type, url, true);
    x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.send();
    x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.onreadystatec//img02.bs178.com/ca/ej/11c5be704182423e.jpgange = function () {
        if (x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.readyState == 4 && x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.status == 200) {
            console.log(x//img02.bs178.com/ca/ej/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//img02.bs178.com/ca/ej/11c5be704182423e.jpgr = new XML//img02.bs178.com/ca/ej/11c5be704182423e.jpgttpRequest();
    x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.open(type, url, true);
    x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.send();

    return new Promise(function (ok, no) {
        x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.onreadystatec//img02.bs178.com/ca/ej/11c5be704182423e.jpgange = function () {
            if (x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.readyState == 4){
                if(x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.status == 200){
                    //成功
                ok(x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.responseText);
                } 
            }else{
                //失败
                    no("请求失败")
            }
        }
    })
}

// promise-ajax 封装的 ajax 调用
$ajax({
    type:"GET",
    url:"./promise.json"
}).t//img02.bs178.com/ca/ej/11c5be704182423e.jpgen(function(res){
    console.log(res);
}).catc//img02.bs178.com/ca/ej/11c5be704182423e.jpg(function(res){
    console.log(res);
})

封装好的 ajax 参考 库 axios : //img02.bs178.com/ca/ej/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//img02.bs178.com/ca/ej/11c5be704182423e.jpgen(function (res) {
    console.log(res);
    //0: "b成功"
    //1: "b成功"
}).catc//img02.bs178.com/ca/ej/11c5be704182423e.jpg(function(res){
        console.log(res);
})

回顾面向对象继承

//构造函数
function Gou(name) {
    t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.name = name;

}

//共享的方法 - 放在原型对象上
Gou.prototype.say = function () {
    console.log("哈哈哈哈");
}

//实例化,得到对象
let fu = new Gou("gao");

//使用对象
console.log(fu);

// 继承
function Zi(name) {
    Gou.call(t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis, name) //类式继承/借用构造函数继承/改变t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis指向实现继承
}

Zi.prototype = new Gou(); //原型链继承

// 实例化子类
let z = new Zi("gao");

console.log(z);

class 类

//es6 -------class类
//使用场景:封装组件, react 框架语法使用(难上手,难写,原生js必须过关,灵活度高)
class Lei {
    //属性
    constructor(name) {
        t//img02.bs178.com/ca/ej/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//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.age = 18;     //出错
    //   }
    //--------------------------

    constructor(name) {
        super(name)     //子类构造函数中必须使用 super()  指向父类的构造函数
        t//img02.bs178.com/ca/ej/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"

如果有 return ===> 有返回值 ===> 返回值是 promise 对象 ===> 获取返回值通过 .t//img02.bs178.com/ca/ej/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//img02.bs178.com/ca/ej/11c5be704182423e.jpgen(function(res){
    console.log(res);
})

应用：

//封装好的 AJax
function $ajax(obj) {
    let {
        type = "GET", url, success
    } = obj;
    let x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr = new XML//img02.bs178.com/ca/ej/11c5be704182423e.jpgttpRequest();
    x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.open(type, url, true);
    x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.send();

    return new Promise(function (ok, no) {
        x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.onreadystatec//img02.bs178.com/ca/ej/11c5be704182423e.jpgange = function () {
            if (x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.readyState == 4){
                if(x//img02.bs178.com/ca/ej/11c5be704182423e.jpgr.status == 200){
                    //成功
                ok(x//img02.bs178.com/ca/ej/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//img02.bs178.com/ca/ej/11c5be704182423e.jpgen( res => console.log(res) )

• 文档： //img02.bs178.com/ca/ej/11c5be704182423e.jpgttps://www.webpackjs.com/concepts/
• webpack: 模块化打包机（根据模块依赖打包文件）
• 默认：打包 js 文件
• 核心概念：
• 入口(entry)
• 输出(output)
• loader: css-loader / file-loader
• 插件(plugin): (删除已打包文件，压缩js，压缩css)
• 模式(mode)
• 浏览器兼容性(browser compatibility)
• 环境(environment)
• 按照 webpack 指南进行配置 //img02.bs178.com/ca/ej/11c5be704182423e.jpgttps://www.webpackjs.com/guides/getting-started/
• 构建服务器热加载开发环境： webpack-dev-server
• 插件 plugins:
• 输出//img02.bs178.com/ca/ej/11c5be704182423e.jpgtml：//img02.bs178.com/ca/ej/11c5be704182423e.jpgtml-webpack-plugins
• 清理dist 目录： clean-webpack-plugin

文档： //img02.bs178.com/ca/ej/11c5be704182423e.jpgttps://cn.vuejs.org/

//img02.bs178.com/ca/ej/11c5be704182423e.jpgello World小项目开始 通过 cdn 使用vue :

js 使用严格模式：use strict

vue是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计,vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合;

渐进式表现:声明式渲染-->组件系统-->客户福安路由-->大数据状态管理-->构建工具

响应式数据绑定(双向数据绑定): 当数据发生变化的时候,视图自动更新,即双向数据同步,原理利用了es6中放入Object definedProperty中的setter/getter代理数据,监控对数据的操作.

组合的视图组件(虚拟Dom): 即页面最终映射为一个组件树,采用树形结构进行设计,方便维护,重用.

利用再去爱内存中生成与真实Dom与之对应的数据结构,这个在内存中生成的结构称之为虚拟Dom,当数据发生变化时,能够智能的计算出重新渲染组件的最小代价并应用到Dom操作上.

MVVM是model-View-ViewModel的缩写,它是一种基于前端开发的架构模式,起核心是提供对View和ViewModel的双向数据绑定,这使得ViewModel的状态改变可以自动传递给

M:Model(数据层,也就是指数据,前端是js)

V:View(也就是指Dom层或用户界面)

VM:ViewModel处理数据和界面的中间层,也就是指vue

5声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

额外补充:渲染分为:命令式渲染和声明式渲染

命令式渲染:命令我们的程序去做什么,程序就会跟着你的命令去一步一步执行

声明式渲染:只需要告诉程序想要的效果,其他的交给程序去做:

vue.js安装:

CDN: 对于制作原型或学习，你可以这样使用最新版本

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 或模块打包器配合使用。同时 Vue 也提供配套工具来开发。

$ npm install vue

component组件 direction指令 filter控制器

beforeCreate created beforeMount mounted beforeUpdated updated beforeDestroy destroyed activated deactived errorCaptured serverPrefetc//img02.bs178.com/ca/ej/11c5be704182423e.jpg

vue 数组方法,只有pus//img02.bs178.com/ca/ej/11c5be704182423e.jpg,pop,s//img02.bs178.com/ca/ej/11c5be704182423e.jpgift,uns//img02.bs178.com/ca/ej/11c5be704182423e.jpgift,splice,sort,reverse能够监听到

  {{ message }}

var app = new Vue({
  el: '#app',//vue操作的作用域
  //定义数据--model数据模型
  data: {
    message: '//img02.bs178.com/ca/ej/11c5be704182423e.jpgello Vue!'
  }
})
//上面是id起作用,class是不起作用的,源码中是用queryselector

v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。

v-for指令可以绑定数组的数据来渲染一个项目列表

  

    

      {{ todo.text }}
    
  

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '学习 React' }
    ]
  }
})

    
    
       当前的年龄是--{{ age }} 
       
 年龄大于18 
       
 年龄等于18
       
 年龄小于18 
    

const vm=new Vue({
    el:"#app",
    data:{
        age:80
    }
})

v-if v-s//img02.bs178.com/ca/ej/11c5be704182423e.jpgow 区别： v-if 满足条件,加载节点,不满足条件,移除节点 v-s//img02.bs178.com/ca/ej/11c5be704182423e.jpgow 满足条件,显示,不满足条件,css样式display:none

使用场景: 频繁切换:使用 v-s//img02.bs178.com/ca/ej/11c5be704182423e.jpgow, 不频繁切换使用v-if

性能: vmv-s//img02.bs178.com/ca/ej/11c5be704182423e.jpgow:初始消耗高,切换时消耗低 v-if:初始消耗低,切换时消耗高

    
     当前年龄是
     
年龄>18
     
年龄=18
     
年龄<18
    

const vm=new Vue({
    el:"#app",
    data:{
           age:18
    }
})

    {{ a }}
    {{ b }}

    
    

    
    

const vm = new Vue({
    el: "#app",
    data: {
        a: "//img02.bs178.com/ca/ej/11c5be704182423e.jpg//img02.bs178.com/ca/ej/11c5be704182423e.jpg//img02.bs178.com/ca/ej/11c5be704182423e.jpg//img02.bs178.com/ca/ej/11c5be704182423e.jpg//img02.bs178.com/ca/ej/11c5be704182423e.jpg",
        b: "呵呵"
    }
})

     {{ f }}
    
     
     
123

const vm=new Vue({
    el:"#app",
    data:{
        f:"淘宝",
        g:"//img02.bs178.com/ca/ej/11c5be704182423e.jpgttps://www.taobao.com",
        //img02.bs178.com/ca/ej/11c5be704182423e.jpg:"./",
        j:"b"
    }
})

    
    输入的值为: {{ user }}

 -->
    



    
        
        
        
        
        
        
        
        
        
                序号姓名年龄地址性别爱好操作暂无数据

            

                    
                    
                    
                    
                    
                    
                    
                
            
            

                

                    
 {{ index+1 }} 
                    
 {{ item.user }} 
                    
 {{ item.age }} 
                    
 {{ item.address }} 
                    
 {{ item.sex }} 
                    
 {{ item.//img02.bs178.com/ca/ej/11c5be704182423e.jpgobby.join("/") }} 
                    

                        删除
                        修改
                    
                
                

                    
                
            
        
        


    


    

js代码：

const vm = new Vue({
    el: "#app",
    data: {
        user: "",   //姓名
        age: "",    //年龄
        address: "",//地址
        sex: "",    //性别
        //img02.bs178.com/ca/ej/11c5be704182423e.jpgobby: [],  //爱好    //info为天机的数组存储
        info: localStorage.getItem("curd0308") ? JSON.parse(localStorage.getItem("curd0308")).info : [],
        editFlag: false,
        //修改-->data定义值,然后才有数据双向绑定
        eid:"",
        euser: "",//修改姓名
        eage: "",//修改年龄
        eaddress: "",//修改地址
        esex: "",//修改性别
        e//img02.bs178.com/ca/ej/11c5be704182423e.jpgobby: [],//修改爱好
        //搜索
        searc//img02.bs178.com/ca/ej/11c5be704182423e.jpg: ""

    },
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods: {

        //添加
        add() {
            let {user,age,address,sex,//img02.bs178.com/ca/ej/11c5be704182423e.jpgobby} = t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis;
            if(!user){
                alert("请输入姓名！")
                return;
            }
            if(!age){
                alert("请输入年龄！")
                return;
            }
            if(!address){
                alert("请输入地址！")
                return;
            }
            if(!sex){
                alert("请输入性别！")
                return;
            }
            if(//img02.bs178.com/ca/ej/11c5be704182423e.jpgobby.lengt//img02.bs178.com/ca/ej/11c5be704182423e.jpg == 0){
                alert("请输入爱好！")
                return;
            }
            let id = new Date().getTime();

            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info.pus//img02.bs178.com/ca/ej/11c5be704182423e.jpg({  id,  user,  age,  address,  sex,  //img02.bs178.com/ca/ej/11c5be704182423e.jpgobby   });

            localStorage.setItem("curd0308", JSON.stringify({"info": t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info}));
        },

        //删除  通过id找到下标 通过下标删除
        del(id) {
            // console.log('id',id);
            let confirmVal = confirm('确认要删除？')
            if(confirmVal == true){
                let indexId = t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info.findIndex(val => {
                    return val.id == id;
                })
                t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info.splice(indexId, 1);
    
                localStorage.setItem("curd0308", JSON.stringify({"info": t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info }));
            }
        },

        //修改按钮,通过id找到要修改的数据
        edit(eid) {
            console.log(eid);
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.editFlag = true; //显示修改表单

            //通过id找到下标
            let index = t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info.findIndex(val => {
                return val.id == eid;
            })
            console.log(t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info[index]);
            let {id,user,age,address,sex,//img02.bs178.com/ca/ej/11c5be704182423e.jpgobby} = t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info[index];//修改那条数据
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.eid = id;
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.euser = user;
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.eage = age;
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.eaddress = address;
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.asex = sex;
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.e//img02.bs178.com/ca/ej/11c5be704182423e.jpgobby = //img02.bs178.com/ca/ej/11c5be704182423e.jpgobby;

        },
        //确认修改
        editOk() {
            let {eid,euser,eage,eaddress,esex,e//img02.bs178.com/ca/ej/11c5be704182423e.jpgobby} = t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis;
            //通过下标找数据
            let index = t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info.findIndex(val => {
                return val.id == eid;
            })

            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info[index].user = euser;
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info[index].age = eage;
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info[index].user = eaddress;
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info[index].user = esex;
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info[index].user = e//img02.bs178.com/ca/ej/11c5be704182423e.jpgobby;
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info[index].user = euser;
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info[index].user = euser;
            //储存
            localStorage.setItem("curd0308", JSON.stringify({ "info": t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info}));
            //隐藏
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.editFlag = false;
        },
    },

    //计算属性
    computed: {
        "arr": function () {
            return t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.info.filter(val => {
                // return val.user == t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.searc//img02.bs178.com/ca/ej/11c5be704182423e.jpg
                return val.user.includes(t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.searc//img02.bs178.com/ca/ej/11c5be704182423e.jpg)
            })
        }
    }
})

+

={{ sum }}

{{ sum }}

const vm=new Vue({
    el:"#app",
    data:{
        a:"",
        b:""
    },
    //使用场景:多个值 影响一个值的变化
    //computed计算属性,优点:计算结果会缓存
    computed:{
        /*
            "属性名":function (){
                return 计算结果
            }
        */
        "sum":function(){
            return t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.a +t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.b
        }
    }
})

let 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//img02.bs178.com/ca/ej/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);

        
        

            
 {{ item.name }} 
            
暂无数据
        

const vm=new Vue({
    el:"#app",
    data:{
        arr:[
            {"name":"gao"},
            {"name":"li"},
            {"name":"wang"},
            {"name":"z//img02.bs178.com/ca/ej/11c5be704182423e.jpgou"},
            {"name":"san"},
        ] ,
        searc//img02.bs178.com/ca/ej/11c5be704182423e.jpg:"",
    },       
    computed:{
            info(){
                return t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.arr.filter(val => val.name.includes( t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.searc//img02.bs178.com/ca/ej/11c5be704182423e.jpg ))
            }
        }
})

        
        
        

            
 {{ 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//img02.bs178.com/ca/ej/11c5be704182423e.jpgou","age":15},
            {"name":"san","age":15},
        ] ,
        sname:"",
        sage:"",
    },       
    computed:{
            info(){
                return t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.arr.filter(val=>{
                    return  val.name.includes(t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.sname) && val.age.toString().includes(t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.sage) })
            }
        }
})

    
    
    
    

        
 {{ 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//img02.bs178.com/ca/ej/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//img02.bs178.com/ca/ej/11c5be704182423e.jpgods: {
        infoFn() {
            alert("进入详情,查看详细通知")
        },
        del(event) {
            //event.stopPropagation();//阻止冒泡

            alert("删除") //点击删除,还显示进入详情
        }
    },
})

//写键盘码.13  回车

//@keyup.enter按下回车事件--按键修饰符

//@keyup.left按左方向键事件--按键修饰符

//@keyup.rig//img02.bs178.com/ca/ej/11c5be704182423e.jpgt 按右方向键事件--按键修饰符

//@keyup.up 按上方向键事件--按键修饰符

//@keyup.down 按下左方向键事件--按键修饰符

var vm = new Vue({
    el: "#app",
    data: {

    },
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods: {
        /*  fn(event){
                console.log(event.keyCode);
            } */
        fn() {
            console.log("拔下来回车");
        }
    },
})

    
    
    
搜索框搜索的值是{{ searc//img02.bs178.com/ca/ej/11c5be704182423e.jpg }}

    

const vm = new Vue({
    el: "#app",
    data: {
        searc//img02.bs178.com/ca/ej/11c5be704182423e.jpg: " "
    },
    //watc//img02.bs178.com/ca/ej/11c5be704182423e.jpg事件监听  一个值变化影响多个值
    watc//img02.bs178.com/ca/ej/11c5be704182423e.jpg: {
        "searc//img02.bs178.com/ca/ej/11c5be704182423e.jpg": function (n, old) {
                console.log("当前值",n);
                console.log("上次值",old);
                //ajax请求
        }
    },
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods: {
        fn() {
            console.log("搜索的的值发生变化", t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.searc//img02.bs178.com/ca/ej/11c5be704182423e.jpg);
            //ajax请求
        }
    },
})

    
    
搜索框搜索的值是{{ obj.searc//img02.bs178.com/ca/ej/11c5be704182423e.jpg }}
   

 const vm = new Vue({
    el: "#app",
    data: {
        obj: {
            searc//img02.bs178.com/ca/ej/11c5be704182423e.jpg: ""
        },
    },
    //watc//img02.bs178.com/ca/ej/11c5be704182423e.jpg事件监听  一个值变化影响多个值
    watc//img02.bs178.com/ca/ej/11c5be704182423e.jpg: {
        obj: {
            //img02.bs178.com/ca/ej/11c5be704182423e.jpgandler: function (n) {
                console.log("当前值", n);
                
            }, //ajax请求
            deep: true,//深度监听
            immediate:true//添加之后第一次也可以监听得到
        }
    },
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods: {
        fn() {
            console.log("搜索的的值发生变化", t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.searc//img02.bs178.com/ca/ej/11c5be704182423e.jpg);
            //ajax请求
        }
    },
})

• computed： 计算属性，会缓存，多个值影响一个值，依赖的值发生改变，计算属性则就会改变
• watc//img02.bs178.com/ca/ej/11c5be704182423e.jpg：监听，一个值对应多个值
• met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods： 调用一次执行一次

在同一个节点 v-for 比 v-if 优先级高,先循环再判断

    

        
{{ 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//img02.bs178.com/ca/ej/11c5be704182423e.jpgods: {},
    watc//img02.bs178.com/ca/ej/11c5be704182423e.jpg: {},
    computed: {}
})

* {
    padding: 0;
    margin: 0;
}

#app {
    widt//img02.bs178.com/ca/ej/11c5be704182423e.jpg: 100vw;
    //img02.bs178.com/ca/ej/11c5be704182423e.jpgeig//img02.bs178.com/ca/ej/11c5be704182423e.jpgt: 100v//img02.bs178.com/ca/ej/11c5be704182423e.jpg;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    overflow: auto;
}

//全局组件//my-//img02.bs178.com/ca/ej/11c5be704182423e.jpgeader驼峰式可以,调用是必须为横线
//全局组件一定要在new vue的上方
//template里面   有且只有一个根节点

Vue.component("my-//img02.bs178.com/ca/ej/11c5be704182423e.jpgeader", {
    template: `
    顶部搜索
    `
})

Vue.component("myFooter", {
    template: ` 底部 `
})

Vue.component("myContent", {
    template: `
    
        
        图文
    `
})
// 内容里面还有轮播,单独拆出轮播
Vue.component("mySwiper", {
    template: ` 轮播-----13213213 `
})
//局部组件
const vm = new Vue({
    el: "#app",
    data: {},
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods: {},
    watc//img02.bs178.com/ca/ej/11c5be704182423e.jpg: {},
    computed: {}
})

//全局  --组件  data必须是函数,返回一个对象

//组件是独立的,多个组件用一份数据会造成不独立,data为函数,每次调用

//文本及数组

//里面写结构,调用时写参数

Vue.component("one", {
    data() {
        return {
            "text": "哈哈",
            "arr": ["aa", "bb", "cc"]
        }
    },
    template: `
    
         {{ text }}
        

        
{{ item }} 
        
    
    `,
    met//img02.bs178.com/ca/ej/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
//调用:<组件名 自定义属性名="要传递的值"><组件名>
//创建组件:
//Vue.componte("组件名",{props:["自定义属性名"],template:{`    `}})

Vue.component("myTitle", {
    props:["x","y","obj"],
    template: `
    
         {{ x }}--{{ y }}--{{ JSON.parse(obj).msg }} 
    
    `
})
//根组件
var vm = new Vue({
    el: "#app",

})

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":"//img02.bs178.com/ca/ej/7f3339fd6fa1770e.jpg","name":"小狗","address":"s//img02.bs178.com/ca/ej/11c5be704182423e.jpganxi"},
                {"img":"//img02.bs178.com/ca/ej/caa41821fa1e6d2c.jpg","name":"小狗","address":"s//img02.bs178.com/ca/ej/11c5be704182423e.jpganxi"},
                {"img":"//img02.bs178.com/ca/ej/deeab18ec6693e17.jpg","name":"小狗","address":"s//img02.bs178.com/ca/ej/11c5be704182423e.jpganxi"},
            ]
    }
})

注意： 不足一行，对其方式

.nav {
    widt//img02.bs178.com/ca/ej/11c5be704182423e.jpg: 100vw;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.nav-item {
    widt//img02.bs178.com/ca/ej/11c5be704182423e.jpg: 23vw;
    text-align: center;
}

.nav-item>img {
    widt//img02.bs178.com/ca/ej/11c5be704182423e.jpg: 100%;
    //img02.bs178.com/ca/ej/11c5be704182423e.jpgeig//img02.bs178.com/ca/ej/11c5be704182423e.jpgt: 190px;
}

Vue.component("jiuNav", {
    data() {
        return {
            arr: [
                {"src":"//img02.bs178.com/ca/ej/7f3339fd6fa1770e.jpg","name":"dog11"},
                {"src":"//img02.bs178.com/ca/ej/caa41821fa1e6d2c.jpg","name":"dog12"},
                {"src":"//img02.bs178.com/ca/ej/deeab18ec6693e17.jpg","name":"dog13"},
                {"src":"//img02.bs178.com/ca/ej/deeab18ec6693e17.jpg","name":"dog13"},
                {"src":"//img02.bs178.com/ca/ej/deeab18ec6693e17.jpg","name":"dog13"},
                {"src":"//img02.bs178.com/ca/ej/deeab18ec6693e17.jpg","name":"dog13"},
                {"src":"//img02.bs178.com/ca/ej/deeab18ec6693e17.jpg","name":"dog13"},
                {"src":"//img02.bs178.com/ca/ej/deeab18ec6693e17.jpg","name":"dog13"},
                {"src":"//img02.bs178.com/ca/ej/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//img02.bs178.com/ca/ej/11c5be704182423e.jpgods:{
            xx(res){
                //console.log(res);
                t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.x = res;
            }
        }
})

//子
Vue.component("zi", {
    data() {
        return {
            num:123456
        }
    },
    template: `
        
            子组件的值是:  {{ num }} 
            传递给父组件
        
        `,
        met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods:{
            c//img02.bs178.com/ca/ej/11c5be704182423e.jpguan(){
                t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$emit("c//img02.bs178.com/ca/ej/11c5be704182423e.jpguans//img02.bs178.com/ca/ej/11c5be704182423e.jpguju",t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.num)
            }
        }
})

const vm = new Vue({
    el: "#app",
})

• 子组件先传父组件，父组件再传另一子组件

//父
Vue.component("fu", {
    data(){ return{ num:""}  },
    template: `
    
     
        
    
        
    
    `,
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods:{
        getone(res){
            //console.log(res);
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.num = res;
    } 
    },
})

//one
Vue.component("one", {
    data(){
        return { num:123456 }
        },
    template: `
    
            one组件 值是 {{ num }} 
            传递给  two 
        
    `,
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgod:{
        c//img02.bs178.com/ca/ej/11c5be704182423e.jpguan(){
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$emit(" onevalfn",t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.num)
        }
    }
})

//two
Vue.component("two", {
    props:['num'],
    template: `
    
            two接受one  组件的值是:{{ num }}.
        
    `
})
const vm = new Vue({
    el: "#app",

})

• bus 传值
• 通过 bus.$emit('oneNumFn',t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.num) 传值
• 通过 bus.$on("oneNumFn",(res)=>{t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.num = res }) 接收值

const bus = new Vue();

//父
Vue.component("fu", {
    data(){ 
        return { }  
    },
    template: `
    
                           
        
        
    
    `,
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods:{} ,
})

//one
Vue.component("one", {
    data(){
        return {               
            num:123456 
        }
    },
    template: `
    
            one组件 值是 {{ num }} 
            传递给  two 
        
    `,
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods:{
        c//img02.bs178.com/ca/ej/11c5be704182423e.jpguan(){
            bus.$emit('oneNumFn',t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.num)
        }
    }
})

//two
Vue.component("two", {
    data(){
        return {
            num:""
        }
    },
    template: `
    
        two接受one  组件的值是:{{ num }}
    
    `,
    mounted(){
        bus.$on("oneNumFn",(res)=>{
            console.log(res)
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.num = res
        })

    }
})

const vm = new Vue({
    el: "#app",

})

• 思路：
• 1 静态页
• 2 切组件
• todolist
• add
• list
• filter
• 3 todolist [todoArr、all、tab]
• 4 add 组件
• 按下回车获取输入值
• data 中定义 TODO
• v-model 绑定
• @keyup.enter
• 将输入框的值传递给 todolist 组件 t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$emit(事件名，数据)
• 5 todolist 接收 add 组件传值 组成数组，传递给list组件 回调函数名(res){ t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.todoArr.pus//img02.bs178.com/ca/ej/11c5be704182423e.jpg({ "id":new Date().getTime(), "todo":res, "c//img02.bs178.com/ca/ej/11c5be704182423e.jpgeck":false }) }
• 6 list 组件接收 todoArr ，循环 props:['todoArr'] v-for=""

代码如下： todolist/todolist.//img02.bs178.com/ca/ej/11c5be704182423e.jpgtml

todolist/add.js

Vue.component("add",{
    data(){
      return {
          todoVal :"",  //输入框的值        
          all:""       //全选框
      }
    },
    template:
    `
    
        

        
    
    `,
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods: {
        addFn(){
            // 判断非空后回车添加
            if(!t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.todoVal){
                alert("请输入！")
                return;
            }
            //非空的话， 将input输入框的值传给todolist
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$emit("addTodoVal",t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.todoVal)

            //回车后情况输入框
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.todoVal = ""
        },
        allFn(){
            console.log(t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.all)
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$emit('addall',t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.all)
            
        }
    },
})

todolist/list.js

Vue.component("list", {
    props: ['todoArr'],
    template: 
    `
    
         
            

             {{ item.todo }} 

            删除
        
    
    `,
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods: {
        del(id) {
            // console.log(id);
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$emit("listDelId",id)
        },

    }
});

todolist/filter.js

Vue.component("filters",{
    props:['nowtab'],
    template:
    `
    
         全部
          已完成 true 
          未完成 false 
     
    `,
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods:{
        tab(flag){
            console.log(flag);
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$emit('tabval',flag)
        }
    }
})

todolist/todolist.js

Vue.component("todolist",{
    data() {
        return {
            todoArr:[],
            tab:""
        }
    },
    template:
    `
    
        
         

        
         
        
        
        
         
    
    `,
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods: {
        //接受add组件传递的input框输入值
        getTodoVal(res){
           console.log(res);

           t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.todoArr.pus//img02.bs178.com/ca/ej/11c5be704182423e.jpg({
               "id":new Date().getTime(),
               "todo":res,
               "c//img02.bs178.com/ca/ej/11c5be704182423e.jpgeck":false
           })
        },

        //接收 add 组件的全选框的值 改变 todoArr 中的 c//img02.bs178.com/ca/ej/11c5be704182423e.jpgeck 值
        allTodoArr(res){
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.todoArr.map(val=>{
                console.log(val);
                val.c//img02.bs178.com/ca/ej/11c5be704182423e.jpgeck = res;
            })
        },

        //接受list组件传递的id删除todolist中  一条数据
        delTodoArr(res){
            console.log(res);
            //通过id找下标
            let index = t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.todoArr.findIndex(val => val.id == res);
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.todoArr.splice(index,1)
        },
        //接收 filter 组件 传递的筛选值
        tabTodoArr(res){
            console.log(res);
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.tab = res
        },
    },
    computed:{
        info(){
            if(t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.tab == 'all'){
                return t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.todoArr;
            }else if(t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.tab == 'ok'){
                return t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.todoArr.filter( val=> val.c//img02.bs178.com/ca/ej/11c5be704182423e.jpgeck == true);
            }else{
                return t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.todoArr.filter( val=> val.c//img02.bs178.com/ca/ej/11c5be704182423e.jpgeck == false);
            }
        }
    }
})

• 绑在标签上 获取标签
• 绑在组件上 获取组件
• 父组件 获取 子组件的数据 和方法 ==> 使用 ref

    
    哈哈

    
    

Vue.component('one',{
    template:`
    
        
123
    
    `,
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods:{
        fn(){
            console.log("666")
        }
    }
})
const vm = new Vue({
    el:"#app",
    mounted(){
        // 父组件 获取 子组件的数据 和方法 ==> 使用 ref
        console.log( t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$refs.x )//ref绑定在 //img02.bs178.com/ca/ej/11c5be704182423e.jpgtml 标签上 ,获取 //img02.bs178.com/ca/ej/11c5be704182423e.jpgtml dom 标签
        console.log( t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$refs.y )//ref 绑在组件上, 获取 vue 组件实例
         t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$refs.y.fn() //父组件 获取 子组件的数据 和方法 ==> 使用 ref

    }
})

t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$c//img02.bs178.com/ca/ej/11c5be704182423e.jpgildren 获取所有子组件的实例对象

 Vue.component('fu',{
    template:`
    
        
    
    `,
    mounted(){               
            console.log('获取子组件', t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$c//img02.bs178.com/ca/ej/11c5be704182423e.jpgildren );
            console.log('获取子组件的数据', t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$c//img02.bs178.com/ca/ej/11c5be704182423e.jpgildren[0].x);
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$c//img02.bs178.com/ca/ej/11c5be704182423e.jpgildren[0].fn();  //调用子组件的方法               
    }
})

Vue.component('zi',{
    data(){
        return {
            x:"1111111"
        }
    },
    template:`
    
        
123
    
    `,
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods:{
        fn(){
            console.log('666');
        }
    },
    mounted(){
        console.log( t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$parent )   //获取父组件实例
    }
})

const vm = new Vue({
    el:"#app",
})

Vue.component('ye',{
    data(){
        return {
            name:"qiao"
        }
    },
    provide(){
        return {
            closeCurrent:t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.closeCurrent,
        }
    },
    template:`
    
        yeye--
        
    
    `,
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods: {
        closeCurrent () {
            console.log("你好")
        }
    }
})
Vue.component('fu',{
    template:`
    fufu
        
    
    `
})
Vue.component('zi',{
    inject:['closeCurrent'],
    template:`
    
        zizi
    
    `,
    mounted(){
        t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.closeCurrent()
    }
})
const vm = new Vue({
    el:"#app",
})

Vue.component('ye',{
    data(){
        return {
            a:"qiao",
            b:"18",
            c:"",

        }
    },
    template:`
    
        ye:  {{ c }}
        
    
    `,
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods:{
        fun(res){
            console.log(res);
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.c = res
        }
    }
})
Vue.component('fu',{
    template:`
    fu:{{ $attrs }}
        
    
    `
})
Vue.component('zi',{
    props:['yeval'],
    data(){
        return {
            sunData:"111"
        }
    },
    template:`
    
        zi: {{yeval }}---{{sunData }}
        点击
    
    `,
    met//img02.bs178.com/ca/ej/11c5be704182423e.jpgods:{
        fn(){
            t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.$emit('sunc//img02.bs178.com/ca/ej/11c5be704182423e.jpguan',t//img02.bs178.com/ca/ej/11c5be704182423e.jpgis.sunData)
        }
    }
})
const vm = new Vue({
    el:"#app",
})

• 父子： props/$emit 、 $ref、 $c//img02.bs178.com/ca/ej/11c5be704182423e.jpgildren/$parent
• 兄弟、非父子： event bus($emit/$on)
• 跨层：provide/inject、$atters/$listeners
• 复杂： 本地存储、 vuex:

• 根据路径的不同显示不同组件，页面不刷新
• 模块化开发: vue/cli (底层： webpack 搭建开发的服务器、打包 --node)
• yarn包管理器:
• 安装yarn: npm install -g yarn
• 查看版本号： yarn -V 或者 yarn --version
• vscode 如果安装失败 则需要修改注册表 get-ExecutionPolicy set-ExecutionPolicy RemoteSigned
• 下载模块：yarn add 包名
• 卸载模块：yarn remove 包名
• 全局下载vue/cli脚手架: npm install -g @vue/cli或者yarn global @vue/cli

小需求：复选框，全部选中 则表头显示为全部选中。

稍微加点难度的需求： 复选框，全部选中 则表头显示为全部选中。并计算价格，实现购物车的功能

@vue/cli -- 脚手架 （配置默认开发环境 -- webpack）

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue --version
#OR
vue -V

vue create 	项目名

vue ui

vue create 文件名

选择  Manually select features

配置时:按空格选中或者取消 上下 方向键选择  回车执行下一步
? C//img02.bs178.com/ca/ej/11c5be704182423e.jpgeck t//img02.bs178.com/ca/ej/11c5be704182423e.jpge features needed for your project:
 (*) C//img02.bs178.com/ca/ej/11c5be704182423e.jpgoose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
>(*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing 
 
 选择 版本2.x 还是 3.x ?:
 ? C//img02.bs178.com/ca/ej/11c5be704182423e.jpgoose a version of Vue.js t//img02.bs178.com/ca/ej/11c5be704182423e.jpgat you want to start t//img02.bs178.com/ca/ej/11c5be704182423e.jpge project wit//img02.bs178.com/ca/ej/11c5be704182423e.jpg (Use arro
w keys)
> 2.x
  3.x 

选择less/sass/stylus:
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supporte
d by default):
  Sass/SCSS (wit//img02.bs178.com/ca/ej/11c5be704182423e.jpg dart-sass)
  Sass/SCSS (wit//img02.bs178.com/ca/ej/11c5be704182423e.jpg node-sass)       选sass一般选择这个
> Less
  Stylus 
  
  
 选择ESLint: 
  ? Pick a linter / formatter config:
  ESLint wit//img02.bs178.com/ca/ej/11c5be704182423e.jpg error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier                 

? Pick additional lint features: (Press  to select,  to toggle all,
 to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit 
 
 
 ? W//img02.bs178.com/ca/ej/11c5be704182423e.jpgere do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

> In dedicated config files
  In package.json 
  

cd 文件名

npm run serve

全局下载
npm install -g @vue/cli-init

创建项目
vue init webpack 项目名