Vue.js學習筆記六
事件監聽
使用keyup進行文本框的監聽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
</head>
<body>
<div id="app">
<!-- 分析: -->
<!-- 1. 咱們要監聽到 文本框數據的改變，這樣才能知道 何時去拼接出一個fullname -->
<!-- 2. 如何監聽到文本框數據的改變？? -->
<input type="text" v-model="firstname" @keyup="getFullname"> +
<input type="text" v-model="lastname" @keyup="getFullname"> =
<input type="text" v-model="fullname">
</div>
<script> var vm = new Vue({ el: '#app', data() { return { firstname: '', lastname: '', fullname: '' } }, methods: { getFullname() { this.fullname = this.firstname + '-' + this.lastname } } }); </script>
</body>
</html>
複製代碼
使用watch屬性來進行監聽Vue實例中的數據改變
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname"> +
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname">
</div>
<script> var vm = new Vue({ el: '#app', data() { return { firstname: '', lastname: '', fullname: '' } }, methods: { getFullname() { this.fullname = this.firstname + '-' + this.lastname } }, watch: {//使用這個屬性，能夠監視data中指定數據的變化，而後出發這個watch中對應function處理函數 firstname(newVal, oldVal){ // console.log("監視到了firstname的變化") this.getFullname() // console.log(newVal + '-----' + oldVal) }, lastname(){ this.getFullname() } }, }); </script>
</body>
</html>
複製代碼
使用 watch 能夠監聽路由的改變
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<!-- 1. 安裝vue-router路由模塊 -->
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<router-link to="login">登錄</router-link>
<router-link to="register">註冊</router-link>
<router-view></router-view>
</div>
<script> let login = { template:'<h1>這是登陸組件</h1>' } let register = { template:'<h1>這是註冊組件</h1>' } const router = new VueRouter({ routes:[ {path:'/', component:login}, {path:'/login', component:login}, {path:'/register', component:register}, ] }) var vm=new Vue({ el:'#app', data () { return{ } }, methods:{ }, router, watch: { // this.$router.path '$route.path'(newVal, oldVal){ // console.log(newVal + '-----' + oldVal) if(newVal == '/login'){ console.log("歡迎進入登陸頁面") }else if(newVal == '/register'){ console.log("歡迎進入註冊頁面") } } }, }); </script>
</body>
</html>
複製代碼
使用computed計算屬性來監聽數據的值
計算屬性：在computer中，能夠定義一些屬性，這些屬性，叫作【計算屬性】，計算屬性的本質就是一個方法，只不過咱們在使用這些計算屬性的時候，是把他們的名稱直接當作屬性來使用的，並不會把計算屬性當作方法來使用 javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname"> +
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname">
<p>{{fullname}}</p>
<p>{{fullname}}</p>
<p>{{fullname}}</p>
</div>
<script> var vm = new Vue({ el: '#app', data() { return { firstname: '', lastname: '', } }, methods: { }, computed: { 'fullname'(){ console.log('ok') return this.firstname + '-' + this.lastname } }, }); </script>
</body>
</html>
複製代碼
computed使用的一些注意事項
- 計算屬性在引用的時候必定不要加（）去調用，直接把它當作普通屬性去使用就行了
- 只要計算屬性這個function內部，所用到的任何data中的數據發生了變化，就會當即從新計算這個屬性的值
- 計算屬性的求值結果會被緩存起來，方便下次直接使用，若是計算屬性方法中所依賴的任何數據都沒有發生過變化，則不會從新對計算屬性求值
watch、computed和methods之間的對比
computed屬性的結果或被緩存，除非依賴的響應式屬性變化纔會從新計算。主要當作屬性來使用methods方法表示一個具體的操做，主要書寫業務邏輯watch一個對象，鍵是須要觀察表達式，值是對應回調函數。主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操做；能夠看做是computed與methods的結合體；
nrm的安裝使用
做用：提供了一些最經常使用的NPM包鏡像地址，可以讓咱們快速的切換安裝包時候的服務器地址； 什麼是鏡像：原來包剛一開始只是存在於國外的NPM服務器，可是因爲網絡緣由，常常訪問不到，這時候，咱們能夠再國內，建立一個和官網徹底同樣的NPM服務器，只不過，數據都是從人家那裏拿過來的，除此這外，使用方式徹底同樣。css
- 運行
npm i nrm -g全局安裝nrm包 - 使用
nrm ls查看當前全部可用的鏡像源地址以及當前所使用的鏡像源地址 - 使用
nrm use npm或nrm user taobao切換不一樣的鏡像源地址
注意：nrm只是單純的提供了幾個經常使用的下載包URL地址，而且可以讓咱們在這幾個地址之間，很方便的切換，可是，咱們每次安裝包的時候，使用的裝包工具，都是npmhtml
Vue.js-Webpack
在網頁中會引用哪些常見的靜態資源？
- JS
- .js .jsx .coffee .ts(TypeScript)
- 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是前端的一個項目構建工具一前端
如何完美實現上述的2種解決方案
- 使用Gulp,基於
task任務的。 - 使用Webpack,是基於整個項目進行構建的。
- 藉助於Webpack這個前端自動化構建工具，能夠完美實現資源的合併、打包、壓縮、混淆等諸多功能。
- 根據官網的圖片介紹Webpack打包的過程
- Webpack官網
Webpack安裝的兩種方式
- 運行
npm i webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令 - 在項目根目錄中運行
npm i webpack --save-dev安裝到項目依賴中
使用webpack
- 首先咱們須要在目錄中建立 一個main.js的項目入口文件，index.html中使用到的全部包和css樣式到在這導入
// 這是main.js是咱們項目的js入口文件
//1.導入Jquery
//import *** from *** 是ES6中導入模塊的方式
//因爲ES6的語法過高級了，瀏覽器解析不了，因此這一行執行會報錯
import $ from 'jquery'
$(function(){
$('li:odd').css('backgroundColor', 'yellow')
$('li:even').css('backgroundColor', function(){
return '#' + 'D97634'
})
})
複製代碼
- 須要在建立一個webpack.config.js的配置對象，也能夠在根目錄下的終端中使用（webpack 要打包的文件的路徑 打包好的輸出文件的路徑）命令
const path = require('path')
//這個配置文件，其實就是一個JS文件，經過Node中的模塊操做，向外暴露了一個配置對象
module.exports = {
//在配置文件中，須要手動指定入口和出口
entry: path.join(__dirname, './src/main.js'),//入口，表示要使用webpack打包哪一個文件
output:{
path:path.join(__dirname, './dist'), //指定打包好的文件，輸出到哪一個目錄中去
filename:'bundle.js' //這是指定輸出的文件的名稱
}
}
複製代碼
當咱們在控制檯，直接輸入webpack命令執行的時候，webpack作了如下幾步：
- 首先，webpack 發現咱們並無經過命令的形式，給它指定入口和出口
- webpack就會去項目的根目錄中，查找一個叫作
webpack.config.js的配置文件 - 當找到配置文件以後，webpack就會去解析執行配置文件，當解析執行完配置文件後，就獲得了配置文件中導出的配置對象
- 當webpack拿到了配置對象後，就拿到了配置對象中，指定的入口和出口，而後進行打包構建
使用webpack-dev-server工具
由於咱們在編寫代碼並保存以後，想要看到效果的話還須要在終端輸入webpack來運行項目，每次都須要執行這種操做，顯得太麻煩了，因此咱們使用webpack-dev-server來進行自動的打包編譯vue
- 首先咱們須要運行
npm i webpack-dev-server -D，把這個工具安裝到項目的本地開發依賴 - 而後咱們須要在
package.json配置項的scripts中進行添加"dev":"webpack-dev-server"配置項 - 以後咱們在終端中輸入
npm run dev命令來開啓這個webpack-dev-server工具 - 最後咱們須要把index導入的原文件進行修改
<!-- <script src="../dist/bundle.js"></script> -->
<script src="/bundle.js"></script>
複製代碼
- 注意
- 安裝完畢後，這個工具的用法，和webpack命令的用法，徹底同樣
- 因爲咱們是在項目中本地安裝的webpack-dev-server，因此沒法把它看成腳本命令，在pawershell終端中直接運行（只有那些安裝到全局-g的工具，才能在終端中正常運行）
- webpack-dev-server這個工具，若是想要正常運行，要求，在本地項目中必須本地安裝webpack
- webpack-dev-server 幫咱們打包生成的bundle.js文件，並無存放到實際的物理磁盤上；而是直接託管到了電腦的內存中，因此咱們在項目根目錄，根本找不到這個打包好的bundle.js
- 咱們能夠認爲，webpack-dev-server把打包好的文件，以一種虛擬的形式，託管到了咋們項目的根目錄中，雖然咱們看不到它，可是，能夠認爲， 和idst src node_modules 平級，有一個看不見的文件，叫作bundle.js
webpack-dev-server在配置項中添加配置參數
- --open：實現調用
npm run dev後直接打開網頁，不須要咱們手動去打開 - --port xxx：能夠修改打開網頁的端口
- --contentBase src：能夠用改打開後的默認頁面，這裏設置爲scr目錄下的index.html
- --hot：熱加載，能夠實現局部更新代碼，瀏覽器不須要刷新，內容改變
使用html-webpack-plugin插件配置啓動頁面
因爲使用--contentBase指令的過程比較繁瑣，須要指定啓動的目錄，同時還須要修改index.html中script標籤的src屬性，因此推薦使用html-webpack-plugin插件配置啓動頁面。java
- 運行
npm i html-webpack-plugin --save-dev安裝到開發依賴 - 修改
webpack.config.js配置文件以下：
//導入處理路徑的模塊
const path = require('path')
//導入自動生成HTML文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, './src/main.js'),//項目入口文件
output: {//配置輸出項
path: path.join(__dirname, './dist'), //配置輸出的路徑
filename: 'bundle.js' //配置輸出的文件名
},
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頁面中
webpack打包第三方樣式文件
使用webpack打包css文件
- 運行
npm 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文件
- 運行
npm i less-loader less -D - 修改
webpack.config.js這個配置文件
{test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']}
複製代碼
使用webpack打包sass文件
- 運行
npm i sass-loader node-sass --save-dev - 在
webpack.config.js中添加處理sass文件的loader模塊：
{test: /\.sass$/, use:['style-loader', 'css-loader', 'sass-loader']}
複製代碼
webpack處理的第三方文件類型的過程
- 發現這個要處理的文件不是JS文件，而後就去配置文件中，查找有沒有對應的第三方loader規則
- 若是能找到對應的規則，就會調用對應的loader處理這種文件類型；
- 在調用loader的時候，是從後往前調用的；
- 當最後的一個loader調用完畢，會把處理的結果，直接交給webpack進行打包合併，最終輸出到bundle.js中去
相關文章
- 1. Vue.js學習筆記
- 2. vue.js學習筆記
- 3. vue.js 學習筆記
- 4. Vue.js 學習筆記
- 5. vue.js+element ui學習筆記
- 6. vue.js學習筆記（一）
- 7. Vue.js 源碼學習筆記
- 8. vue.js學習筆記-10
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Vue.js學習筆記
- 2. vue.js學習筆記
- 3. vue.js 學習筆記
- 4. Vue.js 學習筆記
- 5. vue.js+element ui學習筆記
- 6. vue.js學習筆記（一）
- 7. Vue.js 源碼學習筆記
- 8. vue.js學習筆記-10