Vue.js和Webpack

時間  2019-11-12
標籤 vue.js vue webpack 欄目 JavaScript 简体版
原文   原文鏈接

Vue.js

Vue簡單介紹

是一個輕量級的漸進式框架，一個前端項目可使用使用Vue.js的一兩個特性也能夠整個項目都用Vue.js，很方便實現項目的增量開發css

Vue.js的使用：()html

在html頁面使用<script>引入Vue.js的庫便可使用前端

使用Npm(cnpm)管理依賴，使用Webpack打包工具對Vue.js應用打包vue

可使用Vue_Cli腳手架快速構建Vue.js工程基礎模版node

瞭解MVVM概念

瞭解了這個概念，有利於咱們學習Vue.js這個框架jquery

MVVM：拆分理解webpack

  • M：Model，負責數據的儲存ios

  • V：View，負責頁面的展現程序員

  • VM：View Model，負責業務邏輯的處理，好比Ajax請求等，對數據進行加工後交給視圖展現，就是Vue.js的功能區web

MVVM要解決的問題就是將業務邏輯代碼與視圖代碼進行徹底分離，使各自的職責更加的清晰，後期維護簡單

也就是將View和Model模型進行解耦合，中間的渲染和邏輯的判斷就交給Vue.js來完成

Vue入門認識：插值表達式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js的簡單入門程序</title> //導入Vue.js的庫 <script src="./vue/vue.min.js"></script>
</head>
<body>
    <div id="test1"> {{name}} //插值表達式獲取數據 </div>
</body>
<script>
    //實例化Vue對象
    var VM = new Vue({ //經過id標識，接管這個id所在的區域
 el:"#test1", //至關於MVVM中的model數據對象
 data:{ name:"挽起袖子的年輕人" } }); </script>
</html>

代碼編寫步驟：

  1. 定義html文件，引入Vue.js的庫

  2. 定義一個div, 給定一個標識id

  3. 建立vue實列，過el:"#標識id"，綁定這個div區域

  4. 定義model 數據對象

  5. VM完成在 綁定的這個div中的數據渲染

Vue.js幾大經常使用指令

在Vue對象中，如今有如下屬性：

  • el：經過標識id綁定<div>

  • data：Vue的數據對象，存放要渲染的數據

  • methods：方法集合，函數通常放在這裏面，勾子函數除外

下面的演示代碼中，我就貼出關鍵的部分代碼做爲演示

v-on：監聽dom事件，觸發相應js

  • v-on：click （點擊事件）

當咱們點擊button按鈕的時候，就會觸發fun1函數，fun1函數會將message從新賦值，結果表現爲頁面中經過插值表達式獲取數據的內容發生改變，改變爲："挽起袖子的年輕人"

  • v-on：keydown (鍵盤按下)

v-on：mouseover(鼠標移入事件)

有一個大的div,

註釋：<textarea> 是一個html的文本區域，該區域可容納多行乃至無限的文本，咱們爲其添加鼠標移入事件

防止冒泡：連個區域，小的區域寄存在一個大的區域上，若是兩個區域都綁定到有相同的事件，咱們觸發小區域的事件時，大區域也會被觸發，由於小區域在大區域之上，爲了效果叫作冒泡

 

v-text與v-html

  • 能夠發現，v-html會解析內容，若是內容裏有標籤，會以html的格式去解析，而v-text不會，原封不動的將數據渲染

  • v-text：能夠將一個變量的值渲染到指定的元素中，他能夠解決查詢表達式閃爍的問題

v-bind

  • 插值表達式不能做用在Html的特性上，遇到這種狀況應該使用 v-bind指令

  • 能夠將數據對象綁定在DOM的任意屬性中

  • 能夠實現動態的更新Html的多個屬性，好比動態綁定style和class

  • v-bind 簡寫爲不寫以下

    • <a v-bind:href="url">...</a>
<a :href="url">...</a>

　　

 

 這裏報紅不用管它，緣由不明，但不影響功能，應該是idea檢測的語法的鍋

