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 (
<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}
/>
);
}
}VUE简单说明
包含了所有的标记结构和组件的展示逻辑。template 可以包含任何合法的 HTML
组件文件名及其在 JavaScript 中的表示方式总是用大写驼色（例如ToDoList），而等价的自定义元素总是用连字符小写（例如）。
[*]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参数
props 是一种单向数据绑定，组件永远不该改变自己的 props 的值，这点很重要。坚守这点的原因有很多。其一是，组件修改 props 会造成程序调试困难。如果一个值被传递进多个子组件，将很难定位这个值是在哪里被修改的。此外，修改 props 会造成组件重新渲染。所以，一个组件里突变的 props 会触发组件重新渲染，这可能会反过来再次触发 props 突变。
data() {
return {
key: value
}
}data 属性是一个函数。这是为了在运行时保持组件的每个实例的数据值是唯一的——为每个组件实例单独调用函数。如果将数据声明为仅一个对象，则该组件的所有实例将共享相同的值。这是 Vue 注册组件方式的副作用，也是你不想要的。
来源:https://www.cnblogs.com/ggonekim/p/17203833.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]