3.2目录调整

data/3.Vue高阶/2.render函数/1.jsX/exercises.md

-
-# JSX
-
- <div style="color: pink;font-size:22px;font-weight:700">小常识：</div>
-<br><br>
-如果你写了很多 render 函数，可能会觉得下面这样的代码写起来很痛苦：
-<br><br>
-
-```javascript
-createElement(
-  'anchored-heading', {
-    props: {
-      level: 1
-    }
-  }, [
-    createElement('span', 'Hello'),
-    ' world!'
-  ]
-)
-```
-<br><br>
-特别是对应的模板如此简单的情况下：
-<br><br>
-
-```javascript
-<anchored-heading :level="1">
-  <span>Hello</span> world!
-</anchored-heading>
-
-```
-
-<br><br>
-
-这就是为什么会有一个 Babel 插件，用于在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上。
-
-<br><br>
-
-```javascript
-import AnchoredHeading from './AnchoredHeading.vue'
-
-new Vue({
-  el: '#demo',
-  render: function (h) {
-    return (
-      <AnchoredHeading level={1}>
-        <span>Hello</span> world!
-      </AnchoredHeading>
-    )
-  }
-})
-```
-
-<br><br>
-
-将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的 3.4.0 版本开始，我们会在以 ES2015 语法声明的含有 JSX 的任何方法和 getter 中 (不是函数或箭头函数中) 自动注入 const h = this.$createElement，这样你就可以去掉 (h) 参数了。对于更早版本的插件，如果 h 在当前作用域中不可用，应用会抛错。
-<br><br>
-
- <div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div>
-
-以下对jsX的描述不正确的是？ <br/><br/>
-
-## 答案
-
-在编译之后， jsX会被转化为普通的Javascript对象，不可以在if或者for语句里使用JSX
-
-## 选项
-
-### A
-
-全称是Javascript XML
-### B
-
-JSX是一种JavaScript的语法扩展
-### C
-
-
-JSX可以使用引号来定义以字符串为值的属性
-

data/3.Vue高阶/2.render函数/2.函数组件化/exercises.md

