谷粒商城--分布式基础篇2

谷粒商城–分布式基础篇2（前端基础）

5 前端

• 前后端对比
  

5.1 ES6

5.1.1 简介

• ECMAScript 6.0（简称ES6，ECMAScript是一种由ECMA国际（前身为欧洲计算机制造歇会）通过ECMA-262标准化的脚本程序设计语言）,是JavaScript语言的下一代标准。已经在2015年6月正式发布了，并且ECMAstript6开始，开始采用年号来做版本，即ECMAStript2015就是EXMAStript 6。
• 它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

5.1.2 什么是ECMAStript

• ECMAScript 是浏览器脚本语言的规范，而熟知的js语言，如JavaScript则是规范的具体实现

5.1.3 ES6 新特性

• let声明变量
  • var在{}之外也起作用
  • let在{}之外不起作用
  • var多次声明同一变量不会报错，let多次声明会报错，只能声明一次。
  • var 会变量提升（打印和定义可以顺序反）。let 不存在变量提升（顺序不能反）
  • const声明之后不允许改变

<script>
// var 声明的变量往往会越域
// let 声明的变量有严格局部作用域
//         {
//             var a = 1;
//             let b = 2;
//         }
//         console.log(a);  // 1
//         console.log(b);  // ReferenceError: b is not defined


// var 可以声明多次
// let 只能声明一次
//         var m = 1
//         var m = 2
//         let n = 3
// //         let n = 4
//         console.log(m)  // 2
//         console.log(n)  // Identifier 'n' has already been declared

// var 会变量提升
// let 不存在变量提升
//         console.log(x);  // undefined
//         var x = 10;
//         console.log(y);   //ReferenceError: y is not defined
//         let y = 20;

// let
// 1. 声明之后不允许改变
// 2. 一但声明必须初始化，否则会报错
const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.
</script>

• 解构表达式

  • 支持let arr = [1,2,3]; let [a,b,c] = arr;这种语法
  • 支持对象解析：const { name: abc, age, language } = person; 冒号代表改名
  • 字符串函数
  • 支持一个字符串为多行
  • 占位符功能 ${}

• 数组解构

//数组解构
let arr = [1,2,3];
let a = arr[0];
let b = arr[1];
let c = arr[2];

let [a,b,c] = arr;
console.log(a,b,c)

• 对象解构

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


       //         const name = person.name;
       //         const age = person.age;
       //         const language = person.language;


       //对象解构
       const { name: abc, age, language } = person;

       console.log(abc, age, language)

• 字符串扩展&字符串模板

<script>
    // 字符串扩展
    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
    //字符串模板
    let ss = `<div>
                <span>hello world<span>
            </div>`;
    console.log(ss);
    // 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
    function fun() {
        return "这是一个函数"
    }
    let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
    console.log(info);
</script>

• 函数优化

  • 原来想要函数默认值得这么写b = b || 1; 现在可以直接写了function add2(a, b = 1) {
  • 函数不定参数function fun(…values) {
  • 支持箭头函数（lambda表达式），还支持使用{}结构传入对象的成员

• 函数默认参数

//在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(20));

• 不定参数

 //不定参数
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("hello");

 var sum = function (a, b) {
     c = a + b;
     return a + c;
 }

 var sum2 = (a, b) => a + b;
 console.log(sum2(11, 12));

 var sum3 = (a, b) => {
     c = a + b;
     return a + c;
 }
 console.log(sum3(10, 20))

• 箭头函数&解构表达式

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);

• 对象优化
• 可以获取map的键值对等Object.keys()、values、entries

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)]

• Object.assgn(target,source1,source2) 合并

const target = { a: 1 };
     const source1 = { b: 2 };
     const source2 = { c: 3 };
     //{a:1,b:2,c:3}
     Object.assign(target, source1, source2);
     console.log(target);//["name", "age", "language"]

• const person2 = { age, name } //声明对象简写

 // 声明对象简写
 const age = 23
 const name = "张三"
 const person1 = { age: age, name: name }

 const person2 = { age, name }//声明对象简写
 console.log(person2);
 // 对象的函数属性简写
 let person3 = {
     name: "jack",
     // 以前：
     eat: function (food) {
         console.log(this.name + "在吃" + food);
     },
     //箭头函数this不能使用，对象.属性
     eat2: food => console.log(person3.name + "在吃" + food),
     eat3(food) {
         console.log(this.name + "在吃" + food);
     }
 }
