Vue(day5)
一、監聽數據變化的三種形式
假設我們需要提供兩個輸入框，分別輸入姓和名，然后自動拼接為姓名。這樣，我們就需要監聽輸入框的數據變化，讓完整的姓名跟隨輸入的變動而變化。我們可以使用以下三種方式：
1、結合DOM事件使用mothod來監聽數據變化
html代碼：使用keyup事件來監聽數據的改變。
<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代碼：
new Vue({el: '#app',data: {firstname: '',lastname: '',fullname: ''},methods: {getFullname(){this.fullname = (this.firstname + ' ' + this.lastname).trim();return this.fullname;}} });2、使用watch偵聽器
類似methods的使用，我們可以在Vue實例中使用watch來監聽表達式數據的變化，并執行對應的回調函數。
html代碼：
<div id="app"><input type="text" v-model="firstname"><input type="text" v-model="lastname"><input type="text" v-model="fullname"> </div>js代碼：
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監聽器以要監聽的數據表達式作為鍵，值為處理數據變化后的函數。
3、使用計算屬性computed
直接看效果：
html代碼不變，注意js代碼：
new Vue({el: '#app',data: {firstname: '',lastname: ''},computed: {fullname: function(){return (this.firstname + ' ' + this.lastname).trim();}} });首先去掉了data中的fullname屬性，取而代之的是computed中的fullname屬性。計算屬性需要返回一個值作為屬性值，且能自動監聽內部依賴的變化，自動更新屬性值，并對值進行存儲，以供多次調用。
4、三者的區別
watch偵聽器更像是專門用于監聽數據變化的處理方法，但容易造成濫用，而methods一般用于處理業務邏輯，即相同的邏輯可以直接調用。計算屬性很直接，將需要的屬性進行計算處理后再進行調用。
二、webpack的簡單使用
1、靜態資源的處理
對于Web項目來說，包含各式各樣的靜態資源頁面，且格式種類繁多，如：
- js
- css
- image
- 模塊&組件
靜態資源多而雜的時候，頁面加載效率就低，且難以處理好資源之間的依賴關系。
所以我們需要對資源進行整合壓縮，對于小圖片來說還可以使用圖片精靈圖（image sprite）、轉碼為Base64字節碼等。
而依賴關系除了手動處理我們還可以使用一些工具。
而以上問題我們都可以使用webpack工具進行解決，如文件格式轉化、壓縮整合等。下面我們將結合Vue來使用webpack。
2、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/
3、加載非js文件
webpack默認只能加載js文件，如果是非js文件則需要使用第三方文件加載模塊。
比如我們在main.js導入我們寫的一個css文件main.css。
1、首要我們任意規定一個css樣式：
li{list-style-type: none; }2、然后需要在main.js中導入（這是webpack提供的特殊loader模式）：
import './main.css'3、現在我們只需要配置需要的第三方文件加載模塊即可
加載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']}]} }注意：這個加載順序很重要，如果模塊之間存在依賴或順序關系，則需要保證加載順序從后往前加載。
類似的文件加載是一樣的道理。
更多使用細節請參考官方文檔
轉載于:https://www.cnblogs.com/fzz9/p/10613621.html
總結
- 上一篇： zabbix_server 报警
- 下一篇： 用Vue的父子组件通信实现todolis