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

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

posted @ 2023-03-10 16:26  Allis  阅读(95)  评论(0编辑  收藏  举报