v-model （雙向綁定）

  • 建立雙向綁定，只能在如下元素中使用： input、select、testarea、components(Vue的組件)

v-if和v-for

  • 結果界面

v-if和v-show

v-if在上面的列子中已經使用到了，我相信你們應該也知道了他的大概意思，就是根據表達式的值來決定是否渲染元素

v-show的話，就是根據表達式的值來切換元素的display css樣式（是否顯示）

在這個Demo中，v-if爲true，就會顯示元素我要去跑步了，下面的v-show也是true,就會顯示 「我必須的記着帶上個人運動手錶」

咱們的點擊事件的目標就是使得flag的布爾值發生轉變，這樣上面兩個都爲false的話一個不會渲染，一個不會顯示（即隱藏）

Vue的生命週期

理解

每個Vue，在被建立實列的時候，都會通過一系列的初始化過程，就是SpringMVC中各類配置的加載同樣，咱們能夠控制這些配置的是否加載，或者加載自定義配置等，思想都是同樣的，下面咱們就着手來了解一下！

初始化過程當中的會調用的勾子方法

  • Vue在被建立實列的時候，會調用這些勾子方法，咱們咱們自定義勾子方法會在建立Vue實列的過程當中被加載

  • 勾子方法依次加載的順序以下所示：

beforeCreate ：數據尚未監聽，沒有綁定到vue對象實例，同時也沒有掛載對象

created ：數據已經綁定到了對象實例，可是尚未掛載對象

beforeMount ：模板已經編譯好了，根據數據和模板已經生成了對應的元素對象，將數據對象關聯到了對象的 el屬性，el屬性是一個HTMLElement對象，也就是這個階段，vue實例經過原生的createElement等方法來創 建這個html片斷，準備注入到咱們vue實例指明的el屬性所對應的掛載點

mounted ：將el的內容掛載到了el，至關於咱們在jquery執行了(el).html(el),生成頁面上真正的dom，上面咱們 就會發現dom的元素和咱們el的元素是一致的。在此以後，咱們可以用方法來獲取到el元素下的dom對象，並 進 行各類操做

beforeUpdate ：當咱們的data發生改變時，會調用beforeUpdate，數據更新到dom以前，咱們能夠看到$el對象已經修改，可是咱們頁面上dom的數據還 沒有發生改變

updated ：當咱們的data發生改變時，會調用updated ，dom結構會經過虛擬dom的原則，找到須要更新頁面dom結構的最小路徑，將改變動新到dom上面，完成更新

beforeDestroy ：實例的銷燬，vue實例仍是存在的，只是解綁了事件的監聽還有watcher對象數據與view的綁定，即數據驅動

destroyed ：實例的銷燬，vue實例仍是存在的，只是解綁了事件的監聽還有watcher對象數據與view的綁定，即數據驅動

  • 下面咱們以一個列子來串一下上面說羅列的全部勾子方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js的簡單入門程序</title>
    <!--導入Vue.js的庫-->
    <script src="../vue.min.js"></script>
</head>
<body>
    <div id="app"> {{message}} </div>
    <script>
        var vm = new Vue({ el: "#app", data: { message: '所有的勾子方法測試' }, beforeCreate: function() { console.log(this); showData('建立vue實例前', this); }, created: function() { showData('建立vue實例後', this); }, beforeMount: function() { showData('掛載到dom前', this); }, mounted: function() { showData('掛載到dom後', this); }, beforeUpdate: function() { showData('數據變化更新前', this); }, updated: function() { showData('數據變化更新後', this); }, beforeDestroy: function() { vm.test = "3333"; showData('vue實例銷燬前', this); }, destroyed: function() { showData('vue實例銷燬後', this); } }); function realDom() { console.log('真實dom結構：' + document.getElementById('app').innerHTML); } function showData(process, obj) { console.log(process); console.log('data 數據：' + obj.message) console.log('掛載的對象：') console.log(obj.$el) realDom(); console.log('------------------') console.log('------------------') } vm.message="good..."; vm.$destroy(); </script>
