编程问答

Web客户端开发

發布時間：2025/5/22 编程问答 23 如意码农

生活随笔收集整理的這篇文章主要介紹了 Web客户端开发小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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 應用程序。

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>

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

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

總結

以上是生活随笔為你收集整理的Web客户端开发的全部內容，希望文章能夠幫你解決所遇到的問題。