CharmDeer

Vue第三篇（组件化开发与webpack详解）

目录（点击下面选项跳转知识点）

知识概览
一、组件化的实现和使用步骤(掌握)
二、组件化的基本使用过程(掌握)
三、全局组件和局部组件(掌握)
四、父组件和子组件的区分(掌握)
五、注册组件的语法糖写法(掌握)
六、组件模板抽离(分离)的写法（掌握）
七、为什么组件中的data必须是函数（理解）
八、父子组件通信-父传子（掌握）
九、父子组件通信-子级向父级传递（掌握）
十、父子组件通信-结合双向绑定案例（掌握）
十一、结合双向绑定案例-画图分析（掌握）
十二、结合双向绑定案例-watch实现
十三、父组件访问子组件-children-refs（掌握）
十四、子组件访问父组件-parent-root（理解）
组件高级化开端：十五、slot-插槽的基本使用（掌握）
十六、slot-具名插槽的作用（掌握）
十七、编译作用域的概念（理解）
十八、作用域插槽的使用（掌握）
十九、前端代码复杂带来的问题（理解）
模块化开发的开端：二十、前端模块化雏形和CommonJS（理解）
二十一、ES模块化的导入和导出（掌握）
二十二、webpack的介绍和安装（理解）
二十三、webpack的基本使用过程（掌握）
二十四、webpack.config.js配置和package.json配置（掌握）
二十五、webpack中使用css文件的配置（掌握）
二十六、webpack-less文件的处理（掌握）
二十七、webpack-图片文件的处理（掌握）
二十八、webpack-ES6转ES5的babel（掌握）
VueJs模块化组件的开端：二十九、webpack-使用Vue的配置过程（掌握）
三十、创建Vue时template和el关系（掌握）
三十一、Vue的终极使用方案（重点掌握）【重点在vue文件开发】
三十二、webpack-横幅Plugin的使用（掌握）
三十三、webpack-HtmlWebpackPlugin的使用（掌握）
三十四、webpack-UglifyjsWebpackPlugin的使用（掌握）
三十五、webpack-dev-server搭建本地服务器（掌握）
三十六、webpack-配置文件的分离（掌握）

知识概览

返回目录

一、组件化的实现和使用步骤(掌握)

返回目录

什么是组件化？

人在面对复杂问题的处理方式：
- 任何一个人处理信息的逻辑能力是有限的
- 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容
- 但是，我们人有一种天生的能力，就是将问题拆解
- 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。
组件化也是类似的思想：
- 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展
- 但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。

Vue的组件思想

组件化是Vue.js中的重要思想
- 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用
- 任何的应用都会被抽象成一颗组件树

组件化思想的应用：

有了组件化的思想，我们在之后的开发中就要充分的利用它
尽可能的将页面拆分成一个个小的、可复用的组件
这样让我们的代码更加方便组织和管理，并且扩展性也更强。

注册组件的基本步骤

组件的使用分成三个步骤:
- 创建组件构造器
- 注册组件
- 使用组件

二、组件化的基本使用过程(掌握)

返回目录

步骤：

创建组件构造器：调用 Vue.extend() 方法创建组件构造器
注册组件：调用 Vue.component() 方法注册组件
使用组件：在 Vue 实例的作用范围内使用组件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Titletitle>
head>
<body>

<div id="app">
    <cpn>cpn>
    <cpn>cpn>
    <cpn>cpn>
    <cpn>cpn>
div>

<script src="../js/vue.js">script>
<script>
    //ES6用``可以代替字符串并不需要+拼接来换行写

    // 1.创建组件构造器对象
    const cpnC = Vue.extend({
        template:`
          
            我是标题
            我是内容,哈哈哈哈
            我是内容,呵呵呵呵
          `
    });
    //注册组件
    Vue.component('cpn',cpnC)

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  });
script>
body>
html>

注册组件步骤解析：
Vue.extend():

调用 Vue.extend() 创建的是一个组件构造器
通常在创建组件构造器时，传入 template 代表我们自定义组件的模板
该模板就是在使用到组件的地方，要显示的HTML代码
事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲
的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。

Vue.component():

调用 Vue.component() 是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称
所以需要传递两个参数：1、注册组件的标签名。 2、组件构造器

组件必须挂载在某个Vue实例下，否则它不会生效

我们来看下面我使用了三次 ,而第三次其实并没有生效

三、全局组件和局部组件(掌握)

返回目录

当我们调用Vue.component()注册组件时，组件的注册是全局的

这意味着该组件可以在任意Vue示例下使用
但是如果我们注册的组件是挂载在某个实例中，那么就是一个局部组件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Titletitle>
head>
<body>
<div id="app2">
    <cpn>cpn>
div>

<div id="app">
    <cpn>cpn>
    <cpn>cpn>
    <cpn>cpn>
div>

<script src="../js/vue.js">script>
<script>
    // 1.创建组件构造器
    const cpnC = Vue.extend({
      template:`
          
            我是标题
            我是内容,哈哈哈哈
            我是内容,呵呵呵呵
          `
    });
    // 2.注册组件(全局组件,意味着可以在多个Vue的实例下面使用)
    /*Vue.component('cpn',cpnC)*/

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components:{
      // cpn使用组件时的标签名，局部注册！！！
      cpn: cpnC
    }
  });
  const app2=new Vue({
    el:'#app2'
  })
script>
body>
html>

通过Vue.component()方法注册的组件是全局组件，通过 components 注册的是私有子组件

四、父组件和子组件的区分(掌握)

