21-01-03Java学习-CSDN博客

本文链接：https://blog.csdn.net/qq_37549781/article/details/112209871

总结

组件

组件：
- 完成特定功能的自定义html标签

组件分类：

全局组件：全局都可以用

Vue.component("mycomponent",{
                template:"<h1>我是全局组件</h1>"
            })

局部组件：只有局部可以用

new Vue({
                el:"#test1",
                /*局部组件*/
                components:{
                    "inner":{
                        template:"<h1>我是局部组件</h1>"
                    }
                }
            })

注意：
- html标签的名字尽量小写，要是有大写，使用时用-隔开
- 定义的模板有且只能有一个根标签

组件模板

模板写在template中

html中写模板（常用）,或者直接将模板放到标签中

<template id="tem">
        <div>
            username:<input type="text" /><br>
            password:<input type="password" />
        </div>
    </template>

js中写模板

<script type="text/template" id="tem1">
        <div>
            name:<input type="text" /><br>
            pwd:<input type="password" />
        </div>
    </script>

从模板中获取数据

数据要在组件中，只能在自己的模板中使用自己的数据

模板中准备一个data函数，函数的返回值要是json格式（全局和局部一样）

Vue.component("mycomponent",{
                template:"#tem",
                data(){
                    return{
                        name:"张三"
                    }
                }
            })

路由

路由负责将特定的浏览器请求映射组件代码中
路由不包含在vue中，是一个插件，需要单独下载

使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--Vue的核心库-->
        <script src="node_modules/vue/dist/vue.js"></script>
        <!--路由核心库-->
        <script src="node_modules/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <!--
            路由：
                路由负责将特定的浏览器请求映射组件代码中
        -->
        <div id="test">
            <!--关联路由地址-->
            <router-link to="/index">首页</router-link>
            <router-link to="/emp">员工页面</router-link>
            <router-link to="/dept">部门页面</router-link>

            <!--告诉vue，组件渲染的位置-->
            <router-view></router-view>

        </div>
        <script type="text/javascript">
            /*1.准备组件*/
            let index = Vue.component("index",{
                template:"<h1>首页</h1>"
            })
            let emp = Vue.component("emp",{
                template:"<h1>员工页面</h1>"
            })
            let dept = Vue.component("dept",{
                template:"<h1>部门页面</h1>"
            })

            /*2.创建路由*/
            let router = new VueRouter({
                routes:[
                    {path:"/index",component:index},
                    {path:"/emp",component:emp},
                    {path:"/dept",component:dept}
                ]
            })

            new Vue({
                el:"#test",
                /*3.使用路由*/
                router
            })
        </script>
    </body>
</html>

watch属性

用来监听值的变化

<body>
        <div id="test">
           <input type="text" v-model="msg" />
        </div>
        <script type="text/javascript">
            /*
            * watch属性：主要用来监听值的变化
            * */
            new Vue({
                el:"#test",
                data:{
                    msg:""
                },
                watch:{
                    msg(a,b){
                        console.debug("新值："+a)
                        console.debug("老值："+b)
                    }
                }
            })
        </script>
    </body>

webpack

优势
- 减少页面类请求次数
- 转换ES6的语法，兼容老版本
- 打包后的代码很乱，安全

使用(后面有其他方法，了解)

先安装淘宝镜像（快）npm i -g cnpm --registry=https://registry.npm.taobao.org
再安装cnpm install -g webpack 和cnpm install -g webpack-cli

配置webpack.config.js文件打包

var path = require("path");
module.exports = {
//这是要打包的js
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),//dist是打包后存放的地址
filename: 'bundle.js'
}
}

css加载

cnpm install style-loader --save-dev (使用css的加载器)
cnpm install css-loader --save-dev （编译css的加载器）
打包的js中引用require(’…/css/index.css’)选择要引入的css

在webpack.config.js下面引入

module: {
        rules: [
            {
                test: /\.css$/,     //匹配文件规则
                use: ['style-loader', 'css-loader']    //匹配后使用什么加载器进行模块加载
                // webpack use的配置，是从右到左进行加载的
            },
        ]
    }

webpack打包

热更新

可以web访问
安装插件：npm install webpack-dev-server --save-dev

添加中package.json启动脚本

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

package.json中更新版本

"devDependencies": {
  "css-loader": "^3.1.0",
  "style-loader": "^0.23.1",
  "webpack": "^3.10.0",
  "webpack-dev-server": "^2.9.7"
},

在执行 cnpm install
再npm run dev运行

脚手架

vue官方提供了一个快速搭建vue项目的脚手架：vue-cli，使用它能快速的构建一个web工程模板。
安装命令：npm install -g vue-cli
快速创建webpack项目：vue init webpack
npm run dev测试