vue項目中遇到的一些問題

時間 2019-11-12

標籤 vue 項目遇到一些問題简体版

原文原文鏈接

或訪問：https://github.com/littleHiuman/experiences-about-vuecss

歡迎補充！html

vuex 狀態vue

vue-cli 命令行node

vue vuewebpack

vue-router 路由ios

es6git

eslintes6

Js寫法規範。github

eslint常見問題web

brace-style？

no-sequences？

block-spacing？

比較時，使用全等號

全部的switch語句都必需要有一個default分支

yoda：yoda條件語句就是對象字面量應該寫在比較操做符的左邊，而變量應該寫在比較操做符的右邊（默認的規則要求，變量寫在左邊而字面量寫在右邊）

個別符號以及關鍵字之間須要空格（好比function，逗號，大括號，運算符）

逗號在行尾出現/行首

不以新行開始的塊 { 前面要不要有空格

當即調用函數的寫法：

(function() {
　　// body 
}());

只能使用單引號

最後必須有一行空行，

不能有多餘空行

不能有多餘空格

空位/製表符距離爲2

能夠設置帶分號，不然js中不能帶分號。

"semi": [2, "always"]

不能定義了卻未使用的變量

alias中定義的簡稱只能用於js部分。

模塊必須有一個根元素

整個頁面有切換動畫，那麼頁面的根元素不能有其餘樣式影響

Vue實例中最後一個屬性末不須要加逗號

對象裏的最後一項，不須要加逗號

引入css文件：

1. index.html中引入，

2. <style></style>中引入，須要@import，

或者另一個<style src=""></style>

3. main.js中引入須要寫loader（inport/require）

require('!style-loader!css-loader!less-loader!./assets/css/common_m.less')

PS：在webpack中配置好了loader以後，不須要在引入文件時寫loader和文件後綴。

cssloader：

{
　　test: /\.css$/,
　　exclude: /node_modules/,
　　loader: "style-loader!css-loader",
},
{
　　test: /\.less$/,
　　exclud: /node_module/,
　　loader: "style-loader!css-loader!less-loader",
},

// <router-view></router-view>與寫的位置無關

path.join(__dirname,'..');

this.$set(this, '屬性', '值')

css scoped 僅本組件

對象能夠存圖片。使用require便可。

images: {
　　error: require('./toast-error.png'),
　　success: require('./toast-success.png'),
　　load: require('./toast-load.gif'),
　　waiting: require('./toast-hourglass.svg')
}

border。各屏幕分辨率不一樣出現的粗細問題。

公共部分。寫成組件。利用傳參改變樣式/內容。

Ajax。axios。

跨域問題的解決：1.服務器端協助配置。2.jsonp。3.devServer配置代理。

能用data數據解決的問題，不用方法解決。如取反。長度。是否空/false/true。（Vue是數據驅動而不是結構驅動）

v-bind:style src to ...

路由傳參。$route。

歷史記錄切換。router-link to/:to或者router.push()/router.replace()

#router.push(location) 導航到不一樣的 URL

// 聲明式
<router-link :to="...">

// 編程式
router.push(...)

// 字符串
router.push('home')

// 對象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 帶查詢參數，變成 /register?plan=private

router.push({ path: 'register', query: { plan: 'private' }})

#router.replace(location) 它不會向 history 添加新記錄，而是替換掉當前的 history 記錄。

// 聲明式
<router-link :to="..." replace>

// 編程式
router.replace(...)

#router.go(n) 在 history 記錄中向前或者後退多少步，相似 window.history.go(n) 值能夠正能夠負

#綜合使用

const router = new VueRouter({
　　routes: [
　　　　{
　　　　　　path: '/user/:userId',
　　　　　　name: 'user',
　　　　　　component: User
　　　　}
　　]
})

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

router.push({ name: 'user', params: { userId: 123 }})

這兩種方式都會把路由導航到 /user/123 路徑。

// 命名視圖

// https://router.vuejs.org/zh-cn/essentials/named-views.html

// https://jsfiddle.net/posva/6du90epg/

// 有時候想同時（同級）展現多個視圖，而不是嵌套展現，例如建立一個佈局，有 sidebar（側導航）和 main（主內容）兩個視圖，這個時候命名視圖就派上用場了。

// 你能夠在界面中擁有多個單獨命名的視圖，而不是隻有一個單獨的出口。若是 router-view 沒有設置名字，那麼默認爲 default。

<router-view class="view one"></router-view>

<router-view class="view two" name="a"></router-view>

<router-view class="view three" name="b"></router-view>

// 一個視圖使用一個組件渲染，所以對於同個路由，多個視圖就須要多個組件。確保正確使用 components 配置（帶上 s）：

const router = new VueRouter({
　　routes: [
　　　　{
　　　　　　path: '/',
　　　　　　components: {
　　　　　　　　default: Foo,
　　　　　　　　a: Bar,
　　　　　　　　b: Baz
　　　　　　}
　　　　}
　　]
})

重定向和別名

切換時清空歷史記錄。數據丟失。sessionStorage。

相對路徑。

append。concat。

渲染成某個標籤。tag

能夠在router-link內嵌套其餘內容。

類型都是Object

$route.params（一個 key/value 對象，包含了動態片斷和全匹配片斷，若是沒有路由參數，就是一個空對象。）

$route.query（一個 key/value 對象，表示 URL 查詢參數。例如，對於路徑 /foo?user=1，則有 $route.query.user == 1，若是沒有查詢參數，則是個空對象。）

<div>
    <router-link :to="{ name: 'Hello' , params: { userId: 123 }}">
        click1
    </router-link>
</div>

<div>
    <router-link :to="{ path: 'hello' , query: {show: 2}}">
        click2
    </router-link>
</div>

console.log(this.$route.params.userId)

console.log('top is params, bottom is query')

console.log(this.$route.query.show)

watch：

watch: {
　　'$route' (to, from) {
　　// 對路由變化做出響應...
　　}
}

v-show和v-if 。v-if爲假直接不渲染。v-show爲假display none。

當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級。

我的建議：外容器overflow hidden，內容器overflow scroll。

過渡效果：

<transition name="fade"></transition>

.fade-enter-active, .fade-leave-active {
　　-webkit-transition: opacity .7s;
　　transition: opacity .7s;
}

.fade-enter, .fade-leave-active {
　　opacity: 0
}

路由鉤子：判斷從哪一個路由過來，到哪一個路由。而後跳轉到哪一個路由。（全局鉤子。局部鉤子。）

component頁面內也能夠監聽路由。

滾動行爲。歷史記錄之間切換。頁面位置。返回對象。

scrollBehavior (to, from, savedPosition) {
　　return { x: 0, y: 0 }
}

錨點的實現。經過scrollTop。或滾動行爲。

路由元信息。路由嵌套。

懶加載。

四、在異步加載頁面中載嵌入異步加載的組件時對頁面是否會有渲染延時影響？

答：會，異步加載的組件將會比頁面中其餘元素滯後出現，頁面會有瞬間閃跳影響；

解決方案：由於在首次加載組件的時候會有加載時間，出現頁面滯後，因此須要合理的進行頁面結構設計，避免首次出現跳閃現象；

At all:

　　一、路由頁面以及路由頁面中的組件全都使用懶加載

　　優勢：（1）最大化的實現隨用隨載

　　　　　（2）團隊開發不會由於溝通問題形成資源的重複浪費　　　　

　　缺點：（1）當一個頁面中嵌套多個組件時將發送屢次的http請求，可能會形成網頁顯示過慢且渲染良莠不齊的問題

　　二、路由頁面使用懶加載，而路由頁面中的組件按需進行懶加載, 即若是組件不大且使用不太頻繁, 直接在路由頁面中導入組件, 若是組件使用較爲頻繁使用懶加載

　　優勢：（1）可以減小頁面中的http請求，頁面顯示效果好

　　缺點：（2）須要團隊事先交流，在框架中分別創建懶加載組件與非懶加載組件文件夾

　　三、路由頁面使用懶加載，在不特別影響首頁顯示延遲的狀況下，根頁面合理導入複用組件，再結合方案2

　　優勢：（1）合理解決首頁延遲顯示問題

　　　　　（2）可以最大化的減小http請求，且作其餘他路由界面的顯示效果最佳

　　缺點：（1）仍是須要團隊交流，創建合理區分各類加載方式的組件文件夾

export default new Router({
　　routes: [
　　　　{
　　　　　　path: '/',
　　　　　　component: resolve => require(['components/Hello.vue'], resolve)
　　　　},
　　　　{
　　　　　　path: '/about',
　　　　　　component: resolve => require(['components/About.vue'], resolve)
　　　　}
　　]
})

// solve：

// components/page

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。和 <transition> 類似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出如今父組件鏈中。

當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函數將會被對應執行。

主要用於保留組件狀態或避免從新渲染。

組件：

當註冊組件（或者 props）時，可使用 kebab-case ，camelCase ，或 TitleCase 。Vue 不關心這個。

// 在組件定義中
components: {

　　// 使用 kebab-case 形式註冊
　　'kebab-cased-component': { },

　　// register using camelCase
　　'camelCasedComponent': { },

　　// register using TitleCase
　　'TitleCasedComponent': { }
}

在 HTML 模版中，請使用 kebab-case 形式：

<!-- 在HTML模版中始終使用 kebab-case -->

<kebab-cased-component></kebab-cased-component>

<camel-cased-component></camel-cased-component>

<title-cased-component></title-cased-component>

當使用字符串模式時，能夠不受 HTML 的 case-insensitive 限制。

<!-- 在字符串模版中能夠用任何你喜歡的方式! -->

<my-component></my-component>

<myComponent></myComponent>

<MyComponent></MyComponent>

若是組件未經 slot 元素傳遞內容，你甚至能夠在組件名後使用 / 使其自閉合：

<my-component/>

固然，這隻在字符串模版中有效。由於自閉的自定義元素是無效的 HTML ，瀏覽器原生的解析器也沒法識別它。

component命名要求：

1. 檢查名稱是否與 HTML 元素或者 Vue 保留標籤重名，不區分大小寫。（經常使用HTML標籤）

2. 檢查組件名稱是否以字母開頭，後面跟字母、數值或下劃線。

使用 Virtual DOM 解析模板時，不會將模板中的標籤名轉成小寫，而是保留原始標籤名。而後，使用原始的標籤名進行匹配組件。

例如， <MyComponent></MyComponent> 不會轉爲爲小寫形式，直接以 MyComponent 爲基礎開始匹配。

固然，匹配的規則依次匹配：原標籤名、camelCase化的標籤名、PascalCase化的標籤名。

//以前在 1.0 不能正常運行的示例代碼，在 2.0 中能夠正常運行了：

Vue.component('MyComponent', {
　　template: '<div>hello, world</div>'
})

new Vue({
　　el: '#app',
　　template: '<MyComponent></MyComponent>'
})

在 Vue 1.0 和 2.0 中還有一種定義組件模板的方式，即便用 DOM 元素。在這種狀況下，解析模板時仍然會將標籤轉爲小寫形式。因此下面的代碼，在 1.0 和 2.0 均不能正常運行。

// index.html
<div id="app">
　　<MyComponent></MyComponent>
</div>

// main.js
Vue.component('MyComponent', {
　　template: '<div>hello, world</div>'
})

new Vue({
　　el: '#app'
})

因爲 JavaScript 的限制， Vue 不能檢測如下變更的數組：

當你利用索引直接設置一個項時，例如：

vm.items[indexOfItem] = newValue

當你修改數組的長度時，例如：

vm.items.length = newLength

爲了解決第一類問題，如下兩種方式均可以實現和 vm.items[indexOfItem] = newValue 相同的效果，同時也將觸發狀態更新：

// Vue.set

Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice`

example1.items.splice(indexOfItem, 1, newValue)

爲了解決第二類問題，你也一樣可使用 splice：

example1.items.splice(newLength)

父組件給子組件傳參，經過props屬性。還能夠定義類型

https://cn.vuejs.org/v2/guide/components.html#Prop-驗證

除了如下定義一種類型的寫法，還有多種類型，必傳且是某個類型，某個類型且有默認值，某個類型但默認值由一個工廠函數返回，或者是自定義

props: {
　　username: String,
}

// 全局註冊的組件的寫法：
props: ['myMessage'],

子組件給父組件傳參，經過this.$emit('方法', '內容')

vertical-align: top;

兩個span對齊 / 圖片和文字對齊 / inline-block元素 .......

字體圖標。

一行文字超出省略號：

white-space: nowrap
overflow: hidden
text-overflow: ellipsis

空白間隙去掉的方法：

font-size: 0;

// 或者 兩個標籤之間緊貼着。

filter相似濾鏡效果。模糊效果。

filter: blur(10px)

同上相似。模糊效果（僅對背景生效，僅限iOS系統）

backdrop-filter: blur(10px)

type，給參數 / 變量定義類型。

computed，內容變時會更新，不然會緩存起來。

若是是傳參等方式獲得值，須要判斷值是否爲空，不然會報值爲undefined的錯。

使用變量 / 產量拼接內容，而不使用字符串拼接內容。

各子元素不固定寬 / 高，可是整個佈局佔固定值時，flex佈局。儘可能用block元素。

flex的默認值爲0 1 auto

flex是放大比例（flex-grow）縮小比例（flex-shrink）佔據的空間（flex-basis）的簡寫屬性

能夠填auto（至關於 1 1 auto）和none（0 0 auto）

flex: 1（至關於 1 1 0%）

使用flex屬性後，該元素最好添加width屬性，值爲flex-basis定義的值。

vue項目中，不用寫CSS的兼容性代碼。

由於vue-loader在編譯.vue文件的時候，使用了Postcss的工具，它會給有兼容性問題的屬性添加兼容性代碼。

它是根據can i use官網寫的代碼。

寫在<style></style>內纔會生效。在html中添加style屬性是不會添加兼容性代碼的。

換行問題：

v-html能夠直接加<br>進行換行，v-model中無效

例外：textarea標籤使用v-model時，可使用\r進行換行

實現垂直居中的方式：

父元素： display: table，

子元素： display: table-cell;vertical-align: middle;
不管一行或多行。

刪除線效果 text-decoration: line-through

iScroll

ref的使用：

在父頁面調用子組件的標籤：

在父頁面中的組件上加ref。而後在子組件中的某個標籤加ref。便可。

nextTick

將回調延遲到下次 DOM 更新循環以後執行。

https://cn.vuejs.org/v2/api/#vm-nextTick

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // 修改數據
      this.message = 'changed'
      // DOM 尚未更新
      this.$nextTick(function () {
        // DOM 如今更新了
        // `this` 綁定到當前實例
        this.doSomethingElse()
      })
    }
  }
})

box-sizing: border-box

:disabled="type == '值'"

:class = name

name能夠是computed

$dispatch 和 $broadcast在vue2.0中已經棄用，推薦使用一個專用的狀態管理層如：Vuex 。

或者子組件和父組件之間相互傳參。

getBoundingClientRect用於獲取某個元素相對於視窗的位置集合。集合中有top, right, bottom, left等屬性。

點擊事件。取消冒泡。

v-on:click.stop="doThis"

阻止默認事件。

v-on:click.prevent="doThis"

https://cn.vuejs.org/v2/guide/events.html#事件修飾符

判斷頁面來源。

https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

組件內部的方法，命名建議以兩個下劃線開頭

外部傳參方法等，不用兩個下劃線開頭。

padding取%值，

> %，規定基於父元素的寬度的百分比的內邊距。

給按鈕加padding。方便點擊

或者整個部分能夠點擊。

過濾：filter

// 計算屬性
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

// 或者，你也能夠在計算屬性不適用的狀況下 (例如，在嵌套 v-for 循環中) 使用 method 方法：
<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

// -----------------
// 過濾器函數
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

// PS： 爲了在其餘指令中實現更復雜的數據變換，你應該使用計算屬性。

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

// 過濾器能夠串聯：
{{ message | filterA | filterB }}

// 過濾器是 JavaScript 函數，所以能夠接受參數：
{{ message | filterA('arg1', arg2) }}

// 這裏，字符串 'arg1' 將傳給過濾器做爲第二個參數， arg2 表達式的值將被求值而後傳給過濾器做爲第三個參數。