</body>
</html>

  • 而後咱們可使用瀏覽器進行查看相應的數據 F12

  • 我這裏就舉兩三個列子出來說解一下，詳細的須要下去仔細學習

   

...詳細信息觀察本地的瀏覽器的調試窗口

VueJs發起請求之Ajax

在Vue2.0以前，都是使用原始Ajax發起請求，也就是XMLHttpRequest或者JSONP發起web請求和處理響應的結果，但在Vue2.0版本後便推出了axios最爲一個發起請求的工具，代替了以前的vue-resource

axios介紹

Axios是一個HTTP庫，可用於在瀏覽器node.js中

想要使用axios有兩種方法，一種是安裝axios模塊，一種是直接引入相關的js便可

固然咱們推薦使用第二種，簡單方便

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

RestFul請求之Get請求

RestFul請求之Post請求

更多的就不演示了，好比put請求呀，delete請求呀都是支持的

webpack入門到入墳

入門的簡單介紹

當咱們開發大型應用須要使用webpack打包工具，他能夠將js，image，css等靜態資源當成一個模塊進行打包

　　

優點：

模塊化開發

  • 前端程序員們在開發師能夠分模塊建立不一樣的js,css等小文件，最後使用webpark將這些小文件愛你打包成一個文件，減小http的請求次數

  • webpark能夠實現按需打包，爲了不單個打包文件過大的問題，咱們能夠打成多個文件

編譯typescript、ES6等高級js語法

  • 在開發中可能會遇到不少的js的高級語法，爲了兼容，webpark能夠將打包文件轉換成瀏覽器可識別的js語法

CSS預編譯

  • webpark容許在開發中使用Ssaa(不瞭解)，Less(不明白)的擴展技術，經過wepark能夠預編譯成瀏覽器可識別的css語法

劣勢

配置較爲繁瑣

文檔不夠豐富

webpack的安裝

安裝Node.js

Node.js不屬於前端，在前端看來這應該是屬於後端的東西，他是一個js的運行環境，是一個運行在服務端的框架，由於他可使用js去編寫一些服務的程序，能夠用來開發服務端服務，這樣先後端就都是JavaScript了，至於爲何沒有推廣開來，多是Java太龐大，太完善了吧，畢竟是世界上最好的語言，你說是否是？

Node.js移步百度，這裏不作說明

　　

安裝NPM /CNPM

NPM：它是node包管理和分發工具，使用NPM能夠對對應的依賴進行管理，你能夠把它當作項目構建工具Maven差很少，咱們經過NPM能夠很方便的下載js庫、打包js文件（這他媽不就是maven嗎？）

node.js已經集成了NPM工具，咱們能夠經過命令查看版本：

　　

設置包路徑

包路徑就是NPM從遠端下載的js包的存放路徑，這裏有兩個概念須要說明

NPM默認的包路徑是在：C:\用戶\用戶名\AppData\Roaming\npm\node_modules

爲了便於管理，咱們從新設置到單獨的地方，咱們就設置在node.js的目錄下吧，

咱們在node.js的安裝目錄，建立兩個空文件夾：npm_modules、npm_cache順便敲開cmd黑窗口

鍵入指令，指定目錄便可：

  • npm config set prefix "C:\MyFrame\node\npm_modules"

  • npm config set cache "C:\MyFrame\node\npm_cache"

安裝CNPM

由於NPM的下載源是在國外，下載支持會很操蛋，因此通常咱們都是使用的國內的鏡像，咱們使用淘寶鏡像

全局安裝nrm

  • cnpm install -g nrm

查看說指定的鏡像： nrm ls

　　

能夠看到，那個雪花指向的是淘寶（好像不用指，安裝了以後自動指向？這個環境我安裝好久了）

若是沒有指向的話 使用： nrm use XXX切換 鏡像

安裝webpack

webpack的安裝分爲本地安裝和全局安裝

  • 本地安裝：將webpack安裝在當前項目的node_modules目錄便可，對當前項目有效

  • 全局安裝：安裝到本機，對全部機器有效