返回目录

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Titletitle>
head>
<body>
    <div id="app">
        <cpn2>cpn2>
    div>

    <script src="../js/vue.js">script>
    <script>
        // 1.创建第一个组件构造器(子组件)<只能在父组件中使用,想要外部使用，在外部也要进行注册>
        const cpnC1=Vue.extend({
          template:`
            
                我是标题
                我是内容，哈哈哈
            
          `
        })

        // 2.创建第一个组件构造器(父组件)
        const cpnC2=Vue.extend({
          template:`
            
                我是标题2
                我是内容，呵呵呵
                
            
          `,
          components:{
            cpn1:cpnC1
          }
        })

      // root组件
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊'
        },
        components: {
          cpn2: cpnC2
        }
      });
    script>
body>
html>

父子组件的错误用法：以子组件的形式在 Vue 实例中使用

因为当子组件注册到父组件的 components 时，Vue 会编译好父组件的模块
该模板的内容已经决定了父组件将要渲染的 HTML(相当于父组件中已经有了子组件的内容了)
是只能在父组件中被识别的
类似这种用法，是会被浏览器忽略的。

<div id="app">
  <cpn2>cpn2>
    
  
div>

<script src="../js/vue.js">script>
<script>
  // 1.创建第一个组件构造器(子组件)
  const cpnC1 = Vue.extend({
    template: `
      
        我是标题1
        我是内容, 哈哈哈哈
      
    `
  })


  // 2.创建第二个组件构造器(父组件)
  const cpnC2 = Vue.extend({
    template: `
      
        我是标题2
        我是内容, 呵呵呵呵
        
      
    `,
    components: {
      // 在父组件中注册子组件,这样就可以在父组件里面使用子组件
      // 例如上面的  
      cpn1: cpnC1
    }
  })

  // root组件
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      // cpn1子组件在cpn2父组件中注册,父组件cpn2在Vue实例里面注册
      cpn2: cpnC2
    }
  })
script>

五、注册组件的语法糖写法(掌握)

返回目录

Vue 为了简化这个过程，提供了注册的语法糖
主要是省去了调用 Vue.extend() 的步骤,而是可以直接使用一个对象来代替

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Titletitle>
head>
<body>
<div id="app">
    <cpn>cpn>
    <cpn2>cpn2>
div>

<script src="../js/vue.js">script>
<script>
    // 1.全局组件注册的语法糖
    // 不推荐的写法:const cpn = Vue.extend()

    //2.注册组件(全局组件)
    Vue.component('cpn',{
      template:`
            
                我是标题
                我是内容，哈哈哈
            
      `
    })

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components:{
      'cpn2':{
        template: `
            
                我是标题2
                我是内容，哈哈哈
            `
      }
    }
  });
script>
body>
html>

六、组件模板抽离(分离)的写法（掌握）

返回目录

通过语法糖简化了 Vue 组件的注册过程，另外还有一个地方的写法比较麻烦，就是 template 模块写法

如果我们能将其中的HTML分离出来写，然后挂载到对应的组件上，必然结构会变得非常清晰
Vue 提供了两种方案来定义HTML模板内容
- 使用 < script > 标签
- 使用 < template > 标签

使用 script 标签：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Titletitle>
head>
<body>
<div id="app">
    <cpn>cpn>
    <cpn>cpn>
    <cpn>cpn>
div>


<script type="text/x-template" id="cpn">
    <div>
        <h2>我是标题</h2>
        <p>我是内容,哈哈哈</p>
    </div>
script>

<script src="../js/vue.js">script>
<script>

  // 1.注册一个全局组件
  Vue.component('cpn', {
    template: '#cpn'
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
script>

body>
html>

重点：使用template标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Titletitle>
head>
<body>

<div id="app">
    <cpn>cpn>
    <cpn>cpn>
    <cpn>cpn>
div>


<template id="cpn">
    <div>
        <h2>我是标题h2>
        <p>我是内容,呵呵呵p>
    div>
template>

<script src="../js/vue.js">script>
<script>

  // 1.注册一个全局组件
  Vue.component('cpn', {
    template: '#cpn'
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
script>

body>
html>

七、为什么组件中的data必须是函数（理解）

返回目录

组件可以访问Vue实例数据吗？

结论：组件不能直接访问Vue实例中的 data
注：即使访问放也不建议写在Vue实例中

组件是一个单独功能模块的封装：

这个模块有属于自己的 HTML 模板，也应该有属于自己的数据 data

组件自己的数据存放在哪呢？

组件对象也有一个 data 属性(也可以有 methods 属性)
只是这个 data 属性必须是一个函数
而且这个函数返回一个对象，对象内部保存着数据

<div id="app">
  <cpn>cpn>
  <cpn>cpn>
  <cpn>cpn>
div>


<template id="cpn">
  <div>
    <h2>{{title}}h2>
    <p>我是内容,呵呵呵p>
  div>
template>

<script src="../js/vue.js">script>
<script>

  // 1.注册一个全局组件
  Vue.component('cpn', {
    template: '#cpn',
    data() {
      return {
        title: 'abc'
      }
    }
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      // title: '我是标题'
    }
  })
script>

为什么 data 在组件中必须是一个函数呢？

首先，如果不算是一个函数，Vue 直接就会报错
其次，原因是在于 Vue 让每个组件对象都返回一个新的对象，因为如果是同一个对象，组件在多次使用后会相互影响（为了达到相互隔离的效果）

八、父子组件通信-父传子（掌握）

返回目录

在上一个小节中，我们提到了子组件是不能引用父组件或者Vue实例的数据的

但是，在开发中，往往一些数据确实需要从上层传递到下层

比如在一个页面中，我们从服务器请求到了很多的数据
其中的一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示
这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件) 将数据传递给小组件(子组件)

如何进行父子组件间的通信呢？

通过 props 向子组件传递数据
通过事件向父组件发送消息

props 基本用法

在组件中，使用选项 props 来声明需要从父级接收到的数据(properties)
props 的值有两种方式：

方式一：字符串数组，数组中的字符串就是传递时的名称
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

传数组:

<div id="app">
    
  <cpn :cmessage="message" :cmovies="movies">cpn>
div>


<template id="cpn">
  <div>
    <h1>{{cmovies}}}h1>
    <h1>{{cmessage}}h1>
  div>
template>

<script src="../js/vue.js">script>
<script>
  // 1.创建组件构造器(子组件)
  const cpn = {
    template: '#cpn',
    props: ['cmovies', 'cmessage']	//父传子,props
  }
  // 3.注册组件(将子组件在父组件里面注册)
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      movies: ['海王', '海贼王', '海尔兄弟']
    },
    components: {
      //对象字面量增强写法的属性增强写法
      cpn
    }
  })
