Java小白学习指南【day51】---谁说后端不能写VUE（二）

一、组件&表达式&路由

1、组件（Component）

①、认识组件

• 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
• 组件可以根据vue特别，扩展原生HTML元素的功能。
• 简单理解 : 组件是用来完成特定功能的一个自定义的HTML标签。

②、全局组件于局部组件

• **全局组件：**可以在任何被挂载的元素中进行使用Vue.component("自定义标签的名字",{配置对象})
• 注意事项：
  • 全局组件中必须包含template属性
  • template中的html语句有且只能由一个根标签

    <div id="app">
        <haha></haha>
    </div>
    <div id="app2">
        <haha></haha>
    </div>
    <script>
        Vue.component("haha",{
            template:"<h1>这就是组件！</h1>"
        })
        new Vue({
            el:"#app"
        })
        new Vue({
            el:"#app2"
        })
    </script>

以后常见的全局组件，代码是经过抽取的：

    <div id="app">
        <haha></haha>
    </div>
    <div id="app2">
        <haha></haha>
    </div>
    <script>
        let template = "<h1>这就是组件，我是被抽取了的</h1>";
        let tempConfig = {template};//因为名字一致，所以等价于{template:template}
        Vue.component("haha",tempConfig);
        new Vue({
            el:"#app"
        })
        new Vue({
            el:"#app2"
        })
    </script>

• **局部组件：**只能在所挂载的标签中进行使用

    <div id="app">
        <hello></hello>
    </div>
    <script>
        new Vue({
            el: "#app",/*局部组件，只能在别挂载的元素内使用*/
            components:{
                "hello":{
                    template:"<h1>这是专属的局部标签</h1>"
                }
            }
        });
    </script>

③、组件模块

在实际开发中如果遇到html代码很多的情况，再写在template的属性中会显得比较的臃肿且麻烦，所以我们会用到组件模块的方式来完成组件的template中的内容，下面介绍两种：

• template标签模板（推荐）

    <div id="app">
        <haha></haha>
    </div>
    <div id="app2">
        <!--还可以直接放在挂载函数中，就会被直接显示-->
        <template id="mytemplatetest">
            <form>
                <input type="text"><button>直接放在挂载中</button>
            </form>
        </template>
    </div>
    <template id="mytemplate">
        <form>
            <input type="text"><button>点我试试</button>
        </form>
    </template>
    <script>
        /*定义模板对象*/
        let temConfig = {template:"#mytemplate"};
        /*创建全局组件*/
        Vue.component("haha",temConfig);
        new Vue({
            el:"#app"
        })
        new Vue({
            el:"#app2"
        })
    </script>

• script标签模板

<div id="app">
    <mytag></mytag>
</div>

<!-- script中准备相应的数据  -->
<script type="text/template" id="mytemp">
    <form>
      用户名:<input type="text" />
    </form>
</script>

<script>
    let tempConfig = {
        template:"#mytemp"
    };
    Vue.component("mytag",tempConfig)
    new Vue({
        el:"#app"
    })
</script>

④、组件中动态取值与方法调用

• 数据与方法都必需写在模板配置中
• 模板中的data要求必需是一个函数(数据从函数中返回)

    <div id="app">
        <haha></haha>
    </div>
    <!--创建一个组件模板-->
    <template id="mytemplate">
        <form>
            {{username}}:<input type="text"><br/>
            密码:<input type="text"><br/>
            <button @click="DL">登录</button>
        </form>
    </template>
    <script>
        /*创建一个组件*/
        Vue.component("haha",{
            template:"#mytemplate",
            /*注意：模板中的data要求必需是一个函数*/
            data(){
                return {
                    username:"你猜这是啥"
                }
            },
            methods:{
                DL(){
                    alert("今天休息，登陆不了")
                }
            }
        })
        /*Vue挂载*/
        new Vue({
            el:"#app"
        })
    </script>

