Vue Day 04

 

1、父子組件的訪問

1.1父訪問子

• $children

• $ref

 

1.2子訪問父

• $parent

2、插槽slot

2.1具名插槽

• <slot> 元素有一個特殊的特性：name。這個特性能夠用來定義額外的插槽

• 在向具名插槽提供內容的時候，咱們能夠在一個 <template> 元素上使用 v-slot 指令，並以 v-slot 的參數的形式提供其名稱

   

2.2做用域插槽

• <slot v-bind:user="user">

• <template v-slot:default="slotProps">

3、前端模塊化

3.1CommonJS

• 導出 module.exports=對象

• 導入 let obj=require('xxx.js')

3.2ES6的export

• 導出 export {變量1,變量2...}或者export let name='abc'

• 導入

  • 首先，咱們須要在HTML代碼中把js文件設置爲type=module，而後再import obj from 'xxx.js' 或者 import * as obj from 'xxx.js'

4、webpack

4.1步驟

• 全局安裝webpack ：npm install webpack -g

• 局部安裝webpack：npm install webpack --save-dev

• 建立src（開發的源代碼）和dist（發送到服務器部署的）文件夾

• 生成package.json：npm init

• 使用webpack打包：webpack src/main.js dist/bundle.js

4.2配置webpack的入口和出口

• 在項目根目錄下建立一個webpack.config.js

• const path = require('path')//從node環境下取得當前文件的路徑對象
  ​
  module.exports = {
    entry: './src/main.js',//入口
    output: {//出口
      path: path.resolve(__dirname, 'dist'),//絕對路徑
      filename: 'bundle.js'
   },
  }

• 這樣能夠用webpack命令直接使用webpack打包而不用寫後面的參數

4.3package.json中定義啓動

• 咱們能夠在package.json的scripts中定義本身的執行腳本

• {
    "name": "meetwebpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack"
   },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^3.6.0"
   }
  }

• 而後使用命令npm run build,它至關於使用了命令webpack

4.4css-loader

• 咱們在js文件中使用import style from 'xxx.css'導入css文件

• 使用命令npm install --save-dev css-loader和npm install style-loader --save-dev安裝style-loader 和 css-loader

• 配置 webpack.config.js

  {
      ...
    module: {
      rules: [
       {
          test: /\.css$/,
          use: [
           { loader: "style-loader" },
           { loader: "css-loader" }
         ]
       }
     ]
   }
  }