script>

注意：我们在使用组件时，需要用v-bind 动态绑定数据。

传对象:

在前面，我们的 props 选项是使用一个数组
除了数组之外，我们也可以使用对象，当需要对props 进行类型等验证时，就需要对象写法了

验证支持的数据类型有：

String
Number
Boolean
Array
Object
Date
Function
Symbol

①类型限制
我们可以在 props 里面限制父组件给子组件传递的数据类型


<div id="app">
  <cpn :cmessage="message" :cmovies="movies">cpn>
div>


<template id="cpn">
  <div>
    <h1>{{cmovies}}}h1>
    <h1>{{cmessage}}h1>
  div>
template>

<script src="../js/vue.js">script>
<script>
  // 父传子: props
  const cpn = {
    template: '#cpn',
    props: {
      // 1.类型限制
      cmovies: Array,		// 限制父组件传的是数组类型
      cmessage: String,		// 限制父组件传的是字符串类型
    }

  }
  // root组件,我们当作父组件
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      movies: ['海王', '海贼王', '海尔兄弟']
    },
    components: {
      //对象字面量增强写法的属性增强写法
      cpn
    }
  })
script>

②默认值和必传值

type : 限制的类型
default : 如果没有传值,给一个默认值
- 注意:类型是对象或者数组时, 默认值必须是一个函数
required : 必须的,即意味着这个值是必须要传递的,不传就报错

<div id="app">
    
  <cpn :cmessage="message" :cmovies="movies">cpn>
div>

<template id="cpn">
  <div>
    <h1>{{cmovies}}}h1>
    <h1>{{cmessage}}h1>
  div>
template>

<script src="../js/vue.js">script>
<script>
  // 父传子: props
  const cpn = {
    template: '#cpn',
    // props: ['cmovies', 'cmessage'],
    props: {

      // 2.提供一些默认值, 以及必传值
      cmessage: {
        type: String,         // 类型限制为 String
        default: 'aaaaaaaa',  // 如果没有传值,则给一个默认值
        required: true        // required 必须的,即意味着这个值是必须要传递的,不传就报错
      },
      // 类型是对象或者数组时, 默认值必须是一个函数
      cmovies: {
        type: Array,
        default() {
          return []
        }
      }
    },


  // root组件,我们当作父组件
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      movies: ['海王', '海贼王', '海尔兄弟']
    },
    components: {
      //对象字面量增强写法的属性增强写法
      cpn
    }
  })
script>

③自定义类型
当我们有自定义构造函数时,验证也支持自定义的类型

④props驼峰标识
当我们 props 里面的属性是驼峰写法的时,在传入值时需要进行 - 连接

<div id="app">
  
  <cpn :c-info="info" :child-my-message="message" >cpn>
div>

<template id="cpn">
  <div>
    <h2>{{cInfo}}h2>
    <h2>{{childMyMessage}}h2>
  div>
template>

<script src="../js/vue.js">script>
<script>
  const cpn = {
    template: '#cpn',
    props: {
      // 驼峰写法cInfo
      cInfo: {
        //类型是对象或者数组时, 默认值必须是一个函数
        type: Object,
        default() {
          return {}
        }
      },
      childMyMessage: {
        type: String,
        default: ''
      }
    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: 'why',
        age: 18,
        height: 1.88
      },
      message: 'aaaaaa'
    },
    components: {
      cpn
    }
  })
script>

九、父子组件通信-子级向父级传递（掌握）

返回目录

props 用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件去
这个时候，我们需要使用自定义事件来完成

什么时候需要自定义事件呢？

当子组件需要向父组件传递数据时，就要用到自定义事件了
我们之前学习的 v-on 不仅仅可以用于监听 DOM 事件，也可以用于组件间的自定义事件

自定义事件的流程：

在子组件中，通过$emit() 来触发事件
在父组件中，通过v-on 来监听子组件事件

我们来看一个简单的例子：

我们之前做过一个两个按钮 +1 和 -1，点击后修改 counter
我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件
这样，我们就需要将子组件中的 counter，传给父组件的某个属性，比如total

<body>


<div id="app">
  
  <cpn @item-click="cpnClick">cpn>
div>


<template id="cpn">
  <div>
    <button v-for="item in categories"
            @click="btnClick(item)">
      {{item.name}}
    button>
  div>
template>

