我遇到的小白問題

愛吃叉燒發表於2018-07-15

因為是第一次搞前端專案,所以遇到了很多小白問題,這裡我將它記錄下來,希望大佬們輕噴。


Element.ui

基礎佈局

在基礎佈局Layout中,<el-col>一行的寬度是span="24",分出更多的列是在這24中分成12+12,8+8+8等


Vuex


Vue-router

路由引數

  1. 動態路徑引數,使用$router.params定義的引數是在路由路徑中表示,例如:/user/:id,通過$router.params.id獲取
  2. 使用查詢字串形式,路徑類似/path?key=value,使用$router.query.key的方式獲取查詢字串的引數
  3. 在Vue-router的定義中包含meta,例如下面展示,可以通過$router.meta.引數獲得具體常量值
{
    path: 'tree',
    name: 'Tree',
    component: () => import('@/views/tree/index'),
    meta: { title: 'Tree', icon: 'tree' }
}
複製程式碼

Vue 生命週期

created

created應該是一個函式(function) 已完成以下的配置:資料觀測 (data observer),屬性和方法的運算,watch/event 事件回撥。然而,掛載階段還沒開始,$el 屬性目前不可見。(所以,可以從伺服器請求資料了)

mounted

el掛載到例項上後呼叫

beforeDestroy

例項銷燬前呼叫,一般用於解綁adEventListener監聽的事件


Vue元件

陣列更新方法

Vue 包含一組觀察陣列的變異方法,所以它們也將會觸發檢視更新。這些方法如下:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

由於 JavaScript 的限制,Vue 不能檢測以下變動的陣列:

  • 當你利用索引直接設定一個項時,例如:vm.items[indexOfItem] = newValue
  • 當你修改陣列的長度時,例如:vm.items.length = newLength

元件建立和註冊

// 1.建立元件
let myComponent = Vue.extend({
	template: '<div>Some Component</div>'
}); 
// 2.註冊元件
Vue.component('my-component', myComponent);
複製程式碼

在Vue.extend()引數傳入的是選項物件,自己建立的元件需要包含在Vue例項掛載的元素範圍內。在Vue.component()註冊的元件是全域性的,可以在任意Vue例項範圍內使用。
區域性註冊如下:

 var myComponent = Vue.extend({
      template: '<div>This is my first component!</div>'
})
        
new Vue({
     el: '#app',
     components: {
      // 2. 將myComponent元件註冊到Vue例項下
           'my-component' : myComponent
     }
});
複製程式碼

因為html是大小寫不敏感的,所以元件名稱不要寫為大寫。
Vue.js規定:在定義元件的選項時,data和el選項必須使用函式。

父元件和子元件通訊

在父元件中使用子元件時,通過以下語法將資料傳遞給子元件:

<child-component v-bind:子元件prop="父元件資料屬性"></child-component>
複製程式碼

其中在父模板中屬性名要使用中劃線寫法,比如以下的父模板:

var parentNode = {
  template: `
  <div class="parent">
    <child my-message="aaa"></child>
    <child my-message="bbb"></child>
  </div>`,
  components: {
    'child': childNode
  }
};
複製程式碼

子模板的程式碼如下:

var childNode = {
  template: '<div>{{myMessage}}</div>',
  props:['myMessage']
}
複製程式碼

v-ref

$children


Vue.js常用指令

  • v-if
  • v-show
  • v-for
  • v-bind
  • v-on
  • v-else

v-for

v-for中,可以使用$index來獲取v-for迴圈到第幾個了,從0開始計數

<ul>
    <li v-for="item in items">
         {{item}}
         <button v-on:click="printIndex($index)">Index</button>
    </li>
</ul>
複製程式碼

v-show

在不滿足條件時,使用v-show的指令會被新增css的style="display: none;"

v-else

必須跟在v-show或者v-if後面

v-bind

將這個元素繫結一個HTML元素特性,這個繫結行為是需要表示式運算後得的

標準形式: v-bind:argument="expression"
例如:<a href="#" v-bind:class="2>1?'ss':''"></a>
複製程式碼

執行後因為2>1,則html為

<a href="#" class="ss"></a>
複製程式碼

v-on

監聽DOM事件,標準形式和v-bind差不多

v-bind和v-on縮寫

v-bind縮寫為一個冒號,v-on縮寫為@符號

<!--完整語法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--縮寫語法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>

<!--完整語法-->
<button v-on:click="greet">Greet</button>
<!--縮寫語法-->
<button @click="greet">Greet</button>
複製程式碼

v-bind:is動態元件

<!-- 元件會在 `currentTabComponent` 改變時改變 -->
<component v-bind:is="currentTabComponent"></component>
複製程式碼

ES6語法問題

正規表示式

在 JavaScript中,正規表示式也是物件。這些模式被用於 RegExp 的 exec 和 test 方法, 以及 String 的 match、replace、search 和 split 方法