⑤、注意

• 模板取名不要使用驼峰命名，也就是自定以标签，如果是多个单词组合，中间用-分割
• 建议都使用template标签来定义模板
• 模板template中有且只有一个跟标签，且data属性必须是一个函数

2、计算(computed)与监控(watch)

①、计算属性computed

• 如果一个值需要大量计算展示，建议使用计算属性先计算完毕再直接使用
• 计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用

    <div id="app">
        {{gettime}}
    </div>
    <script>
        /*获取一个毫秒值*/
        //let date = new Date();
        //console.debug(date.getTime())/*1607269549367*/
        new Vue({
            el:"#app",
            data:{
                date : 1607269549367
            },
            /*计算属性*/
            computed:{
                gettime(){
                    const t = new Date(this.date);
                    return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()
                }
            }
        })
    </script>

②、 监控属性watch

• watch可以让我们监控一个值的变化。从而做出相应的反应。例如：监听一个文本框中的变化，然后进行相应的高级查询(百度搜索)

<body>
    <div id="app">
        <input type="text" v-model="msg" >
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"请输入"
            },
            watch:{//需要监听的属性
                //变化后需要执行的功能
                msg(newval,oldval){
                    console.debug(newval,oldval);
                }
            }
        })
    </script>
</body>

3、路由

①、路由的认识

• 路由时负责将进入浏览器的请求隐射到特定的组件中，简单的说就是使地址去找对应的组件
• 在网易云音乐中可以看到路由的效果

• 路由是一个插件，需要单独引入，相关内容可以查看官网：https://router.vuejs.org/zh/

②、安装并引用

• npm安装命令 npm install vue-router
• 建议使用淘宝镜像命令cnpm install vue-router（在dos窗口下执行npm install -g cnpm --registry=https://registry.npm.taobao.org）
• 引入：

	<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
    <!--引入vue的route支持-->
    <script type="text/javascript" src="node_modules/vue-router/dist/vue-router.min.js"></script>

③、准备挂载元素

    <div id="app">
        <!--
            路由路径：使用 router-link 组件来导航
            to属性用于指引到指定的组件
            <router-link> 默认会被渲染成一个 `<a>` 标签
        -->
        <router-link to="/">首页</router-link>
        <router-link to="/music">音乐</router-link>
        <router-link to="/singer">歌手</router-link>
        <!--必须要有路由出口，路由匹配到的组件将渲染在这里-->
        <router-view></router-view>
    </div>

④、开启路由

<script>
        /*创建路由对象*/
        let router = new VueRouter({
            /*所有的路由，都需要有路径和相应的组件*/
            routes:[
                {
                    path:"/",
                    component:{
                        template:"<h1>欢迎来到网易云音乐</h1>"
                    }
                },
                {
                    path:"/music",
                    component:{
                        template:"<h1>这里是音乐的世界</h1>"
                    }
                },
                {
                    path:"/singer",
                    component:{
                        template:"<h1>选出你喜欢的歌手</h1>"
                    }
                }
            ]
        })
        new Vue({
            el:"#app",
            /*配置路由对象*/
            router:router
        })
    </script>

4、VUE的生命周期

• 每个 Vue 实例在被创建时都要经过一系列的初始化过程

  • 创建实例
  • 装载模板
  • 渲染模板

• Vue为生命周期中的每个状态都设置了钩子函数（监听函数）

• created与mounted的区别

  • created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
  • mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作

钩子函数mounted会在加载页面完成后显示页面得时候，率先触发，今后会用的比较多

二、webpack

官方网站：https://www.webpackjs.com/

1、认识与安装

①、webpack认识

• 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
• 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
• 将代码打包的同时进行混淆，提高代码的安全性。

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

②、安装webpack

