vue小知識點總結

 

一：插件

1:better-scroll 插件實現左右輪播滾動

2:vue-lazyload 插件實現圖片懶加載

3:實現移動端自適應:

方案一

3.1: postcss 插件引到項目裏 功能：把你本身寫的代碼px轉化爲rem（對於引入的外部插件，不作單位轉化)

3.2：main.js 中引入一段js代碼，設置html標籤中的font-size大小

window.onresize = setHtmlFontSize function setHtmlFontSize () { const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth const htmlDom = document.getElementsByTagName('html')[0] htmlDom.style.fontSize = htmlWidth / 10 + 'px' } setHtmlFontSize()

方案二：（vuecli3腳手架爲例）

步驟一： 安裝 lib-flexible

npm install lib-flexible --save

步驟二：  在main.js中引入lib-flexible

import 'lib-flexible/flexible.js'  (設置html標籤中的font-size大小)

步驟二： 安裝px2rem-loader (使用px2rem-loader自動將css中的 px 轉換成 rem)

 npm install px2rem-loader --save-dev

步驟四： vue.config.js 裏面添加配置

chainWebpack: config => {

config.module

.rule("css")

.oneOf("vue")

.use("px2rem-loader")

.loader("px2rem-loader")

.before("postcss-loader") // this makes it work.

.options({ remUnit: 75 })

.end();

config.module

.rule("less")

.oneOf("vue")

.use("px2rem-loader")

.loader("px2rem-loader")

.before("postcss-loader") // this makes it work.

.options({ remUnit: 75 })

.end();

}

4：vue-resource插件相似於axios插件

5:main.js中全局引入mint ui框架，頁面裏面隨便使用該框架的組件

6:Vue頁面中，<script></script>代碼中註釋文字用 // 而不是 <!-- --> 這種格式  <template></template>模板中用 <!-- --> 註釋

7: template模板裏面  v-show/v-if=’item’,js 裏面 if（item）{} else{}:   item 取值null ,'',undefined,NaN, 返回爲false 若返回true 表示 item 取值爲：!0,   !null, !'', !undfined, !NaN, 空對象，空數組( !1  !2   !5  (等)返回 false)

8: vue-cli2:  vue init webapck 項目名稱，按照這個方式建立的項目，此時 引入less，只須要 npm install less less-loader --save 便可，不須要再手動配置爲webpack ,引入方式 

9：vue 項目引入juqery插件，App.vue 中使用 $ 會報錯，其餘vue頁面中沒問題   vue 項目中快捷鍵 <sc 以後 enter 鍵 ，整個vue項目大體結構就出來了 

10: <!-- indeterminate(不肯定性) 取值爲true ,表示選中項個數 >1 && < 總長度 ,取值爲false，表示全選或者全不選-->

2:樣式文件

vue頁面樣式文件引入方式以下:

1.1: <style lang='scss/less’>　　@important '~@/assets/scss/homr.scss/less'; (;很重要，必定要加上)</style>

1.2: <style lang='less' src='./xx.less'></style> (src必定要按照相對路徑的方式引入)

1.3: 外部scss樣式文件中引入圖片，以下：

a{background-image:url('~@/assets/images/cat.png');}

1.4: js裏面引入圖片用 rquire(),以下:require('../../assets/images/cat.png');

舒適提示：參考mint ui框架的demo(mint-ui-master),能夠更快上手該框架哦！

word-break : 設置自動換行的處理方法

1.5: 父組件scoped 屬性添加之後， 父組件內的樣式 不會 影響子組件， 父組件樣式裏面 某個元類名 添加 /deep/ 深度做用選擇器之後， 子組件裏面該類名也會起做用