person3.eat("香蕉");
person3.eat2("苹果")
person3.eat3("橘子");

• …代表取出该对象所有属性拷贝到当前对象。let someone = { …p1 }

// 对象拓展运算符
//  拷贝对象（深拷贝）
let p1 = { name: "Amy", age: 15 }
let someone = { ...p1 }
console.log(someone)  //{name: "Amy", age: 15}
//  合并对象
let age1 = { age: 15 }
let name1 = { name: "Amy" }
let p2 = {name:"zhangsan"}
p2 = { ...age1, ...name1 } 
console.log(p2)

• 5.1.6 map和reduce

//数组中新增了map和reduce方法。
//map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
 let arr = ['1', '20', '-5', '3'];
 
//  arr = arr.map((item)=>{
//     return item*2
//  });
 arr = arr.map(item=> item*2);
 console.log(arr);
//reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
//[2, 40, -10, 6]
//arr.reduce(callback,[initialValue])
/**
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）*/
let result = arr.reduce((a,b)=>{
    console.log("上一次处理后："+a);
    console.log("当前正在处理："+b);
    return a + b;
},100);
console.log(result)  

• promise

  • 以前嵌套ajax的时候很繁琐。

  • 解决方案：

  • 把Ajax封装到Promise中，赋值给let p

  • 在Ajax中成功使用resolve(data)，交给then处理，

  • 失败使用reject(err)，交给catch处理p.then().catch()

corse_score_10.json 得分
{
    "id": 100,
    "score": 90
}
user.json 用户
{
    "id": 1,
    "name": "zhangsan",
    "password": "123456"
}
user_corse_1.json 课程
{
    "id": 10,
    "name": "chinese"
}

<script>
    //1、查出当前用户信息
    //2、按照当前用户的id查出他的课程
    //3、按照当前课程id查出分数
    // $.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);
    //     }
    // });
    //1、Promise可以封装异步操作
    // let p = new Promise((resolve, reject) => { //传入成功解析，失败拒绝
    //     //1、异步操作
    //     $.ajax({
    //         url: "mock/user.json",
    //         success: function (data) {
    //             console.log("查询用户成功:", data)
    //             resolve(data);
    //         },
    //         error: function (err) {
    //             reject(err);
    //         }
    //     });
    // });

    // p.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) {
    //         }
    //     });
    // })
    function get(url, data) { //自己定义一个方法整合一下
        return new Promise((resolve, reject) => {
            $.ajax({
                url: url,
                data: data,
                success: function (data) {
                    resolve(data);
                },
                error: function (err) {
                    reject(err)
                }
            })
        });
    }
    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)=>{ //失败的话catch
            console.log("出现异常",err)
        });
</script>

• 模块化
• 什么是模块化
  • 模块化就是把代码进行拆分，方便重复利用。类似于java中的导包，而JS换了个概念，是导模块。
  • 模块功能主要有两个命令构成 export 和import
    • export用于规定模块的对外接口
    • import用于导入其他模块提供的功能

user.js
var name = "jack"
var age = 21
function add(a,b){
    return a + b;
}
export {name,age,add}
hello.js
// export const util = {
//     sum(a, b) {
//         return a + b;
//     }
// }

export default {
    sum(a, b) {
        return a + b;
    }
}
// export {util}
//`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。
main.js
import abc from "./hello.js"
import {name,add} from "./user.js"
abc.sum(1,2);
console.log(name);
add(1,3);

5.2 Vue

5.2.1 MVVM思想

• M：model 包括数据和一些基本操作
• V：view 视图，页面渲染结果
• VM：View-model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后通过DOM操作Module渲染到View中。而后当用户操作视图，还需要通过DOM获取View 中的数据，然后同步到Model中。

而MVVM中的VM要做的事就是把DOM操作完全封装起来，开发人员不用关心Model和View之间是如何相互影响的。

5.2.2 Vue 简介

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

5.2.3 基础案例

• 在VSCode中安装vue 2 snippets语法提示插件，在谷歌浏览器中安装vue.js devtools

