Vue(day5)

時間 2019-12-13

標籤 vue day5 day 简体版

原文原文鏈接

1、監聽數據變化的三種形式

假設咱們須要提供兩個輸入框，分別輸入姓和名，而後自動拼接爲姓名。這樣，咱們就須要監聽輸入框的數據變化，讓完整的姓名跟隨輸入的變更而變化。咱們可使用如下三種方式：javascript

一、結合DOM事件使用`mothod`來監聽數據變化

html代碼：使用keyup事件來監聽數據的改變。css

<div id="app">
    <input type="text" v-model="firstname" @keyup="getFullname">
    <input type="text" v-model="lastname" @keyup="getFullname">
    <input type="text" v-model="fullname">
</div>

js代碼：html

new Vue({
    el: '#app',
    data: {
        firstname: '',
        lastname: '',
        fullname: ''
    },
    methods: {
        getFullname(){
            this.fullname = (this.firstname + ' ' + this.lastname).trim();
            return this.fullname;
        }
    }
});

二、使用`watch`偵聽器

相似methods的使用，咱們能夠在Vue實例中使用watch來監聽表達式數據的變化，並執行對應的回調函數。java

html代碼：node

<div id="app">
    <input type="text" v-model="firstname">
    <input type="text" v-model="lastname">
    <input type="text" v-model="fullname">
</div>

js代碼：jquery

new Vue({
    el: '#app',
    data: {
        firstname: '',
        lastname: '',
        fullname: ''
    },
    watch: {
        firstname: function(){
            this.fullname = (this.firstname + ' ' + this.lastname).trim();
        },
        lastname: function(){
            this.fullname = (this.firstname + ' ' + this.lastname).trim();
        }
    }
});

能夠發現，watch監聽器以要監聽的數據表達式做爲鍵，值爲處理數據變化後的函數。webpack

三、使用計算屬性`computed`

直接看效果：es6

html代碼不變，注意js代碼：web

new Vue({
    el: '#app',
    data: {
        firstname: '',
        lastname: ''
    },
    computed: {
        fullname: function(){
            return (this.firstname + ' ' + this.lastname).trim();
        }
    }
});

首先去掉了data中的fullname屬性，取而代之的是computed中的fullname屬性。計算屬性須要返回一個值做爲屬性值，且能自動監聽內部依賴的變化，自動更新屬性值，並對值進行存儲，以供屢次調用。正則表達式

四、三者的區別

watch偵聽器更像是專門用於監聽數據變化的處理方法，但容易形成濫用，而methods通常用於處理業務邏輯，即相同的邏輯能夠直接調用。計算屬性很直接，將須要的屬性進行計算處理後再進行調用。

2、webpack的簡單使用

一、靜態資源的處理

對於Web項目來講，包含各式各樣的靜態資源頁面，且格式種類繁多，如：

js
css
image
模塊&組件

靜態資源多而雜的時候，頁面加載效率就低，且難以處理好資源之間的依賴關係。

因此咱們須要對資源進行整合壓縮，對於小圖片來講還可使用圖片精靈圖（image sprite）、轉碼爲Base64字節碼等。

而依賴關係除了手動處理咱們還可使用一些工具。

而以上問題咱們均可以使用webpack工具進行解決，如文件格式轉化、壓縮整合等。下面咱們將結合Vue來使用webpack。

二、webpack的配置

場景

請看如下場景：

咱們在Node中使用jquery來改變表格的樣式，其中，咱們還使用了大多瀏覽器不支持的es6語法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<table id="tab"  border="1" rules="all">
    <thead>
        <td>header1</td>
        <td>header2</td>
        <td>header3</td>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>4</td>
            <td>4</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript" src="./dist/main.js"></script>
</body>
</html>

import $ from 'jquery';//es6語法：等價於const $ = require('jquery');

$(function(){
    $('#tab > thead').css({
        backgroundColor: '#bdccc2'
    });
    $('#tab > tbody > tr:even').css({
        backgroundColor: '#c1f1cd'
    });
    $('#tab > tbody > tr:odd').css({
        backgroundColor: '#f3ffab'
    });
});

這樣，當咱們直接訪問這個頁面時就會報錯。如今咱們使用webpack對mian.js進行打包處理，並保存到新的目錄文件中，如: \dist\bundle.js

