Vue2 學習筆記5

時間 2019-11-12

標籤 vue2 vue 學習筆記简体版

原文原文鏈接

`watch`屬性的使用

考慮一個問題：想要實現 名 和 姓 兩個文本框的內容改變，則全名的文本框中的值也跟着改變；（用之前的知識如何實現？？？）html

監聽data中屬性的改變：

<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen',
        fullName: 'jack - chen'
      },
      methods: {},
      watch: {
        'firstName': function (newVal, oldVal) { // 第一個參數是新數據，第二個參數是舊數據
          this.fullName = newVal + ' - ' + this.lastName;
        },
        'lastName': function (newVal, oldVal) {
          this.fullName = this.firstName + ' - ' + newVal;
        }
      }
    });
  </script>

監聽路由對象的改變：

<div id="app">
    <router-link to="/login">登陸</router-link>
    <router-link to="/register">註冊</router-link>

    <router-view></router-view>
  </div>

  <script>
    var login = Vue.extend({
      template: '<h1>登陸組件</h1>'
    });

    var register = Vue.extend({
      template: '<h1>註冊組件</h1>'
    });
    
    var router = new VueRouter({
      routes: [
        { path: "/login", component: login },
        { path: "/register", component: register }
      ]
    });
    
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: router,
      watch: {
        '$route': function (newVal, oldVal) {
          if (newVal.path === '/login') {
            console.log('這是登陸組件');
          }
        }
      }
    });
  </script>

`computed`計算屬性的使用

默認只有getter的計算屬性：

<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {},
      computed: { // 計算屬性； 特色：當計算屬性中因此來的任何一個 data 屬性改變以後，都會從新觸發 本計算屬性 的從新計算，從而更新 fullName 的值
        fullName() {
          return this.firstName + ' - ' + this.lastName;
        }
      }
    });
  </script>

定義有getter和setter的計算屬性：

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <!-- 點擊按鈕從新爲 計算屬性 fullName 賦值 -->
    <input type="button" value="修改fullName" @click="changeName">

    <span>{{fullName}}</span>
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {
        changeName() {
          this.fullName = 'TOM - chen2';
        }
      },
      computed: {
        fullName: {
          get: function () {
            return this.firstName + ' - ' + this.lastName;
          },
          set: function (newVal) {
            var parts = newVal.split(' - ');
            this.firstName = parts[0];
            this.lastName = parts[1];
          }
        }
      }
    });
  </script>

`watch`、`computed`和`methods`之間的對比

computed屬性的結果會被緩存，除非依賴的響應式屬性變化纔會從新計算。主要看成屬性來使用；
methods方法表示一個具體的操做，主要書寫業務邏輯；
watch一個對象，鍵是須要觀察的表達式，值是對應回調函數。主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操做；能夠看做是computed和methods的結合體；

`nrm`的安裝使用

做用：提供了一些最經常使用的NPM包鏡像地址，可以讓咱們快速的切換安裝包時候的服務器地址；
什麼是鏡像：原來包剛一開始是隻存在於國外的NPM服務器，可是因爲網絡緣由，常常訪問不到，這時候，咱們能夠在國內，建立一個和官網徹底同樣的NPM服務器，只不過，數據都是從人家那裏拿過來的，除此以外，使用方式徹底同樣；前端

運行npm i nrm -g全局安裝nrm包；
使用nrm ls查看當前全部可用的鏡像源地址以及當前所使用的鏡像源地址；
使用nrm use npm或nrm use taobao切換不一樣的鏡像源地址；

Webpack

在網頁中會引用哪些常見的靜態資源？

JS
.js .jsx .coffee .ts（TypeScript 類 C# 語言）
CSS
.css .less .sass .scss
Images
.jpg .png .gif .bmp .svg
字體文件（Fonts）
.svg .ttf .eot .woff .woff2
模板文件
.ejs .jade .vue【這是在webpack中定義組件的方式，推薦這麼用】

網頁中引入的靜態資源多了之後有什麼問題？？？

網頁加載速度慢，由於咱們要發起不少的二次請求；
要處理錯綜複雜的依賴關係

如何解決上述兩個問題

合併、壓縮、精靈圖、圖片的Base64編碼
可使用以前學過的requireJS、也可使用webpack能夠解決各個包之間的複雜依賴關係；

什麼是webpack?

webpack 是前端的一個項目構建工具，它是基於 Node.js 開發出來的一個前端工具；vue

如何完美實現上述的2種解決方案

使用Gulp，是基於 task 任務的；
使用Webpack，是基於整個項目進行構建的；

藉助於webpack這個前端自動化構建工具，能夠完美實現資源的合併、打包、壓縮、混淆等諸多功能。
根據官網的圖片介紹webpack打包的過程
webpack官網

webpack安裝的兩種方式

運行npm i webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令
在項目根目錄中運行npm i webpack --save-dev安裝到項目依賴中

初步使用webpack打包構建列表隔行變色案例

運行npm init初始化項目，使用npm管理項目中的依賴包
建立項目基本的目錄結構
使用cnpm i jquery --save安裝jquery類庫
建立main.js並書寫各行變色的代碼邏輯：

// 導入jquery類庫
    import $ from 'jquery'

    // 設置偶數行背景色，索引從0開始，0是偶數
    $('#list li:even').css('backgroundColor','lightblue');
    // 設置奇數行背景色
    $('#list li:odd').css('backgroundColor','pink');

