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 注册组件方式的副作用，也是你不想要的。