<script src="../js/vue.js">script>
<script>

  // 1.子组件
  const cpn = {
    template: '#cpn',
    data() {
      return {
        categories: [
          {id: 'aaa', name: '热门推荐'},
          {id: 'bbb', name: '手机数码'},
          {id: 'ccc', name: '家用家电'},
          {id: 'ddd', name: '电脑办公'},
        ]
      }
    },
    methods: {
      btnClick(item) {
        // console.log(item);
        // 1.发射事件: 自定义事件
        // 第一个参数是自定义事件的名称,第二个参数是自定义事件的参数
        this.$emit('item-click', item)//发射
      }
    }
  }

  // 2.父组件
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn
    },
    methods: {
      // 3.父组件里面定义方法处理
      cpnClick(item) {
        console.log('cpnClick', item);
      }
    }
  })
script>

body>

十、父子组件通信-结合双向绑定案例（掌握）

返回目录

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Titletitle>
head>
<body>

<div id="app">
    <cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change">cpn>
div>
<template id="cpn">
    <div>
        <h2>props:{{number1}}h2>
        <h2>data:{{dnumber1}}h2>
            
            <input type="text" :value="dnumber1" @input="num1Input">
        <h2>props:{{number2}}h2>
        <h2>data:{{dnumber2}}h2>
            
            <input type="text" :value="dnumber2" @input="num2Input">
    div>
template>
<script src="../js/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      num1:1,
      num2:0
    },
    methods:{
      num1change(value){
        this.num1=Number(value);
      },
      num2change(value){
        this.num2=Number(value);
      }
    },
    components:{
      cpn:{
        template:'#cpn',
        props:{
          number1:Number,
          number2:Number,
        },
        data(){
          return{
            dnumber1:this.number1,
            dnumber2:this.number2
          }
        },
        methods:{
          num1Input(event){
            this.dnumber1=event.target.value;
            this.$emit('num1change',this.dnumber1)
          },
          num2Input(event){
            this.dnumber2=event.target.value;
            this.$emit('num2change',this.dnumber2)
          }
        }
      }
    }
  });
script>

body>
html>

十一、结合双向绑定案例-画图分析（掌握）

返回目录

十二、结合双向绑定案例-watch实现

返回目录

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Titletitle>
head>
<body>
<div id="app">
    <cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change">cpn>
div>
<template id="cpn">
    <div>
        <h2>props:{{dnumber1}}h2>
        <h2>data:{{dnumber1}}h2>
        <input type="text" v-model="dnumber1">
        <h2>props:{{dnumber2}}h2>
        <h2>data:{{dnumber2}}h2>
        <input type="text" v-model="dnumber2">
    div>
template>

<script src="../js/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      num1:1,
      num2:0
    },
    methods:{
      num1change(value){
        this.num1=value;
      },
      num2change(value){
        this.num2=value;
      }
    },
    components:{
      cpn:{
        template:'#cpn',
        props:{
          number1:Number,
          number2:Number,
        },
        data(){
          return{
            dnumber1:this.number1,
            dnumber2:this.number2
          }
        },
        watch:{
          dnumber1(newValue){
            this.dnumber1=newValue
            this.$emit('num1change',this.newValue)
          },
          dnumber2(newValue){
            this.dnumber2=newValue
            this.$emit('num2change',this.newValue)
          }
        }
      }
    }
  });
script>
body>
html>

十三、父组件访问子组件-children-refs（掌握）

返回目录

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件。

父组件访问子组件：使用 $children 或 $refs
子组件访问父组件：使用$parent

我们先来看下$children (它是一个复数)的访问

this.$children 是一个数组类型，它包含所有子组件对象

$children 的缺陷：

通过 $children 访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值
但是当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化
有时候，我们想明确获取其中一个特定的组件，这个时候就可以使用 $refs

$refs 的使用

$ refs 和 ref 指令通常是一起使用的
首先，我们通过 ref 给某一个子组件绑定一个特定的 ID
其次，通过 this.$refs.ID 就可以访问到该组件了

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Titletitle>
head>
<body>

<div id="app">
    <cpn>cpn>
    <cpn>cpn>
    <cpn ref="aaa">cpn>
    <button @click="btnClick">按钮button>
div>


<template id="cpn">
    <div>我是子组件div>
template>

<script src="../js/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      btnClick() {
        // 2.$refs => 对象类型, 默认是一个空的对象 必须在组件上加 ref='bbb'
        /*console.log(this.$children)//$children不常使用因为不建议使用下标值取值
        this.$children[0].showMessage();
        this.$children[0].name;*/
        console.log(this.$refs.aaa.name);
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            name: '我是子组件的name'
          }
        },
        methods: {
          showMessage(){
            console.log('我是子组件的方法')
          }
        }
      },
    }
  })
script>
body>
html>

十四、子组件访问父组件-parent-root（理解）

返回目录

如果我们想在子组件中直接访问父组件，可以通过 $parent

尽管在 Vue 开发中，我们允许通过 $parent 来访问父组件，但是在真实开发中尽量不要这要做
子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了
如果我们将子组件放入另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题

$parent(了解即可)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Titletitle>
head>
<body>

<div id="app">
    <cpn>cpn>
div>


<template id="cpn">
    <div>
        <h2>我是cpn组件h2>
        <ccpn>ccpn>
    div>
template>

<template id="ccpn">
    <div>
        <h2>我是ccpn子组件h2>
        <button @click="btnClick">按钮button>
    div>
template>

<script src="../js/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn',
        data(){
          return{
            name:'我是cpn组件的name'
          }
        },
        components: {
          ccpn: {
            template: '#ccpn',
            methods: {
              btnClick() {
                // 1.访问父组件$parent
                console.log(this.$parent)
                // 2.访问父组件的name
                console.log(this.$parent.name);
              }
            }
          }
        }
      }
    }
  })
script>
body>
html>

$root（也用的比较少）