<body>

    <div id="app">
        <input type="text" v-model="num">
        v-model实现双向绑定
        <button v-on:click="num++">点赞</button>
        v-on:click绑定事件，实现自增
        <button v-on:click="cancel">取消</button>
        回到自定义的方法
        
        <h1> {{name}} ,非常帅，有{{num}}个人为他点赞{{hello()}}</h1>
    </div>

    <!-- 导入依赖 -->
    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        //1、vue声明式渲染
        let vm = new Vue({ //生成vue对象
            el: "#app",//绑定元素 div id="app"
            data: {  //封装数据
                name: "张三",  // 也可以使用{} //表单中可以取出
                num: 1
            },
            methods:{  //封装方法
                cancel(){
                    this.num -- ;
                },
                hello(){
                    return "1"
                }
            }
        });
        还可以在html控制台vm.name

        //2、双向绑定,模型变化，视图变化。反之亦然。
        //3、事件处理

        //v-xx：指令

        //1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
        //2、指令来简化对dom的一些操作。
        //3、声明方法来做更复杂的操作。methods里面可以封装方法。

    </script>
</body>

5.2.4指令

• v-text、v-html.html

<!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">
        {{msg}}  {{1+1}}  {{hello()}}<br/>
        用v-html取内容
        <span v-html="msg"></span>
        
        <br/>
        原样显示
        <span v-text="msg"></span>        
    </div>
   
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"<h1>Hello</h1>",
                link:"http://www.baidu.com"
            },
            methods:{
                hello(){
                    return "World"
                }
            }
        })
    </script>    
</body>
</html>

• 插值表达式

格式：{{表达式}}
说明：

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

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

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

• 插值闪烁

  • 使用{{}} 方式在网速较慢时会出现问题。在数据未加载完成时，页面会出现原始的“{{}}”，加载完毕后才能显示正确的数据，称为插值闪烁
  • 将网速调慢点，然后刷新页面，可以看到结果

• 单向绑定 v-bind

<body>
    <!-- 给html标签的属性绑定 -->
    <div id="app"> 
        <a v-bind:href="link">gogogo</a>
        <!-- class,style  {class名：加上？}-->
        <span v-bind:class="{active:isActive,'text-danger':hasError}"
          :style="{color: color1,fontSize: size}">你好</span>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                link: "http://www.baidu.com",
                isActive:true,
                hasError:true,
                color1:'red',
                size:'36px'
            }
        })
    </script>
</body>

• 双向绑定 v-model

<body>
    <!-- 表单项，自定义组件 -->
    <div id="app">
        精通的语言：
            <input type="checkbox" v-model="language" value="Java"> java<br/>
            <input type="checkbox" v-model="language" value="PHP"> PHP<br/>
            <input type="checkbox" v-model="language" value="Python"> Python<br/>
        选中了 {{language.join(",")}}
    </div>  
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                language: []
            }
        })
    </script>
</body>

• v-on
  • 事件修饰符
  • 在事件处理程序中调用“event.preventDefault()”或“event.stopPropagation()”是非常常见的需求。尽管可以在方法中轻松实现这点，但是有更好的方式是：方法只有纯粹的数据逻辑而不是去处理DOM事件细节
  • 为了解决这个问题，Vue.js提供了事件修饰符。修饰符是由点开头的指令后缀表示的
    • .stop：阻止事件冒泡到父元素
    • .prevent：阻止默认事件发生
    • .capture：使用事件捕获模式
    • .self：只有元素自身触发事件才执行（冒泡或捕获都不执行）
    • .once：只执行一次
  • 按键修饰符
  • 在监听键盘事件时，经常需要检查常见的键值，Vue允许为“v-on”在监听键盘事件时添加按键修饰符
  • 常用的按键
    • .enter
    • .tab
    • .delete
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right
  • 组合按钮
  • 可以在如下修饰符用来实现相应按键时才出发鼠标或键盘事件的监听
    • .ctrl
    • .alt
    • .shift

<body>
    <div id="app">               
        <!--事件中直接写js片段-->
        <button v-on:click="num++">点赞</button>
        <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
        <button @click="cancel">取消</button>
        <!--  -->
        <h1>有{{num}}个赞</h1>
        <!-- 事件修饰符 -->
        <div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
            大div
            <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
                小div <br />
                <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
            </div>
        </div>
        <!-- 按键修饰符： -->
        <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br />
       提示：
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                num: 1
            },
            methods:{
                cancel(){
                    this.num--;
                },
                hello(){
                    alert("点击了")
                }
            }
        })
    </script>