直接在頁面上引用main.js會報錯，由於瀏覽器不認識import這種高級的JS語法，須要使用webpack進行處理，webpack默認會把這種高級的語法轉換爲低級的瀏覽器能識別的語法；
運行webpack 入口文件路徑輸出文件路徑對main.js進行處理：

webpack src/js/main.js dist/bundle.js

使用webpack的配置文件簡化打包時候的命令

在項目根目錄中建立webpack.config.js
因爲運行webpack命令的時候，webpack須要指定入口文件和輸出文件的路徑，因此，咱們須要在webpack.config.js中配置這兩個路徑：

// 導入處理路徑的模塊
    var path = require('path');

    // 導出一個配置對象，未來webpack在啓動的時候，會默認來查找webpack.config.js，並讀取這個文件中導出的配置對象，來進行打包處理
    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
        output: { // 配置輸出選項
            path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
            filename: 'bundle.js' // 配置輸出的文件名
        }
    }

實現webpack的實時打包構建

因爲每次從新修改代碼以後，都須要手動運行webpack打包的命令，比較麻煩，因此使用webpack-dev-server來實現代碼實時打包編譯，當修改代碼以後，會自動進行打包構建。
運行cnpm i webpack-dev-server --save-dev安裝到開發依賴
安裝完成以後，在命令行直接運行webpack-dev-server來進行打包，發現報錯，此時須要藉助於package.json文件中的指令，來進行運行webpack-dev-server命令，在scripts節點下新增"dev": "webpack-dev-server"指令，發現能夠進行實時打包，可是dist目錄下並無生成bundle.js文件，這是由於webpack-dev-server將打包好的文件放在了內存中

把bundle.js放在內存中的好處是：因爲須要實時打包編譯，因此放在內存中速度會很是快
這個時候訪問webpack-dev-server啓動的http://localhost:8080/網站，發現是一個文件夾的面板，須要點擊到src目錄下，才能打開咱們的index首頁，此時引用不到bundle.js文件，須要修改index.html中script的src屬性爲:<script src="../bundle.js"></script>
爲了能在訪問http://localhost:8080/的時候直接訪問到index首頁，可使用--contentBase src指令來修改dev指令，指定啓動的根目錄：

"dev": "webpack-dev-server --contentBase src"

同時修改index頁面中script的src屬性爲<script src="bundle.js"></script>node

使用`html-webpack-plugin`插件配置啓動頁面

因爲使用--contentBase指令的過程比較繁瑣，須要指定啓動的目錄，同時還須要修改index.html中script標籤的src屬性，因此推薦你們使用html-webpack-plugin插件配置啓動頁面.jquery

運行cnpm i html-webpack-plugin --save-dev安裝到開發依賴
修改webpack.config.js配置文件以下：

// 導入處理路徑的模塊
    var path = require('path');
    // 導入自動生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
        output: { // 配置輸出選項
            path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
            filename: 'bundle.js' // 配置輸出的文件名
        },
        plugins:[ // 添加plugins節點配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路徑
                filename:'index.html'//自動生成的HTML文件的名稱
            })
        ]
    }

修改package.json中script節點中的dev指令以下：

"dev": "webpack-dev-server"

將index.html中script標籤註釋掉，由於html-webpack-plugin插件會自動把bundle.js注入到index.html頁面中！

實現自動打開瀏覽器、熱更新和配置瀏覽器的默認端口號

注意：熱更新在JS中表現的不明顯，能夠從一下子要講到的CSS身上進行介紹說明！webpack

方式1：

修改package.json的script節點以下，其中--open表示自動打開瀏覽器，--port 4321表示打開的端口號爲4321，--hot表示啓用瀏覽器熱更新：

"dev": "webpack-dev-server --hot --port 4321 --open"

方式2：

修改webpack.config.js文件，新增devServer節點以下：

devServer:{
        hot:true,
        open:true,
        port:4321
    }

在頭部引入webpack模塊：

var webpack = require('webpack');

在plugins節點下新增：

new webpack.HotModuleReplacementPlugin()

使用webpack打包css文件

運行cnpm i style-loader css-loader --save-dev
修改webpack.config.js這個配置文件：

module: { // 用來配置第三方loader模塊的
        rules: [ // 文件的匹配規則
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//處理css文件的規則
        ]
    }

注意：use表示使用哪些模塊來處理test所匹配到的文件；use中相關loader模塊的調用順序是從後向前調用的；

使用webpack打包less文件

運行cnpm i less-loader less -D
修改webpack.config.js這個配置文件：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

使用webpack打包sass文件

運行cnpm i sass-loader node-sass --save-dev
在webpack.config.js中添加處理sass文件的loader模塊：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack處理css中的路徑

運行cnpm i url-loader file-loader --save-dev
在webpack.config.js中添加處理url路徑的loader模塊：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

能夠經過limit指定進行base64編碼的圖片大小；只有小於指定字節（byte）的圖片纔會進行base64編碼：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

使用babel處理高級JS語法

運行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安裝babel的相關loader包
運行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安裝babel轉換的語法
在webpack.config.js中添加相關loader模塊，其中須要注意的是，必定要把node_modules文件夾添加到排除項：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

在項目根目錄中添加.babelrc文件，並修改這個配置文件以下：

{
    "presets":["es2015", "stage-0"],
    "plugins":["transform-runtime"]
}

注意：語法插件babel-preset-es2015能夠更新爲babel-preset-env，它包含了全部的ES相關的語法；

babel-preset-env：你須要的惟一Babel插件
 Runtime transform 運行時編譯es6git

相關標籤/搜索

每日一句

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