组件化高级

十五、slot-插槽的基本使用（掌握）

返回目录

为什么使用slot

slot翻译为插槽

在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。
插槽的目的是让我们原来的设备具备更多的扩展性
比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等

组件的插槽

组件的插槽也是为了我们封装的组件更加具有扩展性
让使用者可以决定组件内部的一些内容到底展示什么

栗子：移动网站中的导航栏

移动开发中，几乎每个页面都有导航栏
导航栏我们必然会封装成一个插件，比如nav-bar组件
一旦有了这个组件，我们就可以在多个页面中复用了

如何封装这类组件呢？slot

如何封装这类组件呢？

它们也有很多区别，但是也有很多共性
如果，我们每一个单独去封装一个组件，显然不合适：比如每个页面都返回，这部分内容我们就要重复去封装
但是，我们封装成一个，好像也不合理；有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字

如何封装合适呢？抽取共性，保留不同

最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽
一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容
是搜索框，还是文字，还是菜单。由调用者自己来决定
这就是我们为什么要学习组件中的插槽slot的原因

说明图：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Titletitle>
head>
<body>
<div id="app">
    <cpn><button>我是按钮button>cpn>
    <cpn><span>我是spanspan>cpn>
    <cpn>
        <cpn>cpn>
    cpn>
    <cpn>
        <button>按钮1button>
        <button>按钮2button>
        <button>按钮3button>
    cpn>
div>

<template id="cpn">
    <div>
        <h2>我是组件h2>
        <p>我是组件，哈哈哈p>
        <slot><button>外界未指定则显示此默认button>slot>
    div>
template>

<script src="../js/vue.js">script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components:{
      cpn: {
        template:'#cpn'
      }
    }
  });
script>

body>
html>

运行结果：

十六、slot-具名插槽的作用（掌握）

返回目录

当子组件的功能复杂时，子组件的插槽可能并非是一个。

比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？p这个时候，我们就需要给插槽起一个名字

如何给插槽起名字呢？

给插槽起一个名字，只要给 slot 元素一个 name 属性即可

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Titletitle>
head>
<body>
<div id="app">
   <cpn><span  slot="center">中间标题span><button slot="right">右边按钮button>cpn>
div>

<template id="cpn">
    <div>
        <slot name="left"><span>左边span>slot>
        <slot name="center"><span>中间span>slot>
        <slot name="right"><span>右边span>slot>
        
    div>
template>

<script src="../js/vue.js">script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components:{
      cpn: {
        template:'#cpn'
      }
    }
  });
script>

body>
html>

十七、编译作用域的概念（理解）

返回目录

在真正学习插槽之前，我们需要先理解一个概念：编译作用域
官方对于编译的作用域解析比较简单，我们自己来通过一个例子来理解这个概念：
我们来考虑下面的代码是否最终是可以渲染出来的：
- < my-cpn v-show=“isShow”>中，我们使用了isShow属性
- isShow属性包含在组件中，也包含在Vue实例中

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Titletitle>
head>
<body>
<div id="app">
    <cpn v-show="isShow">cpn>
div>

<template id="cpn">
    <div>
        <h2>我是子组件h2>
        <p>我是内容哈哈哈p>
        <button v-show="isShow">按钮button>
    div>
template>

<script src="../js/vue.js">script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: true
    },
    components:{
      cpn: {
        template:'#cpn',
        data(){
          return{
            isShow:false
          }
        }
      }
    }
  });
script>

body>
html>

答案：最终可以渲染出来，也就是使用的是 Vue 实例的属性

为什么呢？

官方给出了一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在级作用域内编译
而我们在使用 < my-cpn v-show=“isShow”> 的时候，整个组件的使用过程相当于在父组件中出现的
那么它的作用域就是父组件，使用的属性也是属于父组件的属性
因此 ,isShow 使用的是 Vue 实例中的属性，而不是子组件的属性

十八、作用域插槽的使用（掌握）

返回目录

一句话总结：父组件替换插槽的标签，但是内容由子组件来提供

我们先提一个需求：

子组件包括一组数据,比如：PLanguages：[‘javascript’,‘python’,‘Swift’,‘Go’,‘C++’]
需要在多个界面进行展示
- 某些界面是以水平方向一一展示的
- 某些界面是以列表形式展示
- 某些界面直接展示一个数组
内容在子组件，希望父组件告诉我们如何展示，怎么办呢？
- 利用 slot 作用域插槽就可以了

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Titletitle>
head>
<body>
<div id="app">
    <cpn>cpn>
    <cpn>
        
        
       <template v-slot="slot">
            <span v-for="item in slot.data">{{item}}-span>
        template>
    cpn>
    <cpn>
        <template slot-scope="slot">
            <span v-for="item in slot.data">{{item}}***span>
        template>
    cpn>
    <cpn>
        <template slot-scope="slot">
            <span>{{slot.data.join('***')}}span>
        template>
    cpn>
div>

<template id="cpn">
    <div>
        <slot :data="pLanguages">
            <ul>
                <li v-for="item in pLanguages">{{item}}li>
            ul>
        slot>
    div>
template>

<script src="../js/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components:{
      cpn:{
        template:'#cpn',
        data(){
          return{
            pLanguages:['javascript','python','Swift','Go','C++','java','C#']
          }
        }
      }
    }
  });
script>
body>
html>

十九、前端代码复杂带来的问题（理解）

返回目录

模块化开发引入

JavaScript原始功能