• 安装webpack有两种方式，一种是本地安装，一种是全局安装，建议大家使用全局安装，后面都可以直接使用
• 由于网络问题,安装时间会比较长，甚至可以会失败，你可以多试几次，这里建议大家可以切换淘宝镜像进行安装npm install -g cnpm --registry=https://registry.npm.taobao.org

本地安装：

npm install webpack --save-dev

npm install webpack-cli --save-dev

全局安装：

npm install -g webpack

npm install -g webpack-cli

2、打包功能测试

①、a.js 用于导出数据

const math01 = {
    sum() {
        return 4;
    }
};
const math02 = {
    sum() {
        return 10;
    }
};
//进行导出
export {math01, math02};

②、b.js 用于导入数据

//引入a.js中得两个对象
import {math01,math02} from "./a";
//使用对象，查看结果
alert("见证奇迹");
alert(math01.sum() + math02.sum());

直接引入进行测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/b.js"></script>
</head>
<body>

</body>
</html>

运行后会报错(如下图)，原因是因为很多浏览器是不支持导入导出语法的，因此，为了实现功能，我们必需使用webpack进行打包，才能完成功能。

③、webpack打包

运行指令：webpack ./js/b.js -o dist --output-filename bundle.js(注意其中得dist和最后得文件名可以自己随意取名)

打包后的效果：

此时可以直接在html文件中引入打包好得文件，即可看见效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="dist/bundle.js"></script>
</head>
<body>

</body>
</html>

3、了解CommonJS导入导出

导入导出除了上面原生得方式还有很多，例如CommonJS方式

①、d.js 用于导出数据

//定义一段内容(这里面加上一个匿名函数)
define(() => {
    let d ="我很好！";
    return d;
})

②、c.js用于导入数据

//引入c.js中的内容，拿到返回的结果
let d = require("./d");
alert(d);

③、打包

webpack ./js/c.js -o dist --output-filename bundle2.js，打包后进行测试

4、webpack.config.js配置文件

上述方式可以进行功能打包，但是每次打包要花很多时间输入命令，还不好记忆。所以我们一般不会像刚才那个打包。而是都会使用配置文件webpack.config.js来完成。

//引入相应的路径模块
const path = require('path');

module.exports = {
    //打包的入口
    entry: './js/b.js',
    output: {
        //生成文件的路径设置
        path: path.resolve(__dirname, 'dist'),
        //生成打包文件名称设置
        filename: 'bundle.js'
    }
};

• 运行命令：直接在命令行中输入webpack即可

5、热部署

实际开发多为前后端分离，相当于前端会单独在一个服务器中运行，webpack中准备了一个开发服务，可以完成这个功能，非常的牛皮(可以视为就是一个和tomcat差不多的东西)

安装服务插件：npm install webpack-dev-server --save-dev

添加启动脚本

在package.json中配置script

• –inline：自动刷新
• –hot：热加载
• –port：指定端口
• –open：自动在默认浏览器打开
• –host：可以指定服务器的 ip，不指定则为127.0.0.1

 "scripts": {
    ...
    "dev": "webpack-dev-server --inline --progress --config ./webpack.config.js"
  },

输入命令 npm run dev 运行第1步的脚本

在package.json中配置修改webpack的版本

 "devDependencies": {
    ...
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },

重新执行命令

• npm install
• npm run dev

三、vue-cli

官网：https://github.com/vuejs/vue-cli

1、认识

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。我们把它称之为一个脚手架。

在开发中，需要打包的文件很多(html,css,js,图片,…)

vue提供脚手架快速搭建web工程模板

全局安装命令(以后很多项目都会使用)：npm install -g vue-cli

• 初始化命令 : vue init webpack

• 成功后的界面

同时成功后输入指令npm run dev会在浏览器出现下面得界面

2、找到入口(理论流程)

1. 从指令npm run dev开始
2. 找到运行得package.json文件中得dev
3. 其中再找到weebpack.dev.conf.js得配置文件
4. 在配置文件中有一个webpack.base.conf.js

3、脚手架流程分析