ES6语法及vue复习

 <script>        //var声明的变量往往会越域        //let声明的变量具有严格的局部作用 { vara=1; letb=2; } console.log(a);//1 console.log(b);//ReferenceError:bisnotdefined          //var可多次声明      //let只能声明一次 varm=1 varm=2 letn=3         //letn=4 console.log(m)//2 console.log(n)//Identifier'n'hasalreadybeendeclared         //var会变量提升 //let没有变量增加 console.log(x);//undefined varx=10; console.log(y);//ReferenceError:yisnotdefined lety=20;          // let         //1.声明后不得变更         //2.但声明必须初始化，否则会报错 consta=1; a=3;//UncaughtTypeError:Assignmenttoconstantvariable.          </script>  

数组解构

let arr = [1,2,3];  //我们以前只能通过角标获得值。ES6 可以这样：  const [x,y,z] = arr;// x，y，z 将与 arr 中间的每个位置对应于取值  // 然后打印  console.log(x,y,z);  

对象解构

const person = {     name: "jack",     age: 21,     language: ['java', 'js', 'css'] }  // 解构表达式获取值 person 每个属性和左侧对应的赋值  const { name, age, language } = person;  // 等价于下面  // const name = person.name; // const age = person.age; // const language = person.language;  // 可单独打印  console.log(name); console.log(age); console.log(language);  //扩展:如果你想要 name 赋值给其他变量，可以如下,nn 是新的变量名 const { name: nn, age, language } = person; console.log(nn); console.log(age); console.log(language);  

ES6 扩展了几个新的字符串 API：

• includes()：返回布尔值表示是否找到了参数字符串。

• startsWith()：返回布尔值表示参数字符串是否在原字符串的头部。

• endsWith()：返回布尔值表示参数字符串是否在原字符串的尾部

 let str = "hello.vue";         console.log(str.startsWith("hello"));//true         console.log(str.endsWith(".vue"));//true         console.log(str.includes("e"));//true         console.log(str.includes("hello"));//true  

字符串模板