本地安裝（未測試）

在項目下建立一個目錄，並進入到該目錄，敲開cmd黑窗口

npm install --save-dev webpack 或 cnpm install --save-dev webpack

npm install --save-dev webpack-cli (4.0之後的版本須要安裝webpack-cli)

全局安裝（未成功，查詢不到版本信息，我認爲沒裝成功）

cnpm install webpack -g

或者指定版本：cnpm install webpack@3.6.0 -g

最快的方式：

連接：https://pan.baidu.com/s/1lSUYJQM8t-Z07sNsUiJxeg 提取碼：94w2

把它下載下來拖到node.js安裝目錄下：就是咱們建立npm_modules的路徑將其解壓，他會覆蓋咱們建立的文件夾

而後配置環境變量，指向webpack 終結

第一個webpack小程序

首先咱們建立一個webpackTest目錄，咱們將Vue.js的庫和一個咱們上面寫的vue_test2.html拷入其中

  1. 定義model1.js

    在webpackTest目錄下建立model1.js文件

    這個文件用於儲存本程序須要使用的函數方法，單獨抽取出來，此文件就是一個模塊

    function add(x,y) { return x + y; } ​ /*導出add函數*/ module.exports.add = add; ​ //當有多個方法須要導出時這樣導出 //modele.exports = {add,add2};

  2. 定義main.js [ 固定文件名，打包須要使用 ]

    • 在main.js文件中引入儲存函數的modul1.js

    • 引入Vue.js的庫：vue.min.js

    • 將html頁面中構建的Vue實列的代碼存放到main.js中

    var {add} = require('./model01'); var Vue = require('./vue/vue.min'); var Vm = new Vue({ el:"#test2", data:{ name:"挽起袖子的年輕人:", url:"https://www.cnblogs.com/msi-chen/", value1:"0", value2:"0", result:"0" }, methods: { change: function () { //調用model1.js的add函數，完成運算
             this.result = add(Number.parseInt(this.value1) + Number.parseInt(this.value2)); alert(this.result) } } } )

  3. 打包測試：

    使用webpack打包工具，對這些js文件進行打包

    進入到webpackTest目錄，cmd敲開黑窗口執行：webpack main.js build.js

    這個指令的意思就是將main.js打包成build.js

    執行以後，咱們的目錄中會出現一個build,js文件

  4. 在html頁面中引用build.js

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js的簡單入門程序</title>
    <!--導入Vue.js的庫-->
    <script src="./vue/vue.min.js"></script>
</head>
<body>
    <div id="test2">
        <!--{{name}}<br/> : 解決閃爍問題使用 v-test 標籤-->
        <!--v-bind:能夠將數據對象綁定到DOM的任意屬性之中-->
        <!--v-bind: 能夠給DOM對象綁定多個數值，支持動態綁定style和class-->
        <a v-bind:href="url"><span v-text="name"></span></a>
        <!--v-model 雙向綁定 DOM和model互相影響-->
        <input type="test" v-model="value1"> + <input type="test" v-model="value2"> = <input type="test" v-model="result">

        <!--v-on:clock 綁定單機事件 click可換其餘的事件-->
        <button v-on:click="change">點擊計算</button>
    </div>
</body>
<script src="./build.js"></script>
</html>

  5. 測試：自行測試，是能夠完整調用函數的

　　　　

webpack-dev-server

目錄準備：

  • webpack-dev-server開發服務器，他的功能就是但是顯示熱加載，並且自動刷新瀏覽器

  • 建立一個新的目錄：複製上面的webpackTest目錄，所有數據拷貝過來

  • 在webpackTest2目錄下建立 src、dist目錄，將main.js和model1.js拷進src目錄

安裝webpack-dev-server

  • 進入打webpackTest2目錄，cmd敲開黑窗口，鍵入命令：安裝三個包

  • cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

  • 安裝完成後，會發現目錄下多出了一個package.json文件

在package.json文件中配置srcipt

