Vue(day5)
一、監(jiān)聽(tīng)數(shù)據(jù)變化的三種形式
假設(shè)我們需要提供兩個(gè)輸入框，分別輸入姓和名，然后自動(dòng)拼接為姓名。這樣，我們就需要監(jiān)聽(tīng)輸入框的數(shù)據(jù)變化，讓完整的姓名跟隨輸入的變動(dòng)而變化。我們可以使用以下三種方式：
1、結(jié)合DOM事件使用mothod來(lái)監(jiān)聽(tīng)數(shù)據(jù)變化
html代碼：使用keyup事件來(lái)監(jiān)聽(tīng)數(shù)據(jù)的改變。
<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偵聽(tīng)器
類似methods的使用，我們可以在Vue實(shí)例中使用watch來(lái)監(jiān)聽(tīng)表達(dá)式數(shù)據(jù)的變化，并執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù)。
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();}} });可以發(fā)現(xiàn)，watch監(jiān)聽(tīng)器以要監(jiān)聽(tīng)的數(shù)據(jù)表達(dá)式作為鍵，值為處理數(shù)據(jù)變化后的函數(shù)。
3、使用計(jì)算屬性computed
直接看效果：
html代碼不變，注意js代碼：
new Vue({el: '#app',data: {firstname: '',lastname: ''},computed: {fullname: function(){return (this.firstname + ' ' + this.lastname).trim();}} });首先去掉了data中的fullname屬性，取而代之的是computed中的fullname屬性。計(jì)算屬性需要返回一個(gè)值作為屬性值，且能自動(dòng)監(jiān)聽(tīng)內(nèi)部依賴的變化，自動(dòng)更新屬性值，并對(duì)值進(jìn)行存儲(chǔ)，以供多次調(diào)用。
4、三者的區(qū)別
watch偵聽(tīng)器更像是專門(mén)用于監(jiān)聽(tīng)數(shù)據(jù)變化的處理方法，但容易造成濫用，而methods一般用于處理業(yè)務(wù)邏輯，即相同的邏輯可以直接調(diào)用。計(jì)算屬性很直接，將需要的屬性進(jìn)行計(jì)算處理后再進(jìn)行調(diào)用。
二、webpack的簡(jiǎn)單使用
1、靜態(tài)資源的處理
對(duì)于Web項(xiàng)目來(lái)說(shuō)，包含各式各樣的靜態(tài)資源頁(yè)面，且格式種類繁多，如：
- js
- css
- image
- 模塊&組件
靜態(tài)資源多而雜的時(shí)候，頁(yè)面加載效率就低，且難以處理好資源之間的依賴關(guān)系。
所以我們需要對(duì)資源進(jìn)行整合壓縮，對(duì)于小圖片來(lái)說(shuō)還可以使用圖片精靈圖（image sprite）、轉(zhuǎn)碼為Base64字節(jié)碼等。
而依賴關(guān)系除了手動(dòng)處理我們還可以使用一些工具。
而以上問(wèn)題我們都可以使用webpack工具進(jìn)行解決，如文件格式轉(zhuǎn)化、壓縮整合等。下面我們將結(jié)合Vue來(lái)使用webpack。
2、webpack的配置
場(chǎng)景
請(qǐng)看以下場(chǎng)景：
我們?cè)贜ode中使用jquery來(lái)改變表格的樣式，其中，我們還使用了大多瀏覽器不支持的es6語(yǔ)法：
<!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語(yǔ)法：等價(jià)于const $ = require('jquery');$(function(){$('#tab > thead').css({backgroundColor: '#bdccc2'});$('#tab > tbody > tr:even').css({backgroundColor: '#c1f1cd'});$('#tab > tbody > tr:odd').css({backgroundColor: '#f3ffab'}); });這樣，當(dāng)我們直接訪問(wèn)這個(gè)頁(yè)面時(shí)就會(huì)報(bào)錯(cuò)。現(xiàn)在我們使用webpack對(duì)mian.js進(jìn)行打包處理，并保存到新的目錄文件中，如: \dist\bundle.js
在使用之前，我們需要先安裝webpack。
安裝
# 全局安裝 npm install webpack -g # 本地開(kāi)發(fā)環(huán)境安裝 npm install webpack --save-dev # 4.0以上版本還需要安裝 npm install --save-dev webpack-cli打包
使用命令行工具執(zhí)行：
webpack ./src/mian.js -o ./dist/bundle.js然后main.js就會(huì)被打包成新的bundle.js文件，我們?cè)陧?yè)面中引用這個(gè)js，就可以看到j(luò)query做出的樣式效果：
我們發(fā)現(xiàn)，webpack為我們做了以下幾點(diǎn)：
- 打包壓縮js文件（main.js）
- 自動(dòng)處理包之間的依賴（jqurey）
改進(jìn)：配置文件
我們發(fā)現(xiàn)每次都需要在命令行填寫(xiě)輸入輸出文件路徑實(shí)在是太麻煩了，且容易出錯(cuò)。所以webpack提供了一個(gè)讀取默認(rèn)名為webpack.config.js配置文件的功能。在該配置文件中我們可以配置諸多信息，其中就包括文件的入口和出口。
現(xiàn)在，我們?cè)陧?xiàng)目的更目錄下新建一個(gè)名為webpack.config.js的文件。
//webpack是基于node的，所以配置文件其實(shí)就是一個(gè)js導(dǎo)出的對(duì)象 var path = require('path');module.exports = {//入口entry: path.join(__dirname, '/src/main.js'),//出口output: {path: path.join(__dirname, '/dist'),filename: 'bundle.js'} }這樣，我們就可以直接使用webpack命令進(jìn)行打包了。可能我們還不滿足于手動(dòng)加載的方式，就像nodemon一樣，我們希望當(dāng)我們作出變動(dòng)時(shí)就能及時(shí)打包響應(yīng)，這樣我們需要另外安裝一個(gè)模塊：webpack-dev-server。
再改進(jìn)：使用webpack-dev-server熱加載
安裝
# 安裝(注意，依賴本地webpack) npm install web-dev-server --save-dev使用
在package.json的scripts中配置一下就能使用了：
# 配置到package.json "dev": "webpack-dev-server" # 命令行啟動(dòng) npm run dev細(xì)節(jié)問(wèn)題
現(xiàn)在我們需要通過(guò)http://localhost:8080來(lái)訪問(wèn)頁(yè)面。此時(shí)如果我們修改并保存main.js，會(huì)自動(dòng)執(zhí)行打包動(dòng)作，但我們頁(yè)面卻沒(méi)有發(fā)生變化，這是因?yàn)?strong>自動(dòng)編譯的出口目錄并不是原來(lái)那個(gè)文件，且不在物理磁盤(pán)，而在內(nèi)存中。默認(rèn)的路徑為根路徑，所以/bundle.js才能訪問(wèn)到自動(dòng)打包的文件。
更多的配置
我們可以修改命令或者在webpack.config.js中增加配置來(lái)修改一些默認(rèn)選項(xiàng)。
使用命令：
# --open 自動(dòng)打開(kāi)瀏覽器訪問(wèn)根目錄 # --contentBase ./src 設(shè)置訪問(wèn)的根目錄為src目錄 # --hot 啟用熱加載 webpack-dev-server --open --contentBase ./src --hot使用配置文件也能達(dá)到一樣的效果
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 //注意，這樣配置還不夠，因?yàn)闊岣滦枰褂玫絯ebpack自帶的一個(gè)插件：模塊熱替換插件},plugins: [new webpack.HotModuleReplacementPlugin()//啟用模塊熱替換插件] }
更多關(guān)于webpack-dev-server請(qǐng)參考https://www.webpackjs.com/configuration/dev-server/
3、加載非js文件
webpack默認(rèn)只能加載js文件，如果是非js文件則需要使用第三方文件加載模塊。
比如我們?cè)趍ain.js導(dǎo)入我們寫(xiě)的一個(gè)css文件main.css。
1、首要我們?nèi)我庖?guī)定一個(gè)css樣式：
li{list-style-type: none; }2、然后需要在main.js中導(dǎo)入（這是webpack提供的特殊loader模式）：
import './main.css'3、現(xiàn)在我們只需要配置需要的第三方文件加載模塊即可
加載css文件需要兩個(gè)模塊：style-loader和css-loader.
npm install style-loader css-loader --dev修改配置文件，增加配置選項(xiàng)：
module.exports = {module: {//第三方模塊的引用rules: [//匹配規(guī)則 test使用正則表達(dá)式來(lái)匹配loader的文件類型 use是使用的模塊：從后往前加載{test: /\.css$/, use: ['style-loader', 'css-loader']}]} }注意：這個(gè)加載順序很重要，如果模塊之間存在依賴或順序關(guān)系，則需要保證加載順序從后往前加載。
類似的文件加載是一樣的道理。
更多使用細(xì)節(jié)請(qǐng)參考官方文檔
轉(zhuǎn)載于:https://www.cnblogs.com/fzz9/p/10613621.html
總結(jié)
- 上一篇： zabbix_server 报警
- 下一篇： php.ini配置