在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。
- 那个时代的代码是怎么写的呢？直接将代码写在可以去掉
  在webpack.config.js中配置：
  
  打包：
  
  三十四、webpack-UglifyjsWebpackPlugin的使用（掌握）
  
  返回目录
  
  在项目发布之前，我们必然需要对js等文件进行压缩处理
  - 这里，我们就对打包的js文件进行压缩
  - 我们使用一个第三方的插件uglifyjs-webpack-plugin，且版本号指定1.1.1，和CLI2保持一致
```
npm install [email protected] --save-dev
```
  修改webpack.config.js文件，使用插件：
  
  查看打包后的bunlde.js文件，是已经被压缩过了
  
  
  
  三十五、webpack-dev-server搭建本地服务器（掌握）
  
  返回目录
  webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
  
  类似于 node.js 阶段用到的 nodemon 工具，每当修改了源代码， webpack 会自动进行项目的动态打包构建（没有真实的映射到硬盘，所以最后测试完发布的时候只需要必须执行一次打包命令）
  
  使用之前需要先安装webpack-dev-server
```
npm install [email protected] --save-dev
```
  配置：
  - contentBase:——————为哪一个文件夹提供本地服务，默认是根文件夹，我们这里填写
  - inline:true ————页面实时刷新
  - port: ————指定访问的端口号
  - historyApiFallback： ————在SPA页面中，依赖HTML5的history模式（介绍路由时再详解）
  - host: ‘127.0.0.1’： ————实时打包所使用的主机地址
  配置命令：
  
  输入npm run dev指令
  
  测试：
  
  服务器运行时我们进行动态修改代码就行了，最后部署的时候一定要执行打包命令
  
  优化配置，不需要我们手动访问浏览器
  
  测试指令npm run dev，完成（Ctrl+C中断服务器）
  
  三十六、webpack-配置文件的分离（掌握）
  
  返回目录
  
  场景引入：
  
  这时候就需要我们进行单独分离了，把测试时和打包发布时的配置分离出来
  
  平时小项目且生产环境和开发环境不是很复杂的时候是不需要分离的，而且Vue脚手架也是做了分离的
  
  建立build文件夹和三个js文件
  
  现在的问题是怎么在不同的阶段组合配置文件
  下载安装webpack-merge（merge是合并的意思）
```
npm install webpack-merge
```
  base.config.js中放公共的配置：
```
/*动态获取路径第一步导入我们的path*/
const path =require('path')/*这个path文件存在node包中，需要我们手动装*/

const webpack = require('webpack');

const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,"dist"),/*动态获取我们的路径,resolve方法拼接,__dirname为所依赖的路径*/
    filename:'bundle.js',
    /*publicPath:'dist/'不再需要*/
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader' , 'css-loader']
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              esModule:false,
              name: 'img/[name].[hash:8].[ext]'
            },
          }]
      },
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { targets: "defaults" }]
            ]
          }
        }
      },
      {
        test: /\.vue/,
        use: ['vue-loader']
      }
    ]
  },
  resolve:{
    //alias：别名
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    }
  },
  plugins:[
    new webpack.BannerPlugin('最终版权归ldx所有'),
    new HtmlWebpackPlugin({
      template:'index.html'
    }),
  ]
}
```
  dev.config.js:放入测试时的配置：
```
const webpackMerge=require('webpack-merge')
const baseConfig=require('./base.config')

module.exports= webpackMerge.merge(baseConfig,{//高版本的webpack-merge是一个对象，需要调用其merge方法才能正常运行
  devServer:{
    contentBase:'./dist',/*为哪一个文件夹提供本地服务，默认是根文件夹，我们这里填写./dist*/
    inline:true/*页面实时刷新*/
  }
})
```
  pro.config.js:放入打包发布时的配置：
```
const UglifyJsWebpackPlugin=require('uglifyjs-webpack-plugin')
const webpackMerge=require('webpack-merge')
const baseConfig=require('./base.config.js')


module.exports=webpackMerge.merge(baseConfig,{//高版本的webpack-merge是一个对象，需要调用其merge方法才能正常运行
  plugins:[
    new UglifyJsWebpackPlugin()
  ]
})
```
  删除原来的webpack.config.js文件
  
  在package.json中配置命令：
  
  打包：路径问题
  
  打包位置在build下的dist包中，需要我们修改base.config.js文件的输出路径：
  
  再次打包：
  
  路径正确：
  
  可以试试npm run dev：
  也成功运行：
  
  动态添加内容试试:
  
  浏览器也是实时刷新：

你可能感兴趣的:(Vuejs学习,vue.js,html,javascript)