Promise

Promise物件是一個建構函式,用來生成Promise例項,其中接收一個函式作為引數

//1. 原型
const promise = new Promise(一個函式)
//2. 具體
const promise = new Promise(function(resolve, reject) {
	//這裡執行具體的非同步操作
    //Some Code
    if (非同步操作成功) {
    	resolve(value);
    } else {
    	reject(error);
    }
複製程式碼

在這個if語句之前promise的狀態都是pending,然後執行resolve時變為resolved,說明非同步操作成功。而操作失敗呼叫reject,promise的狀態由pending變為rejected。
可以通過then來分別指定reject和resolve函式

//1. 傳入指定函式
promise.then(resolve, reject); //reject函式是可選的
//2. 匿名函式
promise.then(function(value) {
	//這個函式是非同步操作成功時呼叫的resolve函式
    // some code
 }, function(error) {
    //非同步操作失敗時呼叫的reject函式
    // some code
 };
複製程式碼

promise是之前用Promise建構函式生成的。


在使用then之後,會返回一個新的Promise例項,這時當前then返回的值會作為下一個then的resolve函式的引數
//1.不包括對錯誤的處理行數reject
promise.then(function(value) {
	return someValue;
}).then(function(value) { //這時的value就是之前的someValue
	//some code
});
//2.包括reject函式處理
promise.then(
	function(value) { // resolve
    	return someValue;
    }				  //reject省略
).then(
	function(value) { //resolve
    	//some code
    },
    function(error) { //reject
    	//some code
    }
);
複製程式碼

只要是Promise就能在裡面執行非同步操作,Promise就相當於非同步操作的容器
catch函式是then(null, rejection)別名,Promise的錯誤具有冒泡性,會一直往下傳遞,知道被catch捕獲

Concise Properties(物件字面量擴充套件)

當物件屬性和語法識別符號相同時,可以被簡寫。

  var x = 2, y = 3;
  var o = {
      x: x,
      y: y
  }
複製程式碼

下面的程式碼段和上面的相同

  var x = 2, y = 3;
  var o = {
      x,
      y
  }
複製程式碼

箭頭表示式

基礎語法

  1. (引數1,...,引數N) => {函式體}
  2. 單一引數 => {函式體}

例子:

> var a = b => {return b+1;}
> a(3)
4
複製程式碼

這個函式a就是以b為引數將b加一後返回。參考

高階函式

函式閉包

function add(a) {
    return function(b) {
        return a + b
    }
}

var add3 = add(3)
add3(4) === 3 + 4 //true
複製程式碼

相當於在ES6中寫法為多個箭頭符號:

let add = a => b => a + b
複製程式碼

定義類

注意,定義“類”的方法的時候,前面不需要加上function這個關鍵字,直接把函式定義放進去了就可以了。另外,方法之間不需要逗號分隔,加了會報錯。

//定義類
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
複製程式碼

在類內定義函式

var SomeObject = {
	[AFunc]:function(){
		return 123;
    }
}
//使用
> SomeObject[AFunc]()
123
複製程式碼

這樣有一個物件叫SomeObject,有一個方法叫AFunc

CSS

inherit關鍵字

某個屬性將這個關鍵字作為值,則屬性會繼承父類的屬性

span
{
color: blue;
}

.extra span
{
color: inherit;
}
複製程式碼

選擇最後一個子元素

:last-child選擇權

p:last-child
{ 
	background:#ff0000;
}
複製程式碼

等同於:nth-last-child(1)

p:nth-last-child(1)
{ 
background:#ff0000;
}
複製程式碼

p:nth-last-child(2)選擇倒數第二個

變數作用域

function square(num) {
 total = num * num;
 return total;
}
var total = 50;
var number = square(20);
alert(total);
複製程式碼

在這裡因為函式square裡的total沒有用var來宣告,則會改變total的值,在定義一個函式時,我們一定要把它內部的變數全部明確宣告為區域性變數

DOM 選擇器

  • getElementsByTagName:可以使用萬用字元,網頁中所有元素都會被返回在返回陣列中document.getElementByTagName("*")
  • getElementsByClassName:使用這個方法可以查詢帶有多個類名的元素document.getElementsByClassName("import sale")

在HTML5提供了強大的原生類CSS選擇器querySelectorquerySelectorAll

document.querySelector("div.test>p:first-child");
document.querySelectorAll("div.test>p:first-child")[0];
複製程式碼

通過obj.setAttribute("屬性")設定的屬性不會改變網頁原始碼,因為DOM的工作模式:先載入文件靜態內容,再動態重新整理,動態重新整理不影響文件的靜態內容。DOM能夠對頁面內容進行改變(重新整理)卻不需要在瀏覽器裡重新整理頁面

nodeType屬性

通過元素.childNodes獲得元素的所有子元素,這其中不單單包括<p>這種,還包括屬性節點和文字節點,他們的nodeType不同。

  • 元素節點nodeType屬性值為1
  • 屬性節點nodeType屬性值為2
  • 文字節點nodeType屬性值為3

如果JS檔案或者程式碼在HTML文件的<head><script>中定義呼叫的,他會在HTML文件之前被載入到瀏覽器,此時沒有完整的DOM就不能進行DOM選擇。需要在元素全部載入後再執行,即window.onload事件中定義回撥函式。

阻止預設事件行為

阻止a標籤click後跳轉到連結

<a id="ss" onclick="fff(this); return false;" href="127.0.0.1">Link!</a>
複製程式碼

html5 history api

使用 back(), forward() 和 go() 方法來完成在使用者歷史記錄中向後和向前的跳轉。

window.history.back()
複製程式碼

HTML5引入了 history.pushState() 和 history.replaceState() 方法,它們分別可以新增和修改歷史記錄條目。這些方法通常與window.onpopstate 配合使用。猜測路由的原理是history.pushState然後觸發window.onpopstate事件,然後重新渲染相關區域性頁面,還有攔截<a>預設的跳轉操作(Todo:還需要了解Vuex原始碼)

Math.ceil Math.floor Math.round

Math.ceil是向上取整, Math.floor是向下取整,Math.round是四捨五入。

> var a = 14/47
> var a = a*100
> a
29.78723404255319
> Math.ceil(a)
30
> Math.round(a)
30
> Math.floor(a)
29
複製程式碼

javascript繼承

比如一個建構函式SS

function SS() {
    this.name = "ss"
}
複製程式碼

一個父類建構函式DD

function DD() {
    this.ddd = "ff"
}
複製程式碼

那麼如果需要SS構造出來的物件能夠繼承DD中的方法和屬性,就需要prototype指定DD函式建立出來的物件

>SS.prototype = new DD()
>var ss = new SS()
>ss.ddd
ff
複製程式碼

小細節

setTimeout和setInternval

在使用完後必須呼叫clearInterval和clearTimeout來清除定時器。在HTML5規範中規定定時器的定時時間不能小於4ms,如果是小於4ms,則預設為4ms,所以在這個例子中的0,預設的是4ms。定時器計時的執行緒和js引擎執行執行緒不一樣,當計時器到時會被加入js引擎執行執行緒的事件佇列等待執行, 所以計時到時後,不是等到你回撥函式執行完才開始再次計時,而是加入事件佇列後就開始在計時執行緒裡計時了參考

json支援的型別

型別 描述
數字型(Number) JavaScript 中的雙精度浮點型格式
字串型(String) 雙引號包裹的 Unicode 字元和反斜槓轉義字元
布林型(Boolean) true 或 false
陣列(Array) 有序的值序列
值(Value) 可以是字串,數字,true 或 false,null 等等
物件(Object) 無序的鍵:值對集合
空格(Whitespace) 可用於任意符號對之間
null

後端

flask-cros解決跨域問題

安裝flask-cros

from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)
複製程式碼

post得到bad request ,http code 400

這是因為我在前端用axios中設定為json型別傳送請求,所以在後端POST的表單來接收就是錯誤的,因為傳送到後端的http頭部資訊中Accept: application/json,所以在POST的處理函式用需要使用request.get_json()

@app.route('/detail', methods=["POST"])
def get_event_detail():
    data = request.get_json()
複製程式碼

mysql資料庫配置

對於mysql,預設配置/etc/mysql/my.conf中是bind-address = 127.0.0.1,所以如果需要遠端訪問mysql需要改為存放mysql伺服器的IP地址。可以通過執行下面語句來檢視,如果沒修改前mysql只會監聽來自本機的IP地址

> netstat -an | grep 3306
複製程式碼

同時需要修改遠端訪問使用者的許可權,比如使用者snort,密碼snort,資料庫snort。需要執行下面的命令

grant all privileges on snort.* to snort@'%' identified by "snort";
複製程式碼

mysql資料庫使用

選擇語句中新增distinct去除重複的結果

select distinct ip_dst from iphdr;
複製程式碼

自然連線:只考慮那些在兩個關係模式中都出現的屬性上取值相同的元素對。

使用between表示某個值在一個範圍內

select name from instructor where salary between 9000 and 10000;
複製程式碼

獲取從n開始m條記錄:

select * from table_name limit n, m; -- n是開始位置,m是偏移量,可以實現分頁
複製程式碼

集合操作

SQL在關係上的操作union、intersect、except分別對應數學集合論中的並集、交集、差運算

git配置代理

使用socks5代理,埠是1080,地址是127.0.0.1

git config --global http.proxy socks5://127.0.0.1:1080 
git config --global https.proxy socks5://127.0.0.1:1080 
複製程式碼

檢視git config配置資訊

git config --list
複製程式碼

相關文章