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

1. const subject = "World";
2. const header = (
3.   <header>
4.     <h1>Hello, {subject}!</h1>
5.   </header>
6. );

复制代码

vue jsx

1. import myComponent from './myComponent'
2. import './HelloWorld.css'
4. // 创建一个组件button
5. const ButtonCounter = {
6.   name: "button-counter",
7.   props: ["count"],
8.   methods: {
9.     onClick() {
10.       this.$emit("change", this.count + 1);
11.     }
12.   },
13.   render() {
14.     return (
15.       <button onClick={this.onClick}>数量 {this.count}+</button>
16.     );
17.   }
18. };
19. export default {
20.   name: 'HelloWorld',
21.   components: {
22.     myComponent
23.   },
24.   data () {
25.     return {
26.       text:'hello 纸没了飞机',
27.       inputText:'我吃了',
28.       count: 0
29.     }
30.   },
31.   props: {
32.     msg: String
33.   },
34.   watch: {},
35.   methods: {
36.     onChange(val) {
37.       this.count = val;
38.       alert(this.count)
39.     }
40.   },
41.   render() {
42.   // const {text,inputText,count} = this //通过解构，下方return片段中就不需要this
43.     return (
44.    
45.      <h3>内容</h3>
46.      {/* 纯文本 */}
47.      <p>hello, I am Gopal</p>
48.      {/* 动态内容 */}
49.      <p>{ this.text }</p>
50.      <p>hello { this.msg }</p>
51.      {/* 输入框 */}
52.      <input/>
53.      {/* 自定义组件 */}
54.      <myComponent/>
55.      <ButtonCounter
56.         style={{ marginTop: "10px" }}
57.         count={this.count}
58.         type="button"
59.         onChange={this.onChange}
60.       />
61.    
62.     );
63.    }
64. }

复制代码

VUE简单说明

包含了所有的标记结构和组件的展示逻辑。template 可以包含任何合法的 HTML
组件文件名及其在 JavaScript 中的表示方式总是用大写驼色（例如ToDoList），而等价的自定义元素总是用连字符小写（例如）。

[/code]

• label的值应该是一个带有两个属性的对象（或者是props，因为它们被调用在可找到的组件的 context）
  
  
  • 第一个 required 属性，它的值是 true. 这将会告诉 Vue 说，我们希望每个该组件的实例都必须有个 label 字段。如果 ToDoItem 组件没有 label 字段的话，Vue 会提示警告。
    
  • 第二是添加一个 type 属性。这个属性的值设为 JavaScript 的 String 类型。这等于告诉 Vue，我们希望 type 属性的值是 String 类型的。
    
  
  
• 现在转向doneprop.
  
  
  • 首先添加一个 default 属性，它的值是 false。这意味着当没有 done prop 被传递给 ToDoItem 组件时， done prop 的值会是 false（注意 default 属性不是必需的————我们只在非 required props 里才需要 default ）
    
  • 接着，添加一个 type 属性，值为 Boolean。这将告诉 Vue，我们希望这个 prop 的值是 JavaScript 的 Boolean 类型。
    
  
  

调用时传递label参数

1. [/code]props 是一种单向数据绑定，组件永远不该改变自己的 props 的值，这点很重要。坚守这点的原因有很多。其一是，组件修改 props 会造成程序调试困难。如果一个值被传递进多个子组件，将很难定位这个值是在哪里被修改的。此外，[b]修改 props 会造成组件重新渲染[/b]。所以，一个组件里突变的 props 会触发组件重新渲染，这可能会反过来再次触发 props 突变。
2. [code]data() {
3.   return {
4.     key: value
5.   }
6. }

复制代码

data 属性是一个函数。这是为了在运行时保持组件的每个实例的数据值是唯一的——为每个组件实例单独调用函数。如果将数据声明为仅一个对象，则该组件的所有实例将共享相同的值。这是 Vue 注册组件方式的副作用，也是你不想要的。

来源:https://www.cnblogs.com/ggonekim/p/17203833.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！