模板字符串相当于加强版字符串，反引号 `,除了作为符串外，还可用于定义多行

变量和表达式也可以添加到字符串中

// 1.多行字符串  let ss = `  <div>  <span>hello world<span>  </div>  `  console.log(ss)  // 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放  入 JavaScript 表达式。  let name = "张三";  let age = 18;  let info = `我是${name}，今年${age}了`;  console.log(info)  // 3.在字符串中调用函数  function fun() {  return "这是函数"  }  let sss = `O(∩_∩)O 哈哈~，${fun()}`;  console.log(sss); // O(∩_∩)O 哈哈~，这是函数  

默认值函数参数

//在 ES6 过去，我们不能为函数参数设置默认值，只能使用灵活的写作方法： function add(a, b) {  // 判断 b 是否为空，为空给予默认值 1 b = b || 1;  return a   b;  }  // 传一个参数 console.log(add(10));  ///现在可以这样写:默认值直接写在参数上，默认值不传就会自动使用。  function add2(a , b = 1) {  return a   b;  }  // 传一个参数 console.log(add2(10))  

不定参数

不确定参数用于表示不确定参数的数量，形如，…变量名，由…由具名参数标识符组成。 具名参数只能放在参数列表的最后，只有一个不确定的参数

function fun(...values) {     console.log(values.length) }  fun(1, 2)  //2 fun(1, 2, 3, 4) //4  

//以前声明一个方法
// var print = function (obj) {

//

console.log(obj);

// }

// 可以简写为：
var print = obj => console.log(obj);

// 测试调用
print(100);

// 两个参数的情况：

var sum = function (a, b) {

return a + b;

}

// 简写为：

//当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var sum2 = (a, b) => a + b;

//测试调用
console.log(sum2(10, 10));//20

// 代码不止一行，可以用`{}`括起来
var sum3 = (a, b) => {

c = a + b;

return c;

};

//测试调用
console.log(sum3(10, 20));//30 

箭头函数结合解构表达式

//需求，声明一个对象，hello 方法需要对象的个别属性
//以前的方式：
const person = {
    name: "jack",
    age: 21,
    language: ['java', 'js', 'css']
}

function hello(person) {
    console.log("hello," + person.name)
}

//现在的方式
var hello2 = ({ name }) => { console.log("hello," + name) };

//测试
hello2(person); 

ES6 给 Object 拓展了许多新的方法，如：

• keys(obj)：获取对象的所有 key 形成的数组

• values(obj)：获取对象的所有 value 形成的数组

• entries(obj)：获取对象的所有 key 和 value 形成的二维数组。格式：[[k1,v1],[k2,v2],...]

• assign(dest, ...src) ：将多个 src 对象的值 拷贝到 dest 中。（第一层为深拷贝，第二层为浅拷贝）

const person = {
    name: "jack",
    age: 21,
    language: ['java', 'js', 'css']
}

console.log(Object.keys(person));//["name", "age", "language"]
console.log(Object.values(person));//["jack", 21, Array(3)]
console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

//Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象。
Object.assign(target, source1, source2);
console.log(target)//{a: 1, b: 2, c: 3} 

声明对象简写

// 传统
const person1 = { age: age, name: name }
console.log(person1)

// ES6：属性名和属性值变量名一样，可以省略
const person2 = { age, name }
console.log(person2) //{age: 23, name: "张三"} 

对象的函数属性简写

let person = {
    name: "jack",
    // 以前：
    eat: function (food) {
        console.log(this.name + "在吃" + food);
    },

    // 箭头函数版：这里拿不到 this
    eat2: food => console.log(person.name + "在吃" + food),

    // 简写版：
    eat3(food) {
        console.log(this.name + "在吃" + food);
    }
}
person.eat("apple"); 

对象拓展运算符 拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

// 1、拷贝对象（深拷贝）
let person1 = { name: "Amy", age: 15 }
let someone = { ...person1 }
console.log(someone) //{name: "Amy", age: 15}

// 2、合并对象
let age = { age: 15 }
let name = { name: "Amy" }
let person2 = { ...age, ...name } //如果两个对象的字段名重复，后面对象字段值会覆盖前面对象的字段值
console.log(person2) //{age: 15, name: "Amy"} 

// map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
let arr = ['1', '20', '-5', '3'];
console.log(arr)
arr = arr.map(s => parseInt(s));
console.log(arr) 

语法： arr.reduce(callback,[initialValue])

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元 素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调 用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）

1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））

2、currentValue （数组中当前被处理的元素）

3、index（当前元素在数组中的索引）

4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

const arr = [1,20,-5,3];

//没有初始值：
console.log(arr.reduce((a,b)=>a+b));//19
console.log(arr.reduce((a,b)=>a*b));//-300//指定初始值：
console.log(arr.reduce((a,b)=>a+b,1));//20
console.log(arr.reduce((a,b)=>a*b,0));//-0 

在 JavaScript 的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致 JavaScript 的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。一旦有一连 串的 ajax 请求 a,b,c,d… 后面的请求依赖前面的请求结果，就需要层层嵌套。这种缩进和层 层嵌套的方式，非常容易造成上下文代码混乱，我们不得不非常小心翼翼处理内层函数与外层函数的数据，一旦内层函数使用了上层函数的变量，这种混乱程度就会加剧…总之，这种层叠上下文的层层嵌套方式，着实增加了神经的紧张程度。

案例：用户登录，并展示该用户的各科成绩。在页面发送两次请求：

1. 查询用户，查询成功说明可以登录

2. 查询用户成功，查询科目

3. 根据科目的查询结果，获取去成绩

分析：此时后台应该提供三个接口，一个提供用户查询接口，一个提供科目的接口，一个提供各科成绩的接口，为了渲染方便，最好响应 json 数据。在这里就不编写后台接口了，而是提供三个 json 文件，直接提供 json 数据，模拟后台接口：

user.json

{
    "id": 1,
    "name": "zhangsan",
    "password": "123456"
} 

user_corse_1.json

{
    "id": 10,
    "name": "chinese"
} 

corse_score_10.json

{
    "id": 100,
    "score": 90
} 

回调函数嵌套的噩梦：层层嵌套。

$.ajax({
    url: "mock/user.json",
    success(data) {
        console.log("查询用户：", data);
        $.ajax({
            url: `mock/user_corse_${data.id}.json`,
            success(data) {
                console.log("查询到课程：", data);
                $.ajax({
                    url: `mock/corse_score_${data.id}.json`,
                    success(data) {
                        console.log("查询到分数：", data);
                    },
                    error(error) {
                        console.log("出现异常了：" + error);
                    }
                });
            },
            error(error) {
                console.log("出现异常了：" + error);
            }
        });
    },
    error(error) {
        console.log("出现异常了：" + error);
    }
}); 

我们可以通过 Promise 解决以上问题。 Promise 语法

const promise = new Promise(function (resolve, reject) {
    // 执行异步操作
    if (/* 异步操作成功 */) {
        resolve(value);// 调用 resolve，代表 Promise 将返回成功的结果
    } else {
        reject(error);// 调用 reject，代表 Promise 会返回失败结果
    }
}); 

使用箭头函数可以简写为：

const promise = new Promise((resolve, reject) =>{
    // 执行异步操作
    if (/* 异步操作成功 */) {
        resolve(value);// 调用 resolve，代表 Promise 将返回成功的结果
    } else {
        reject(error);// 调用 reject，代表 Promise 会返回失败结果
    }
}); 

这样，在 promise 中就封装了一段异步执行的结果。 处理异步结果

如果我们想要等待异步执行完成，做一些事情，我们可以通过 promise 的 then 方法来实现。 如果想要处理 promise 异步执行失败的事件，还可以跟上 catch：

promise.then(function (value) {
    // 异步执行成功后的回调
}).catch(function (error) {
    // 异步执行失败后的回调
}) 

Promise 改造以前嵌套方式

 new Promise((resolve, reject) => {
            //1、异步操作
            $.ajax({
                url: "mock/user.json",
                success: function (data) {
                    console.log("查询用户成功:", data)
                    resolve(data);
                },
                error: function (err) {
                    reject(err);
                }
            });
        }).then((obj) => {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: `mock/user_corse_${obj.id}.json`,
                    success: function (data) {
                        console.log("查询用户课程成功:", data)
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                });
            })
        }).then((data) => {
            console.log("上一步的结果", data)
            $.ajax({
                url: `mock/corse_score_${data.id}.json`,
                success: function (data) {
                    console.log("查询课程得分成功:", data)
                },
                error: function (err) {
                    console.log("出现异常了：" + err);
                }
            });
        }) 

优化处理 优化：通常在企业开发中，会把 promise 封装成通用方法，如下：封装了一个通用的 get 请求方法；

 let get = function get(url, data) { // 实际开发中会单独放到 common.js 中
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    data: data,
                    success: function (data) {
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                })
            });
        }

        // 使用封装的 get 方法，实现查询分数
        get("mock/user.json")
            .then((data) => {
                console.log("用户查询成功~~~:", data)
                return get(`mock/user_corse_${data.id}.json`);
            })
            .then((data) => {
                console.log("课程查询成功~~~:", data)
                return get(`mock/corse_score_${data.id}.json`);
            })
            .then((data)=>{
                console.log("课程成绩查询成功~~~:", data)
            })
            .catch((err)=>{
                console.log("出现异常",err)
            }); 

通过比较，我们知道了 Promise 的扁平化设计理念，也领略了这种上层设计带来的好处。我们的项目中会使用到这种异步处理的方式；

什么是模块化 模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。而 JS 中没有包的概念，换来的是 模块。

模块功能主要由两个命令构成：export和import。

• export命令用于规定模块的对外接口。

• import命令用于导入其他模块提供的功能。

比如我定义一个 js 文件:hello.js，里面有一个对象

const util = {
    sum(a,b){
        return a + b;
    }
} 

我可以使用 export 将这个对象导出：

export {util}; 

也可以简写为

export const util = {
    sum(a,b){
        return a + b;
    }
} 

export不仅可以导出对象，一切 JS 变量都可以导出。比如：基本类型变量、函数、数组、对象。 当要导出多个值时，还可以简写。比如我有一个文件：user.js：

var name = "jack"
var age = 21
export {name,age} 

省略名称

上面的导出代码中，都明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出变量名，否则就会出错。

因此 js 提供了default关键字，可以对导出的变量名进行省略

// 无需声明对象的名字
export default {
    sum(a,b){
        return a + b;
    }
} 

这样，当使用者导入时，可以任意起名字

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

例如我要使用上面导出的 util：

// 导入 util
import util from 'hello.js'
// 调用 util 中的属性
util.sum(1,2)

要批量导入前面导出的 name 和 age：
import {name, age} from 'user.js'
console.log(name + " , 今年"+ age +"岁了") 

• M：即 Model，模型，包括数据和一些基本操作

• V：即 View，视图，页面渲染结果

• VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉）

在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染 到 View 中。而后当用户操作视图，我们还需要通过 DOM 获取 View 中的数据，然后同步到Model 中。而 MVVM 中的VM要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model和 View 之间是如何互相影响的：

• 只要我们 Model 发生了改变，View 上自然就会表现出来。

• 当用户修改了 View，Model 中的数据也会跟着改变。

把开发人员从繁琐的 DOM 操作中解放出来，把关注点放在如何操作 Model 上

一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num">
        <button v-on:click="num++">点赞</button>
        <button v-on:click="cancle">取消</button>
        <h2> {
    
       {name}} ,非常帅，有{
    
       {num}}个人为他点赞{
    
       {hello()}}</h2>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //1、vue声明式渲染
        let vm = new Vue({
            // ，Vue 就可以基于 id 为`app`的 div 元素作为模板进行渲染了。在这个 div 范围以外的部分是无法使用 vue 特性的
            el: "#app",//绑定元素
            data: {  //封装数据
                name: "张三",
                num: 1
            },
            methods:{  //封装方法
                cancle(){
                    this.num -- ;
                },
                hello(){
                    return "1"
                }
            }
        });

        //2、双向绑定,模型变化，视图变化。反之亦然。
        //3、事件处理
        //v-xx：指令
        //1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
        //2、指令来简化对dom的一些操作。
        //3、声明方法来做更复杂的操作。methods里面可以封装方法。

    </script>
</body>
</html> 

• 首先通过 new Vue()来创建 Vue 实例
• 然后构造函数接收一个对象，对象中有一些属性：
  • el：是 element 的缩写，通过 id 选中要渲染的页面元素，本例中是一个 div
  • data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
    • name：这里我们指定了一个 name 属性
• 页面中的h2元素中，我们通过{ {name}}的方式，来渲染刚刚定义的 name 属性。

双向绑定：

效果：我们修改表单项，num 会发生变化。我们修改 num，表单项也会发生变化。为了实时观察到这个变化，我们将 num 输出到页面。

我们不需要关注他们为什么会建立起来关联，以及页面如何变化，我们只需要做好数据和视图的关联即可（MVVM） 事件绑定

<button v-on:click="num++">关注</button>
<h2>
    {
    
       {name}}，非常帅！！！有{
    
       {num}}个人为他点赞。
</h2> 

给上述案例添加一个按钮。

• 这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作 num

• 普通 click 是无法直接操作 num 的。

• 未来我们会见到更多 v-xxx，这些都是 vue 定义的不同功能的指令。

当 Vue 实例被创建时，它会尝试获取在 data 中定义的所有属性，用于视图的渲染，并且监视 data 中的属性变化，当 data 发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

什么是指令？

• 指令 (Directives) 是带有 v- 前缀的特殊特性。

• 指令特性的预期值是：单个 JavaScript 表达式。

• 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

花括号

格式：{ {表达式}}

说明：

• 该表达式支持 JS 语法，可以调用 js 内置函数（必须有返回值）

• 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：let a = 1 + 1;

• 可以直接获取 Vue 实例中定义的数据或函数

使用{ {}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{ {}}， 加载完毕后才显示正确数据，我们称为插值闪烁。

可以使用 v-text 和 v-html 指令来替代{ {}}

• v-text：将数据输出到元素内部，如果输出的数据有 HTML 代码，会作为普通文本输出

• v-html：将数据输出到元素内部，如果输出的数据有 HTML 代码，会被渲染

<div id="app">
    v-text:<span v-text="hello"></span> <br/>
    v-html:<span v-html="hello"></span>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
            data: {
            hello: "<h1>大家好</h1>"
        }
    })
</script> 

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P2a0VXMT-1653552047457)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2571b459cd824e72b6b342ba2f64fa83~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

并且不会出现插值闪烁，当没有数据时，会显示空白或者默认数据。

刚才的 v-text、v-html、v-bind 可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的 v-model 是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model 的可使用元素有：

v-on 指令用于给页面元素绑定事件。

语法： v-on:事件名="js 片段或函数名"

<div id="app">
    <!--事件中直接写 js 片段-->
    <button v-on:click="num++">点赞</button>
    <!--事件指定一个回调函数，必须是 Vue 实例中定义的函数-->
    <button v-on:click="decrement">取消</button>
    <h1>有{
    
       {num}}个赞</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data: {
        num: 100
        },
        methods: {
            decrement() {
                this.num--; //要使用 data 中的属性，必须 this.属性名
            }
        }
    })
</script> 

另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，

而不是去处理DOM事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

• .stop ：阻止事件冒泡到父元素

• .prevent：阻止默认事件发生

• .capture：使用事件捕获模式

• .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）

• .once：只执行一次

<div id="app">
    <!--右击事件，并阻止默认事件发生-->
    <button v-on:contextmenu.prevent="num++">点赞</button>
    <br />
    <!--右击事件，不阻止默认事件发生-->
    <button v-on:contextmenu="decrement($event)">取消</button>
    <br />
    <h1>有{
    
       {num}}个赞</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    let app = new Vue({
    el: "#app",
    data: {
        num: 100
    },
    methods: {
        decrement(ev) {
            // ev.preventDefault();
            this.num--;
        }
    }
    })
</script> 

效果：右键“点赞”，不会触发默认的浏览器右击事件；右键“取消”，会触发默认的浏览器右击事件）

按键修饰符

遍历数据渲染页面是非常常用的需求，Vue 中通过 v-for 指令来实现。

遍历数组

语法：v-for="item in items"

• items：要遍历的数组，需要在 vue 的 data 中定义好。

• item：迭代得到的当前正在遍历的元素

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法：v-for="(item,index) in items"

• index：迭代到的当前元素索引，从 0 开始

遍历对象

v-for 除了可以迭代数组，也可以迭代对象。语法基本类似

语法： v-for="value in object"

v-for="(value,key) in object"

v-for="(value,key,index) in object"

• 1 个参数时，得到的是对象的属性值

• 2 个参数时，第一个是属性值，第二个是属性名

• 3 个参数时，第三个是索引，从 0 开始

<div id="app">
    <ul>
        <li v-for="(value, key, index) in user">
            {
    
       {index + 1}}. {
    
       {key}} - {
    
       {value}}
        </li>
    </ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    let vm = new Vue({
    el: "#app",
    data: {
        user: { name: '张三', gender: '男', age: 18 }
    }
})
</script> 

Key

用来标识每一个元素的唯一特征，这样 Vue 可以使用“就地复用”策略有效的提高渲染的效率。

<ul>
    <li v-for="(item,index) in items" :key=”index”></li>
</ul>
<ul>
    <li v-for="item in items" :key=”item.id”></li>
</ul> 

如果 items 是数组，可以使用 index 作为每个元素的唯一标识

如果 items 是对象数组，可以使用 item.id 作为每个元素的唯一标识

v-if，顾名思义，条件判断。当得到结果为 true 时，所在的元素才会被渲染。

v-show，当得到结果为 true 时，所在的元素才会被显示。

语法：v-if=“布尔表达式”, v-show=“布尔表达式”

当 v-if 和 v-for 出现在一起时，v-for 优先级更高。也就是说，会先遍历，再判断条件

• { {index + 1}}. { {user.name}} - { {user.gender}} - { {user.age}}

v-else 和 v-else-if

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成

<li>总价：{
    
       {totalPrice}}</li>
computed: {
    totalPrice(){
        return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum;
    }
} 

watch 可以让我们监控一个值的变化。从而做出相应的反应。

 <div id="app">
        <ul>
            <li>西游记：价格{
    
       {xyjPrice}}，数量：
            <input type="number" v-model="xyjNum"></li>
            <li>水浒传：价格{
    
       {shzPrice}}，数量：
            <input type="number" v-model="shzNum"></li>
            <li>总价：{
    
       {totalPrice}}</li>
            {
    
       {msg}}
        </ul>
    </div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            xyjPrice: 56.73,
            shzPrice: 47.98,
            xyjNum: 1,
            shzNum: 1,
            msg:""
        },
        computed: {
            totalPrice(){
                return this.xyjPrice*this.xyjNum + this.shzPrice*th is.shzNum;
            }
        },
        watch: {
            xyjNum(newVal, oldVal){
                if(newVal >= 3){
                this.msg = "西游记没有更多库存了";
                this.xyjNum = 3;
                }else{
                this.msg = "";
                }
            }
        }
    })
</script> 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m0uHET8o-1653552047458)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0203cd38d3e44a1a924b15d3708785e~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的情况下，过滤器都是有用的，比如尽可能保持 API 响应的干净，并在前端处理数据的格式。

示例：展示用户列表性别显示男女

<!-- 使用代码块实现，有代码侵入 -->
<td>{
    
       {user.gender===1? "男":"女"}}</td> 

局部过滤器 注册在当前 vue 实例中，只有当前实例能用

let app = new Vue({
    el: "#app",
    data: {
        userList: [
            { id: 1, name: 'jacky', gender: 1 },
            { id: 2, name: 'peter', gender: 0 }
        ]
    },
    // filters 定义局部过滤器，只可以在当前 vue 实例中使用
    filters: {
        genderFilter(gender) {
            return gender === 1 ? '男~' : '女~'
        }
    }
}); 

<!-- | 管道符号：表示使用后面的过滤器处理前面的数据 -->
<td>{
    
       {user.gender | genderFilter}}</td> 

全局过滤器

// 在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
    return value.charAt(0).toUpperCase() + value.slice(1)
}) 

任何 vue 实例都可以使用： <td>{ {user.name | capitalize}}</td>

过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind表达式

• 在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。

• 但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

• 在 vue 里，所有的 vue 实例都是组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eSCtngCu-1653552047458)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d74899aec4b48e6978368da31992f53~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

通过 Vue 的 component 方法来定义一个全局组件。

<div id="app">
    <!--组件复用-->
    <!--使用定义好的全局组件-->
    <counter></counter>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 定义全局组件，两个参数：1，组件名称。2，组件参数
    Vue.component("counter", {
        template: '<button v-on:click="count++">你点了我 {
    
       { count }} 次，我记住了.</button>',
        data() {
            return {
                count: 0
            }
        }
    })
    let app = new Vue({
        el: "#app"
    })
</script> 

• 组件其实也是一个 Vue 实例，因此它在定义时也会接收：data、methods、生命周期函数等

• 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有 el 属性。

• 但是组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板

• 全局组件定义完毕，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件了

• data 必须是一个函数，不再是一个对象

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着 Vue 的加载而加载。

因此，对于一些并不频繁使用的组件，我们会采用局部注册。

 //2、局部声明一个组件
        const buttonCounter = {
            template: `<button v-on:click="count++">我被点击了 {
    
       {count}} 次~~~</button>`,
            data() {
                return {
                    count: 1
                }
            }
        };

        new Vue({
            el: "#app",
            data: {
                count: 1
            },
            components: {
                'button-counter': buttonCounter
            }
        }) 

components 就是当前 vue 对象子组件集合。

• 其 key 就是子组件名称

• 其值就是组件对象名

 <div id="app">
        <button-counter></button-counter>
 </div> 

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue 为生命周期中的每个状态都设置了钩子函数（监听函数）。每当 Vue 实例处于不同的生命周期时，对应的函数就会被触发调用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FcPWLY1O-1653552047459)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/61ef5141cfc74bd59aeaf45cde81755b~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

• beforeCreated：我们在用 Vue 时都要进行实例化，因此，该函数就是在 Vue 实例化时调用，也可以将他理解为初始化函数比较方便一点，在 Vue1.0 时，这个函数的名字就是init。

• created：在创建实例之后进行调用。

• beforeMount：页面加载完成，没有渲染。如：此时页面还是{ {name}}

• mounted：我们可以将他理解为原生 js 中的 window.onload=function({.,.}),或许大家也在用 jquery，所以也可以理解为 jquery 中的$(document).ready(function(){….})，他的功能就是：在 dom 文档渲染完毕之后将要执行的函数，该函数在 Vue1.0 版本中名字为 compiled。 此时页面中的{ {name}}已被渲染成张三

• beforeDestroy：该函数将在销毁实例前进行调用 。

• destroyed：改函数将在销毁实例时进行调用。

• beforeUpdate：组件更新之前。

• updated：组件更新之后.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <span id="num">{
    
       {num}}</span>
        <button @click="num++">赞！</button>
        <h2>{
    
       {name}}，有{
    
       {num}}个人点赞</h2>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "张三",
                num: 100
            },
            methods: {
                show() {
                    return this.name;
                },
                add() {
                    this.num++;
                }
            },
            beforeCreate() {
                console.log("=========beforeCreate=============");
                console.log("数据模型未加载：" + this.name, this.num);
                console.log("方法未加载：" + this.show());
                console.log("html模板未加载：" + document.getElementById("num"));
            },
            created: function () {
                console.log("=========created=============");
                console.log("数据模型已加载：" + this.name, this.num);
                console.log("方法已加载：" + this.show());
                console.log("html模板已加载：" + document.getElementById("num"));
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            beforeMount() {
                console.log("=========beforeMount=============");
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            mounted() {
                console.log("=========mounted=============");
                console.log("html模板已渲染：" + document.getElementById("num").innerText);
            },
            beforeUpdate() {
                console.log("=========beforeUpdate=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板未更新：" + document.getElementById("num").innerText);
            },
            updated() {
                console.log("=========updated=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板已更新：" + document.getElementById("num").innerText);
            }
        });
    </script>
</body>

</html> 

全局安装 webpack

全局安装 vue 脚手架

vue init webpack appname：vue 脚手架使用 webpack 模板初始化一个appname 项目

项目的 package.json 中有 scripts，代表我们能运行的命令

npm start = npm run dev：启动项目

npm run build：将项目打包

最后附上vue项目结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kUyU780S-1653552047459)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/000a55d6c3b84ee4ba35d0d48e302cdb~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

• 运行流程

  • 进入页面首先加载 index.html 和main.js文件。

  • main.js 导入了一些模块【vue、app、router】，并且创建 vue 实例，关联 index.html页面的 <div id=”app”> 元素。使用了 router，导入了 App 组件。并且使用标签引用了这个组件

  • 第一次默认显示 App 组件。App 组件有个图片和 <router-view> ，所以显示了图片。但是由于<router-view> 代表路由的视图，默认是访问/#/路径（router 路径默认使用HASH 模式）。在 router 中配置的/是显示 HelloWorld 组件。

  • 所以第一次访问，显示图片和 HelloWorld 组件。

  • 我们尝试自己写一个组件，并且加入路由。点击跳转。需要使用<router-link to="/foo">Go to Foo</router-link>标签

}, beforeUpdate() { console.log(“=beforeUpdate=====”); console.log(“数据模型已更新：” + this.num); console.log(“html模板未更新：” + document.getElementById(“num”).innerText); }, updated() { console.log(“=updated=====”); console.log(“数据模型已更新：” + this.num); console.log(“html模板已更新：” + document.getElementById(“num”).innerText); } });

全局安装 webpack

全局安装 vue 脚手架

vue init webpack appname：vue 脚手架使用 webpack 模板初始化一个appname 项目

项目的 package.json 中有 scripts，代表我们能运行的命令

npm start = npm run dev：启动项目

npm run build：将项目打包

最后附上vue项目结构

[外链图片转存中…(img-kUyU780S-1653552047459)]

• 运行流程

  • 进入页面首先加载 index.html 和main.js文件。

  • main.js 导入了一些模块【vue、app、router】，并且创建 vue 实例，关联 index.html页面的 <div id=”app”> 元素。使用了 router，导入了 App 组件。并且使用标签引用了这个组件

  • 第一次默认显示 App 组件。App 组件有个图片和 <router-view> ，所以显示了图片。但是由于<router-view> 代表路由的视图，默认是访问/#/路径（router 路径默认使用HASH 模式）。在 router 中配置的/是显示 HelloWorld 组件。

  • 所以第一次访问，显示图片和 HelloWorld 组件。

  • 我们尝试自己写一个组件，并且加入路由。点击跳转。需要使用<router-link to="/foo">Go to Foo</router-link>标签