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>

label的值應該是一個帶有兩個屬性的物件（或者是props，因為它們被呼叫在可找到的組件的 context）
1. 第一個 required 屬性，它的值是 true. 這將會告訴 Vue 說，我們希望每個該組件的實體都必須有個 label 欄位，如果 ToDoItem 組件沒有 label 欄位的話，Vue 會提示警告，
2. 第二是添加一個 type 屬性，這個屬性的值設為 JavaScript 的 String 型別，這等于告訴 Vue，我們希望 type 屬性的值是 String 型別的，
現在轉向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 注冊組件方式的副作用，也是你不想要的，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546484.html

標籤：JavaScript

上一篇：前端設計模式——裝飾者模式

下一篇：前端設計模式——裝飾者模式

Web客戶端開發

Web開發工具

終端命令

JSX

VUE簡單說明

props使組件動態化