-
-# 函数式组件
-
- <div style="color: pink;font-size:22px;font-weight:700">小常识：</div>
-<br><br>
-之前创建的锚点标题组件是比较简单，没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法。实际上，它只是一个接受一些 prop 的函数。在这样的场景下，我们可以将组件标记为 functional，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)。一个函数式组件就像这样：
-<br><br>
-
-```javascript
-Vue.component('my-component', {
-  functional: true,
-  // Props 是可选的
-  props: {
-    // ...
-  },
-  // 为了弥补缺少的实例
-  // 提供第二个参数作为上下文
-  render: function (createElement, context) {
-    // ...
-  }
-})
-```
-
-
-<br><br>
-注意：在 2.3.0 之前的版本中，如果一个函数式组件想要接收 prop，则 props 选项是必须的。在 2.3.0 或以上的版本中，你可以省略 props 选项，所有组件上的 attribute 都会被自动隐式解析为 prop。
-
-当使用函数式组件时，该引用将会是 HTMLElement，因为他们是无状态的也是无实例的。
-<br>
-在 2.5.0 及以上版本中，如果你使用了单文件组件，那么基于模板的函数式组件可以这样声明：
-<br>
-
-```javascript
-<template functional>
-</template>
-```
-
-<br><br>
-组件需要的一切都是通过 context 参数传递，它是一个包括如下字段的对象：
-<br>
-props：提供所有 prop 的对象<br>
-children：VNode 子节点的数组<br>
-slots：一个函数，返回了包含所有插槽的对象<br>
-scopedSlots：(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。<br>
-data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件<br>
-parent：对父组件的引用<br>
-listeners：(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。<br>
-injections：(2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的 property。<br>
-在添加 functional: true 之后，需要更新我们的锚点标题组件的渲染函数，为其增加 context 参数，并将 this.$slots.default 更新为 context.children，然后将 this.level 更新为 context.props.level。<br>
-
-因为函数式组件只是函数，所以渲染开销也低很多。
-
-在作为包装组件时它们也同样非常有用。比如，当你需要做这些时：<br>
-
-程序化地在多个组件中选择一个来代为渲染；<br>
-在将 children、props、data 传递给子组件之前操作它们。<br>
-下面是一个 smart-list 组件的例子，它能根据传入 prop 的值来代为渲染更具体的组件：
-<br>
-
-```javascript
-var EmptyList = { /* ... */ }
-var TableList = { /* ... */ }
-var OrderedList = { /* ... */ }
-var UnorderedList = { /* ... */ }
-
-Vue.component('smart-list', {
-  functional: true,
-  props: {
-    items: {
-      type: Array,
-      required: true
-    },
-    isOrdered: Boolean
-  },
-  render: function (createElement, context) {
-    function appropriateListComponent () {
-      var items = context.props.items
-
-      if (items.length === 0)           return EmptyList
-      if (typeof items[0] === 'object') return TableList
-      if (context.props.isOrdered)      return OrderedList
-
-      return UnorderedList
-    }
-
-    return createElement(
-      appropriateListComponent(),
-      context.data,
-      context.children
-    )
-  }
-})
-```
-
-
-
- <div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div>
-
-函数式组件，组件需要的一切都是通过 context 参数传递，context不包括那个字段？ <br/><br/>
-
-## 答案
-
-
-functional 
-
-## 选项
-
-### A
-
-scopedSlots
-### B
-
-props
-### C
-
-
-slots
-

data/3.Vue高阶/2.渲染函数&JSX/1.render函数/exercises.md

+# render函数
+
+假设你正在使用Vue的render函数来创建一个组件，以下哪个选项描述的是render函数中正确的组件定义方式？
+
+
+## 答案
+
+render: function(h) {
+  return h(MyComponent, {
+    class: 'my-component'
+  }, 'Hello World')
+}
+
+
+## 选项
+
+### A
+
+render: function(h) {
+  return h('div', {
+    class: 'my-component'
+  }, 'Hello World')
+}
+
+
+
+### B
+
+render: function(h) {
+  return h('my-component', {
+    class: 'my-component'
+  }, 'Hello World')
+}
+
+
+
+### C
+
+
+render: function(h) {
+  return h('my-component', {
+    class: 'my-component'
+  }, [
+    h('span', 'Hello'),
+    h('span', 'World')
+  ])
+}
+
+
+

data/3.Vue高阶/2.渲染函数&JSX/2.createElement参数/config.json

+{
+  "node_id": "vue-ce443ccab6c048078cafd292ffd6ef92",
+  "keywords": [
+    "createElement"
+  ],
+  "children": [],
+  "export": [],
+  "keywords_must": [
+    "createElement"
+  ],
+  "keywords_forbid": []
+}
\ No newline at end of file

data/3.Vue高阶/2.渲染函数&JSX/2.createElement参数/exercises.json

+{
+  "type": "code_options",
+  "author": "zhaoshuangshi",
+  "source": "exercises.md",
+  "notebook_enable": false,
+  "exercise_id": "c39802e0a80948a5b6225ac98fa33dcd"
+}
\ No newline at end of file

data/3.Vue高阶/2.渲染函数&JSX/2.createElement参数/exercises.md

+# createElement参数
+
+当使用Vue中的createElement函数创建一个元素节点时，下面哪些参数是必填的？
+
+
+
+## 答案
+
+以上都是必填的
+
+## 选项
+
+### A
+
+标签名
+
+### B
+
+对象描述
+
+
+### C
+
+
+子元素
+

data/3.Vue高阶/2.渲染函数&JSX/3.JSX/exercises.json

+{
+  "type": "code_options",
+  "author": "zhaoshuangshi",
+  "source": "exercises.md",
+  "notebook_enable": false,
+  "exercise_id": "c39802e0a80948a5b6225ac98fa33dcd"
+}
\ No newline at end of file

data/3.Vue高阶/2.渲染函数&JSX/3.JSX/exercises.md

+# JSX
+
+在 Vue 中使用 JSX 时，以下哪种写法是正确的？
+
+
+## 答案
+
+`<VueComponent :prop1="value1" :prop2="value2" />`
+
+
+## 选项
+
+### A
+
+`<VueComponent {prop1: value1, prop2: value2} />`
+
+### B
+
+`<VueComponent [prop1]="value1" [prop2]="value2" />`
+
+### C
+
+
+`<VueComponent prop1={value1} prop2={value2} />`
+

data/3.Vue高阶/2.渲染函数&JSX/4.函数式组件/exercises.md

+
+# 函数式组件
+
+在Vue中，函数式组件的特点是什么？
+
+
+## 答案
+
+可以接受props作为参数。
+
+## 选项
+
+### A
+
+可以使用this关键字。
+
+### B
+
+可以包含生命周期钩子。
+
+### C
+
+可以是有状态的，含有响应式数据。
+