element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
vue3中el-table中点击图片放大时，被表格覆盖叫我小鹏呀 vue.js javascript 前端
问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
vue项目element-ui的table表格单元格合并酋长哈哈 vue.js elementui javascript 前端
一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
Vue中table合并单元格用法 weixin_30613343 javascript ViewUI
地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）跳房子的前端前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
Vue( ElementUI入门、vue-cli安装) m0_l5z elementui vue.js
一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
vue+el-table 可输入表格使用上下键进行input框切换以对_ vue学习记录 vue.js javascript 前端
使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
vue + Element UI table动态合并单元格我家媳妇儿萌哒哒 element UI vue.js 前端 javascript
一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
详解：如何设计出健壮的秒杀系统？夜空_2cd3
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.js vue-cli3
这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
JavaScript `Map` 和 `WeakMap`详细解释跳房子的前端 JavaScript 原生方法 javascript 前端开发语言
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php 课程设计 vue.js
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
切换淘宝最新npm镜像源是 hai40587 npm 前端 node.js
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
斟一小组鸡血视频和自己一起成长
http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2 vue.js javascript 前端
vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
Dockerfile命令详解之 FROM 清风怎不知意容器化 java 前端 javascript
许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。焚木灵 node.js vue
可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
项目中枚举与注解的结合使用飞翔的马甲 java enum annotation
前言：版本兼容，一直是迭代开发头疼的事，最近新版本加上了支持新题型，如果新创建一份问卷包含了新题型，那旧版本客户端就不支持，如果新创建的问卷不包含新题型，那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。一、枚举 1.在创建枚举类的时候，该类已继承java.lang.Enum类，所以自定义枚举类无法继承别的类，但可以实现接口。
【Scala十七】Scala核心十一：下划线_的用法 bit1129 scala
下划线_在Scala中广泛应用，_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方，本文将不断完善_的使用场景以及所表达的含义 1. 在高阶函数中使用 scala> val list = List(-3,8,7,9) list: List[Int] = List(-3, 8, 7, 9) scala> list.filter(_ > 7) r
web缓存基础：术语、http报头和缓存策略 dalan_123 Web
对于很多人来说，去访问某一个站点，若是该站点能够提供智能化的内容缓存来提高用户体验，那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储，是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求，这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念，具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容，并谈论下
crontab 问题周凡杨 linux crontab unix
一： 0481-079 Reached a symbol that is not expected. 背景： */5 * * * * /usr/IBMIHS/rsync.sh
让tomcat支持2级域名共享session g21121 session
tomcat默认情况下是不支持2级域名共享session的，所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况，但是只需修改几处配置就可以了。打开tomcat下conf下context.xml文件找到Context标签,修改为如下内容如果你的域名是www.test.com <Context sessionCookiePath="/path&q
web报表工具FineReport常用函数的用法总结（数学和三角函数）老A不折腾 Web finereport 总结
ABS ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 Number:需要求出绝对值的任意实数。示例: ABS(-1.5)等于1.5。 ABS(0)等于0。 ABS(2.5)等于2.5。 ACOS ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度，返回角度以弧度形式表示。 Number:需要返回角
linux 启动java进程 sh文件墙头上一根草 linux shell jar
#!/bin/bash #初始化服务器的进程PId变量 user_pid=0; robot_pid=0; loadlort_pid=0; gateway_pid=0; ######### #检查相关服务器是否启动成功 #说明： #使用JDK自带的JPS命令及grep命令组合，准确查找pid #jps 加 l 参数，表示显示java的完整包路径 #使用awk，分割出pid
我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory aijuans Spring 3 系列
如何使用ApplicationContext替换BeanFactory？ package onlyfun.caterpillar.device; import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.xml.XmlBeanFactory; import
Linux 内存使用方法详细解析 annan211 linux 内存 Linux内存解析
来源 http://blog.jobbole.com/45748/ 我是一名程序员，那么我在这里以一个程序员的角度来讲解Linux内存的使用。一提到内存管理，我们头脑中闪出的两个概念，就是虚拟内存，与物理内存。这两个概念主要来自于linux内核的支持。 Linux在内存管理上份为两级，一级是线性区，类似于00c73000-00c88000，对应于虚拟内存，它实际上不占用
数据库的单表查询常用命令及使用方法(-) 百合不是茶 oracle 函数单表查询
创建数据库; --建表 create table bloguser(username varchar2(20),userage number(10),usersex char(2)); 创建bloguser表,里面有三个字段 &nbs
多线程基础知识 bijian1013 java 多线程 thread java多线程
一．进程和线程进程就是一个在内存中独立运行的程序，有自己的地址空间。如正在运行的写字板程序就是一个进程。 “多任务”：指操作系统能同时运行多个进程（程序）。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。线程：是进程内部单一的一个顺序控制流。线程和进程 a. 每个进程都有独立的
fastjson简单使用实例 bijian1013 fastjson
一.简介阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法，把JSON Parse的性能提升到极致，是目前Java语言中最快的JSON库；包括“序列化”和“反序列化”两部分，它具备如下特征：
【RPC框架Burlap】Spring集成Burlap bit1129 spring
Burlap和Hessian同属于codehaus的RPC调用框架，但是Burlap已经几年不更新，所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时，不应该考虑Burlap了。这篇文章还是记录下Burlap的用法吧，主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成
【Mahout一】基于Mahout 命令参数含义 bit1129 Mahout
1. mahout seqdirectory $ mahout seqdirectory --input (-i) input Path to job input directory(原始文本文件). --output (-o) output The directory pathna
linux使用flock文件锁解决脚本重复执行问题 ronin47 linux lock　重复执行
linux的crontab命令，可以定时执行操作，最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题，如果设定了任务每分钟执行一次，但有可能一分钟内任务并没有执行完成，这时系统会再执行任务。导致两个相同的任务在执行。例如： <? // test .php
java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 bylijinnan java
public class OcuppyMoreThanHalf { /** * Q74 数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 * two solutions: * 1.O(n) * see <beauty of coding>--每次删除两个不同的数字，不改变数组的特性 * 2.O(nlogn) * 排序。中间
linux 系统相关命令 candiio linux
系统参数 cat /proc/cpuinfo cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况性能参数 1）top M：按内存使用排序 P：按CPU占用排序 1：显示各CPU的使用情况 k：kill进程 o：更多排序规则回车：刷新数据 2）ulimit ulimit -a：显示本用户的系统限制参
[经营与资产]保持独立性和稳定性对于软件开发的重要意义 comsci 软件开发
一个软件的架构从诞生到成熟，中间要经过很多次的修正和改造如果在这个过程中，外界的其它行业的资本不断的介入这种软件架构的升级过程中那么软件开发者原有的设计思想和开发路线
在CentOS5.5上编译OpenJDK6 Cwind linux OpenJDK
几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6，将编译过程和遇到的问题作一简要记录，备查。 0. OpenJDK介绍 OpenJDK是Sun（现Oracle）公司发布的基于GPL许可的Java平台的实现。其优点： 1、它的核心代码与同时期Sun（-> Oracle）的产品版基本上是一样的，血统纯正，不用担心性能问题，也基本上没什么兼容性问题；（代码上最主要的差异是
java乱码问题 dashuaifu java乱码问题 js中文乱码
swfupload上传文件参数值为中文传递到后台接收中文乱码在js中用setPostParams（{"tag" : encodeURI( document.getElementByIdx_x("filetag").value，"utf-8")}）; 然后在servlet中String t
cygwin很多命令显示command not found的解决办法 dcj3sjt126com cygwin
cygwin很多命令显示command not found的解决办法修改cygwin.BAT文件如下 @echo off D: set CYGWIN=tty notitle glob set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us
[介绍]从 Yii 1.1 升级 dcj3sjt126com PHP yii2
2.0 版框架是完全重写的，在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单，通过本指南你将会了解两个版本间主要的不同之处。如果你之前没有用过 Yii 1.1，可以跳过本章，直接从"入门篇"开始读起。请注意，Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发
Linux SSH免登录配置总结 eksliang ssh-keygen Linux SSH免登录认证 Linux SSH互信
转载请出自出处：http://eksliang.iteye.com/blog/2187265 一、原理我们使用ssh-keygen在ServerA上生成私钥跟公钥，将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。生成公钥与私钥有两种加密方式，第一种是
手势滑动销毁Activity gundumw100 android
老是效仿ios，做android的真悲催！有需求：需要手势滑动销毁一个Activity 怎么办尼？自己写？不用~，网上先问一下百度。结果： http://blog.csdn.net/xiaanming/article/details/20934541 首先将你需要的Activity继承SwipeBackActivity，它会在你的布局根目录新增一层SwipeBackLay
JavaScript变换表格边框颜色 ini JavaScript html Web html5 css
效果查看：http://hovertree.com/texiao/js/2.htm代码如下，保存到HTML文件也可以查看效果： <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码-何问起</title> </head> <body&
Kafka Rest : Confluent kane_xie kafka REST confluent
最近拿到一个kafka rest的需求，但kafka暂时还没有提供rest api（应该是有在开发中，毕竟rest这么火），上网搜了一下，找到一个Confluent Platform，本文简单介绍一下安装。这里插一句，给大家推荐一个九尾搜索，原名叫谷粉SOSO，不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了，出来之后用度娘搜技术问题，那匹配度简直感人。环境声明：Ubu
Calender不是单例 men4661273 单例 Calender
在我们使用Calender的时候，使用过Calendar.getInstance()来获取一个日期类的对象，这种方式跟单例的获取方式一样，那么它到底是不是单例呢，如果是单例的话，一个对象修改内容之后，另外一个线程中的数据不久乱套了吗？从试验以及源码中可以得出，Calendar不是单例。测试： Calendar c1 =
线程内存和主内存之间联系 qifeifei java thread
1， java多线程共享主内存中变量的时候，一共会经过几个阶段， lock:将主内存中的变量锁定，为一个线程所独占。 unclock:将lock加的锁定解除，此时其它的线程可以有机会访问此变量。 read:将主内存中的变量值读到工作内存当中。 load:将read读取的值保存到工作内存中的变量副本中。
schedule和scheduleAtFixedRate tangqi609567707 java timer schedule
原文地址：http://blog.csdn.net/weidan1121/article/details/527307 import java.util.Timer;import java.util.TimerTask;import java.util.Date; /** * @author vincent */public class TimerTest {
erlang 部署 wudixiaotie erlang
1.如果在启动节点的时候报这个错： {"init terminating in do_boot",{'cannot load',elf_format,get_files}} 则需要在reltool.config中加入 {app, hipe, [{incl_cond, exclude}]}, 2.当generate时，遇到： ERROR

Vue第三篇（组件化开发与webpack详解）

目录（点击下面选项跳转知识点）

知识概览

一、组件化的实现和使用步骤(掌握)

注册组件的基本步骤

二、组件化的基本使用过程(掌握)

我是标题

三、全局组件和局部组件(掌握)

我是标题

四、父组件和子组件的区分(掌握)

我是标题

我是标题2

我是标题1

我是标题2

五、注册组件的语法糖写法(掌握)

我是标题

我是标题2

六、组件模板抽离(分离)的写法（掌握）

七、为什么组件中的data必须是函数（理解）

八、父子组件通信-父传子（掌握）

props 基本用法

九、父子组件通信-子级向父级传递（掌握）

十、父子组件通信-结合双向绑定案例（掌握）

十一、结合双向绑定案例-画图分析（掌握）

十二、结合双向绑定案例-watch实现

十三、父组件访问子组件-children-refs（掌握）

十四、子组件访问父组件-parent-root（理解）

组件化高级

十五、slot-插槽的基本使用（掌握）

为什么使用slot

如何封装这类组件呢？slot

十六、slot-具名插槽的作用（掌握）

十七、编译作用域的概念（理解）

十八、作用域插槽的使用（掌握）

十九、前端代码复杂带来的问题（理解）

模块化开发引入

三十四、webpack-UglifyjsWebpackPlugin的使用（掌握）

三十五、webpack-dev-server搭建本地服务器（掌握）

使用之前需要先安装webpack-dev-server

三十六、webpack-配置文件的分离（掌握）

你可能感兴趣的:(Vuejs学习,vue.js,html,javascript)