Stay hungry,stay foolish.

• props

一个组件可以给自己定义 props 属性，这样别的组件使用自己的时候就可以给自己 props 里指定的属性传值。比如：

1
2
3
4
5
6
7
8
9
10

// parent.vue
<div id="app">
    A{{msg}}
    <component-a :msg="msg"></component-a>
</div>

// component-a.vue
export default {
  props: ["msg"]
}

这样的话 component-a 组件里就能使用 parent 传递过来的 msg 属性。

简介

Data URLs 是前缀为data：协议的URL，其允许内容创建者向文档中嵌入小文件。

语法

data:①[]②[;charset=]③[;]④,⑤

• 第①部分data： 协议头，它标识这个内容为一个 data URI 资源。
• 第②部分MIME 类型（可选项）：浏览器通常使用MIME类型（而不是文件扩展名）来确定如何处理文档；因此服务器设置正确以将正确的MIME类型附加到响应对象的头部是非常重要的。MIME类型对大小写不敏感，但是传统写法都是小写。

简介

如何在工程里引入路由

• 定义路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// route.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
  routes: [
    {
      path: '/foo',
      component: () => import(/* webpackChunkName: "foo" */ 'foo/index.vue'),
      name: 'foo',
      props: true
    },
    {
      path: '/bar',
      component: Bar,
      name: 'bar',
      props: true
    }
  ]
})

简介

React 的核心思想是组件化的思想，而 React 组件的定义可以通过下面的公式描述：

1

UI = Component(props, state)

组件根据 props 和 state 两个参数，计算得到对应界面的UI。可见，props 和 state 是组件的两个重要数据源。

props 和 state 本质

一句话概括，props 是组件对外的接口，state 是组件对内的接口。

元素（Element）

React 元素其实就是一个简单的 JS 对象。一个元素和界面上的一部分 DOM 对应，元素描述了这部分 DOM 的结构和渲染效果。

元素创建方法

有以下几种创建元素的方法：

• React.createElement

语法：

简介

在 React 典型的数据流中，props 是父子组件交互的唯一方式。但在典型数据流之外，React 还提供了 ref 方式，用于在父组件中获取子组件的实例，以从子组件获取数据或对其进行修改（比如 focus 某个 dom 元素）。

ref 表示对组件实例的引用，其实就是 ReactDOM.render() 返回值。

适合使用 ref 的情况

• 管理焦点，文本选择或媒体播放。
• 触发强制动画。
• 集成第三方 DOM 库。

简介

meta 标签在 W3C 上的解释为：

The tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

可以被用来：

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services

属性

charset

该属性声明了文档的字符编码，他的值对 大小写不敏感。

介绍

文档节点隶属于 window 对象，表示整个页面文档，是文档的根节点。浏览器中有 html、xml 和 svg 三种类型的文档，分别对应三种类型的文档节点。文档节点没有父节点。在 html 文档中，文档节点有两个子节点，分别是 html 元素节点（仅指 标签的 dom 化节点）和文档类型节点。在 Javascript 中，document 不是一个普通的 JS 内置对象，而是 dom 的核心对象。

document 的继承关系：

EventTarget <- Node <- document

简介

浏览器提供了一些全局 DOM 对象。我们对 DOM 的操作基本上都是通过这些全局对象实现的。

window

• 简介

window 对象类型为 Window。

window 表示浏览器中打开的窗口。如果文档中包含框架（frame 或 iframe 标签），浏览器都会为 HTML 文档创建一个 window 对象，并且为每个框架创建一个额外的 window 对象。

• 全局作用域

window 充当全局作用域，这意味着 window 的所有属性和方法是全局定义的，都可以在全局直接使用，而不用以 window.functionName 的方式使用。

我们也可以给 window 增加新的属性和方法，当然这些属性和方法也是全局可直接使用的。

什么是 DOM

DOM（Document Object Model） 是 JavaScript 操作网页的接口，它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行增删改查操作。

浏览器会根据 DOM 模型将结构化的文档（比如 HTML、XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。

DOM 只是一个接口规范，可以用各种语言实现（比如 Python 也可以）。