在使用以前，咱們須要先安裝webpack。

　安裝

# 全局安裝
npm install webpack -g
# 本地開發環境安裝
npm install webpack --save-dev
# 4.0以上版本還須要安裝
npm install --save-dev webpack-cli

打包

使用命令行工具執行：

webpack ./src/mian.js -o ./dist/bundle.js

而後main.js就會被打包成新的bundle.js文件，咱們在頁面中引用這個js，就能夠看到jquery作出的樣式效果：

咱們發現，webpack爲咱們作了如下幾點：

打包壓縮js文件（main.js）
自動處理包之間的依賴（jqurey）

改進：配置文件

咱們發現每次都須要在命令行填寫輸入輸出文件路徑實在是太麻煩了，且容易出錯。因此webpack提供了一個讀取默認名爲webpack.config.js配置文件的功能。在該配置文件中咱們能夠配置諸多信息，其中就包括文件的入口和出口。

如今，咱們在項目的更目錄下新建一個名爲webpack.config.js的文件。

//webpack是基於node的，因此配置文件其實就是一個js導出的對象
var path = require('path');

module.exports = {
    //入口
    entry: path.join(__dirname, '/src/main.js'),
    //出口
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    }
}

這樣，咱們就能夠直接使用webpack命令進行打包了。可能咱們還不知足於手動加載的方式，就像nodemon同樣，咱們但願當咱們做出變更時就能及時打包響應，這樣咱們須要另外安裝一個模塊：webpack-dev-server。

再改進：使用`webpack-dev-server`熱加載

安裝

# 安裝(注意，依賴本地webpack)
npm install web-dev-server --save-dev

使用

在package.json的scripts中配置一下就能使用了：

# 配置到package.json
"dev": "webpack-dev-server"
# 命令行啓動
npm run dev

細節問題

如今咱們須要經過http://localhost:8080來訪問頁面。此時若是咱們修改並保存main.js，會自動執行打包動做，但咱們頁面卻沒有發生變化，這是由於自動編譯的出口目錄並非原來那個文件，且不在物理磁盤，而在內存中。默認的路徑爲根路徑，因此/bundle.js才能訪問到自動打包的文件。

更多的配置

咱們能夠修改命令或者在webpack.config.js中增長配置來修改一些默認選項。

使用命令：

# --open 自動打開瀏覽器訪問根目錄
# --contentBase ./src 設置訪問的根目錄爲src目錄
# --hot 啓用熱加載
webpack-dev-server --open --contentBase ./src --hot

使用配置文件也能達到同樣的效果

const path = require('path');
const webpack = require('webpack');

module.exports = {
    //入口
    entry: path.join(__dirname, '/src/main.js'),
    //出口
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    devServer: {
        open: true,
        contentBase: path.join(__dirname, '/src'),
        hot: true //注意，這樣配置還不夠，由於熱更新須要使用到webpack自帶的一個插件：模塊熱替換插件
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()//啓用模塊熱替換插件
    ]
}

更多關於webpack-dev-server請參考https://www.webpackjs.com/configuration/dev-server/

三、加載非js文件

webpack默認只能加載js文件，若是是非js文件則須要使用第三方文件加載模塊。

好比咱們在main.js導入咱們寫的一個css文件main.css。

一、首要咱們任意規定一個css樣式：
```
li{
  list-style-type: none;
}
```
二、而後須要在main.js中導入（這是webpack提供的特殊loader模式）：
```
import './main.css'
```
三、如今咱們只須要配置須要的第三方文件加載模塊便可

加載css文件須要兩個模塊：style-loader和css-loader.
```
npm install style-loader css-loader --dev
```
修改配置文件，增長配置選項：
```
module.exports = {
  module: {//第三方模塊的引用
      rules: [//匹配規則 test使用正則表達式來匹配loader的文件類型 use是使用的模塊：從後往前加載
          {test: /\.css$/, use: ['style-loader', 'css-loader']}
      ]
  }
}
```
注意：這個加載順序很重要，若是模塊之間存在依賴或順序關係，則須要保證加載順序從後往前加載。

相似的文件加載是同樣的道理。

更多使用細節請參考官方文檔

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。