</body>

• v-for

<body>
    <div id="app">
        <ul>
            <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">
                <!-- 1、显示user信息：v-for="item in items" -->
               当前索引：{{index}} ==> {{user.name}}  ==>   {{user.gender}} ==>{{user.age}} <br>
                <!-- 2、获取数组下标：v-for="(item,index) in items" -->
                <!-- 3、遍历对象：
                        v-for="value in object"
                        v-for="(value,key) in object"
                        v-for="(value,key,index) in object" 
                -->
                对象信息：
                <span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}}；</span>
                <!-- 4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率 -->
            </li>      
        </ul>
        <ul>
            <li v-for="(num,index) in nums" :key="index"></li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>         
        let app = new Vue({
            el: "#app",
            data: {
                users: [{ name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }],
                nums: [1,2,3,4,4]
            },
        })
    </script>
</body>

• v-if 和v-show

<body>
    <!-- 
        v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
        v-show，当得到结果为true时，所在的元素才会被显示。 
    -->
    <div id="app">
        <button v-on:click="show = !show">点我呀</button>
        <!-- 1、使用v-if显示 -->
        <h1 v-if="show">if=看到我....</h1>
        <!-- 2、使用v-show显示 -->
        <h1 v-show="show">show=看到我</h1>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>       
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                show: true
            }
        })
    </script>
</body>

• v-else 和v-else-if

<body>
    <div id="app">
        <button v-on:click="random=Math.random()">点我呀</button>
        <span>{{random}}</span>
        <h1 v-if="random>=0.75">
            看到我啦？！ &gt;= 0.75
        </h1>
        <h1 v-else-if="random>=0.5">
            看到我啦？！ &gt;= 0.5
        </h1>
        <h1 v-else-if="random>=0.2">
            看到我啦？！ &gt;= 0.2
        </h1>
        <h1 v-else>
            看到我啦？！ &lt; 0.2
        </h1>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
        
    <script>         
        let app = new Vue({
            el: "#app",
            data: { random: 1 }
        })     
    </script>
</body>

5.2.5计算属性和侦听器

<body>
    <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>
        //watch可以让我们监控一个值的变化。从而做出相应的反应。
        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98,
                shzPrice: 98.00,
                xyjNum: 1,
                shzNum: 1,
                msg: ""
            },
            computed: {
                totalPrice(){
                    return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
                }
            },
            watch: {
                xyjNum(newVal,oldVal){
                    if(newVal>=3){
                        this.msg = "库存超出限制";
                        this.xyjNum = 3
                    }else{
                        this.msg = "";
                    }
                }
            },
        })
    </script>

</body>

5.2.6 过滤器

<body>
    <!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 -->
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>
                {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
            </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.filter("gFilter", function (val) {
            if (val == 1) {
                return "男~~~";
            } else {
                return "女~~~";
            }
        })
        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            },
            filters: {
                 filters 定义局部过滤器，只可以在当前vue实例中使用
                genderFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })
    </script>
</body>

5.2.7组件化

• 在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。但是如果每个页面都自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同分拆分成立的组件，然后在不同页面就可以共享这些组件，避免重复开发。在vue里，所有的vue实例都是组件
  

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

• 不同的是组件不会与页面的元素綁定，否则就无法复用了，因此没有el属性。但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组了data必须是一个函数，不再是一个对象。

<body>
    <div id="app">
        <button v-on:click="count++">我被点击了 {{count}} 次</button>

        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>

        <button-counter></button-counter>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        //1、全局声明注册一个组件
        Vue.component("counter", {
            template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        });

        //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
            }
        })
    </script>
</body>

5.2.8 生命周期钩子函数

<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>                                                                                                                                     

5.2.9 Vue 模块化开发

全局安装webpack
1 npm install webpack -g
全局安装vue脚手架
2 npm install -g @vue/cli-init
3 初始化vue项目
vue init webpack appname:vue脚手架使用webpack模板初始化一个appname项目
4 启动vue项目
项目的package.json中有scripts,代表我们能运行的命令
npm start = npm run dev: 启动项目
npm run build:将项目打包

5.2.10 使用element-ui

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S

在 main.js 中写入以下内容：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);