vue學習總結

桃小仙發表於2019-04-12
Vue

作為一個切圖兩年的前端小白，在學習vue的過程中簡直是開啟了新世界的大門，一串串的問號在腦中浮現，藉此記錄下我的學習之路，也開啟我的第一篇文章！

開始

前提是已經安裝了node、npm環境

安裝vue-cli 3.0

npm install -g @vue/cli
複製程式碼

根據遠端preset建立專案

vue create --preset cklwblove/vue-preset my-project
複製程式碼

（這個模板是我們小組的專案模板，省去了很多的配置問題，有自己模板的可按照自己的規則來，或者直接自己建立專案 vue create my-project）

本地預覽

cd my-project && yarn run serve
複製程式碼

執行

npm run serve
複製程式碼

樣式

宣告式渲染

相對於靜態頁面所有的資料都寫死，Vue.js的核心是資料的動態渲染，所以要轉換思想，採用簡潔的模板語法來宣告式地將資料渲染進DOM的系統：

  • 最常用的方式：Mustache(插值語法)，也就是 {{}} 語法
  • 解釋：{{}}從資料物件data中獲取資料
  • 說明：資料物件的屬性值發生了改變，插值處的內容都-會更新
  • 說明：{{}}中只能出現JavaScript表示式 而不能解析js語句
  • 注意：Mustache 語法不能作用在 HTML 元素的屬性上
<h2>{{title}}</h2>

data() {
    return {
      title: "標題"
    };
  }
複製程式碼

注意：需要資料繫結的變數，都需要定義

指令

指令是帶有v-字首的特殊屬性，當表示式的值改變時，將其產生的連帶影響，響應式地作用於DOM

常用的有v-text v-model v-html v-bind v-on，具體的用法我就不寫了，戳官網咖

樣式命名

使用小駝峰命名，每個頁面完成後格式化，保持程式碼樣式的整潔性，其他的樣式編寫按照模板的規定來即可（這是我做模板demo時的小細節，沒有模板的朋友按照自己的風格來）

圖片載入

vue中的本地圖片路徑放到data中要加require

data(){
    return{
	 dataList:[
	    {
	       	 image: require("../../assets/img/slide1.png")
	     }
	  ]
      }
   }
複製程式碼

axios

這次的主要難點是資料介面這塊

安裝axios

npm install axios
複製程式碼

在main.js中配置

import axios from ‘axios’
Vue.prototype.$axios = axios;
複製程式碼

模板中需在public資料夾config.local.js 中配置主域名

window.LOCAL_CONFIG = {
  API_HOME: 'https://api.github.com/',
}
複製程式碼

在service資料夾下REATFULLRURL.js中配置配置主域名後面的地址

export default {
  "octocat": "users/octocat",
}
複製程式碼

注意：在元件中執行請求時，axios需要用方法包含起來

methods:{
	getData(){
	    this.$axios.get('url')
		.then(res => {})
		.catch(err => {})
	   }
       }
複製程式碼

元件

元件系統是Vue的另一個重要概念，允許我們使用小型、獨立和通常可複用的元件構建大型應用。

  • 建立元件的兩種方式：全域性元件、區域性元件

全域性元件

全域性元件在所有的vue例項中都可以使用，在這次的demo中自己建立了一個全域性的元件

  • 在components資料夾下建立新的元件TabBar，在App.vue引入所需的元件
<template>
  <div id="app">
    <div class="pages">
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <TabBar/>
  </div>
</template>
複製程式碼
import { TabBar } from "@components";

components: {
    TabBar
  }
複製程式碼

注意：元件名需要統一

在這裡會出現一個bug，在移動端應用裡，為了便於程式碼組織，通常我們要將元件放在各個路由的 .vue 檔案裡，但是因為此時元件並不在 body 下，加上定位，overflowscrolling 設定等原因，會出現遮罩在彈層之上，z-index 失效等問題。

因此我們要在元件上使用 v-transfer-dom 實現自動移動到 body 下，解決以上問題。

比如我在頁面同時引入了picker元件和TabBar元件，底部的TabBar把picker彈框給遮住了，解決方法在picker元件上使用v-transfer-dom

<div class="memberList" v-show="show" v-transfer-dom>
      <group-title class="listTitle">
        <div>請選擇場地</div>
        <div @click="pageInquire">完成</div>
      </group-title>
      <picker :data="venusItem" v-model="venusMsg"></picker>
    </div>
複製程式碼

區域性元件

區域性元件，是在某一個具體的vue例項中定義的，只能在這個vue例項中使用

UI框架引用

在專案過程中，難免會用到框架，在選擇框架的時候要先看社群生態和維護是怎麼樣的，更新是否及時，解決問題的速度，是否支援專案中安裝的vue-cli版本，否則會有bug解決不了，比如vux的坑我就掉進去出不來了

引用框架，比如vant

安裝vant

npm i vant -S
複製程式碼

按需引入元件

import Button from 'vant/lib/button';
components: { button }
複製程式碼

swiper引用

在這次引用swiper庫的過程中遇到了一個問題，當 loop:true的時候，第一頁往前翻的那一頁，以及最後一頁往後翻的那一頁點選跳轉無效（即dom繫結事件無法生效）。

當 loop設定 為true的時候，點選事件不能繫結在dom上，有很多的坑需要注意，在此附上我老大關於這個問題的解決方法：segmentfault.com/a/119000001…

以上是我做demo的一些小記錄，有自己的模板，所以很多是按照模板的配置要求來，用法不同的可看官網

相關文章