{ "devDependencies": { "html-webpack-plugin": "^2.30.1", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" }, "scripts":{ "dev":"webpack-dev-server --inline --hot --open --port 5008" } }

devDependencies：暫時不用理會，開發人員在開發中的所須要的依賴

scripts：可執行的命令，就是咱們的配置的數據

  • --inline：自動刷新

  • --hot：熱加載

  • --open：自動在默認瀏覽器打開

  • --port：指定端口

  • --host：能夠指定服務的ip,不指定默認本地，若是對外發布填寫公網ip

配置webpack.config.js

在webpackTest2目錄下建立webpack.config.js文件，這個文件時webpack的配置文件，在此文件中能夠配置應用的入口文件，插件等，其中要實現熱加載自動刷新功能須要配置html-webpack-plugin插件

html-webpack-plugin插件的做用就是根據html模版在內存生成html,他的工做原理是根據模板文件愛呢在內存中生成一個index.html

配置模版文件：

  • 將vue_test2.html做爲模版文件，爲了和和內存中index.html文件相區分，咱們將<script>標籤去掉，如：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>webpack_dev-server</title>
</head>
<body>
   <div id="test2">
       <!--{{name}}<br/> : 解決閃爍問題使用 v-test 標籤-->
       <!--v-bind:能夠將數據對象綁定到DOM的任意屬性之中-->
       <!--v-bind: 能夠給DOM對象綁定多個數值，支持動態綁定style和class-->
       <a v-bind:href="url"><span v-text="name"></span></a>
       <!--v-model 雙向綁定 DOM和model互相影響-->
       <input type="test" v-model="value1"> + <input type="test" v-model="value2"> = <input type="test" v-model="result"> ​ <!--v-on:clock 綁定單機事件 click可換其餘的事件-->
       <button v-on:click="change">點擊計算</button>
   </div>
</body>
</html>

在webpack.config.js中配置html-webpack-plugin插件

var htmlwp = require('html-webpack-plugin'); module.exports={ entry:'./src/main.js',                //指定打包的入口文件
 output:{ path:__dirname+'/dist',            //__dirname表示當前項目絕對路徑，輸出到dist目錄中
     filename:'build.js'                //輸出文件
 }, plugins:[ //插件集
     new htmlwp({                    //建立上面的插件對象實列
         title:'首頁',                //生成的index.html頭信息
         filename:'index.html',      //在內存中生成的文件名稱，自動將build注入到這個頁面底部，才能實現自動刷新功能
         template:'vue_test2.html'   //根據index1.html這個模板來生成(前端工程師自定義模版)
 }) ] }

而後咱們右鍵package.json：show npm Scripts

 

運行完畢後後自動打開咱們默認的瀏覽器，咱們就能夠進行運算了

可是這裏好像除了一點小問題，不打緊，咱們看看函數怎麼回事？

好像沒看出什麼問題，也沒有報錯啥的，不清楚，不明白，咱也不敢問？

不出點錯，怎麼引入下面的dubug調試環節呢，你說是否是？

dubug調試

  • 使用了webpack以後就不能在用傳統的js的在chrome中打斷點的方式進行調試了

  • webpack將多個源文件打成一個文件，文件內容發生了很大的變化。webpack提供devTool進行調試

配置以下：

1.在webpack.config.js中配置

var htmlwp = require('html-webpack-plugin'); module.exports={ entry:'./src/main.js', output:{ path:__dirname+'/dist', filename:'build.js' }, devtool:'eval-source-map',　　//dubug調試配置 plugins:[ new htmlwp({ title:'首頁', filename:'index.html', template:'vue_test2.html' }) ] }

2.在js中跟蹤代碼的位置上添加debugger

function add(x,y) { debugger
    return x + y } /*導出add函數*/ module.exports.add = add; //當有多個方法須要導出時這樣導出 //modele.exports = {add,add2};

再次點擊觸發函數：

 

 

發現bug後修正

複製有風險啊，我只入參一個，用了+鏈接，參數輸入有問題，修正後再次測試步入正軌 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程