Web開發工具

從高層次來看，可以將客戶端工具放入以下三大類需要解決的問題中：

• 安全網路 — 在代碼開發期間有用的工具。
• 轉換 — 以某種方式轉換代碼的工具，例如將一種中間語言轉換為瀏覽器可以理解的 JavaScript。
• 開發後階段 — 編寫完代碼後有用的工具，如測試和部署工具。

終端命令

• 導航電腦的文件系統以及基本級別的任務，如創建、複製、重命名和刪除：
  • 移動您的目錄結構 : cd
  • 建立目錄：mkdir
  • 創建文件（修改他們的原數據）: touch
  • 複製文件：cp
  • 移動文件：mv
  • 刪除文件或目錄：rm
• 下載在特定的 url 找到的文件：curl
• 在較大的文件體中尋找特定的片段：grep
• 主頁查看文件的內容：less, cat
• 操作和轉換文本流（例如，講 HTML 文件中的所有實例改為
  ）: awk, tr, sed

一個非常有用的終端快捷方式是使用tab 鍵自動完成你知道的名字，而不是必須鍵入整個東西。例如，在鍵入以上兩個命令後，嘗試鍵入 cd D 並按下tab — 它應該自動完成目錄名稱 Desktop 對於您，只要它存在於當前目錄中。在你前進的過程中記住這一點。

JSX

JSX，意為 JavaScript 和 XML, 是 JavaScript 的擴展，為 JavaScript 帶來了類似 HTML 的語法。它由 React 團隊發明，用於 React 應用程式，但也可用於開發其他應用程式——例如 Vue 應用程式。

const subject = "World";
const header = (
  <header>
    <h1>Hello, {subject}!</h1>
  </header>
);

vue jsx

import myComponent from './myComponent'
import './HelloWorld.css'

// 創建一個組件button
const ButtonCounter = {
  name: "button-counter",
  props: ["count"],
  methods: {
    onClick() {
      this.$emit("change", this.count + 1);
    }
  },
  render() {
    return (
      <button onClick={this.onClick}>數量 {this.count}+</button>
    );
  }
};
export default {
  name: 'HelloWorld',
  components: {
    myComponent 
  },
  data () {
    return {
      text:'hello 紙沒了飛機',
      inputText:'我吃了',
      count: 0
    }
  },
  props: {
    msg: String
  },
  watch: {},
  methods: {
    onChange(val) {
      this.count = val;
      alert(this.count)
    }
  },
  render() {
  // const {text,inputText,count} = this //通過解構，下方return片段中就不需要this
    return (
    <div>
     <h3>內容</h3>
     {/* 純文本 */}
     <p>hello, I am Gopal</p>
     {/* 動態內容 */}
     <p>{ this.text }</p>
     <p>hello { this.msg }</p>
     {/* 輸入框 */}
     <input/>
     {/* 自定義組件 */}
     <myComponent/>
     <ButtonCounter
        style={{ marginTop: "10px" }}
        count={this.count}
        type="button"
        onChange={this.onChange}
      />
    </div>
    );
   }
}

VUE簡單說明

<template> 包含了所有的標記結構和組件的展示邏輯。template 可以包含任何合法的 HTML

組件文件名及其在 JavaScript 中的表示方式總是用大寫駝色（例如ToDoList），而等價的自定義元素總是用連字元小寫（例如<to-do-list>）。

<script> 包含組件中所有的非顯示邏輯，最重要的是， <script> 標簽需要預設導出一個 JS 對象。該對象是您在本地註冊組件、定義屬性、處理本地狀態、定義方法等的地方。在構建階段這個包含 template 模板的對象會被處理和轉換成為一個有 render() 函數的 Vue 組件。

props使組件動態化

<template>
  <div>
    <input type="checkbox" id="todo-item" checked="false" />
    <label for="todo-item">{{label}}</label>
  </div>
</template>

<script>
  export default {
    props: {
      label: { required: true, type: String },
      done: { default: false, type: Boolean }
    }
  };
</script>

1. label的值應該是一個帶有兩個屬性的對象（或者是props，因為它們被調用在可找到的組件的 context）
   1. 第一個 required 屬性，它的值是 true. 這將會告訴 Vue 說，我們希望每個該組件的實例都必須有個 label 欄位。如果 ToDoItem 組件沒有 label 欄位的話，Vue 會提示警告。
   2. 第二是添加一個 type 屬性。這個屬性的值設為 JavaScript 的 String 類型。這等於告訴 Vue，我們希望 type 屬性的值是 String 類型的。
2. 現在轉向doneprop.
   1. 首先添加一個 default 屬性，它的值是 false。這意味著當沒有 done prop 被傳遞給 ToDoItem 組件時， done prop 的值會是 false（註意 default 屬性不是必需的————我們只在非 required props 里才需要 default ）
   2. 接著，添加一個 type 屬性，值為 Boolean。這將告訴 Vue，我們希望這個 prop 的值是 JavaScript 的 Boolean 類型。

調用時傳遞label參數

<to-do-item label="My ToDo Item"></to-do-item>

props 是一種單向數據綁定，組件永遠不該改變自己的 props 的值，這點很重要。堅守這點的原因有很多。其一是，組件修改 props 會造成程式調試困難。如果一個值被傳遞進多個子組件，將很難定位這個值是在哪裡被修改的。此外，修改 props 會造成組件重新渲染。所以，一個組件里突變的 props 會觸發組件重新渲染，這可能會反過來再次觸發 props 突變。

data() {
  return {
    key: value
  }
}

data 屬性是一個函數。這是為了在運行時保持組件的每個實例的數據值是唯一的——為每個組件實例單獨調用函數。如果將數據聲明為僅一個對象，則該組件的所有實例將共用相同的值。這是 Vue 註冊組件方式的副作用，也是你不想要的。