diff --git "a/data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/1.jsX/exercises.md" "b/data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/1.jsX/exercises.md" deleted file mode 100644 index c2c587541b019f8c4d433cfb314701a3d5dfdd85..0000000000000000000000000000000000000000 --- "a/data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/1.jsX/exercises.md" +++ /dev/null @@ -1,78 +0,0 @@ - -# JSX - -
小常识:
-

-如果你写了很多 render 函数,可能会觉得下面这样的代码写起来很痛苦: -

- -```javascript -createElement( - 'anchored-heading', { - props: { - level: 1 - } - }, [ - createElement('span', 'Hello'), - ' world!' - ] -) -``` -

-特别是对应的模板如此简单的情况下: -

- -```javascript - - Hello world! - - -``` - -

- -这就是为什么会有一个 Babel 插件,用于在 Vue 中使用 JSX 语法,它可以让我们回到更接近于模板的语法上。 - -

- -```javascript -import AnchoredHeading from './AnchoredHeading.vue' - -new Vue({ - el: '#demo', - render: function (h) { - return ( - - Hello world! - - ) - } -}) -``` - -

- -将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的 3.4.0 版本开始,我们会在以 ES2015 语法声明的含有 JSX 的任何方法和 getter 中 (不是函数或箭头函数中) 自动注入 const h = this.$createElement,这样你就可以去掉 (h) 参数了。对于更早版本的插件,如果 h 在当前作用域中不可用,应用会抛错。 -

- -
小测试:
- -以下对jsX的描述不正确的是?

- -## 答案 - -在编译之后, jsX会被转化为普通的Javascript对象,不可以在if或者for语句里使用JSX - -## 选项 - -### A - -全称是Javascript XML -### B - -JSX是一种JavaScript的语法扩展 -### C - - -JSX可以使用引号来定义以字符串为值的属性 - diff --git "a/data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/2.\345\207\275\346\225\260\347\273\204\344\273\266\345\214\226/exercises.md" "b/data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/2.\345\207\275\346\225\260\347\273\204\344\273\266\345\214\226/exercises.md" deleted file mode 100644 index 47fefe01cab4e7d6d7ec4cbb527edfa5a059848b..0000000000000000000000000000000000000000 --- "a/data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/2.\345\207\275\346\225\260\347\273\204\344\273\266\345\214\226/exercises.md" +++ /dev/null @@ -1,118 +0,0 @@ - -# 函数式组件 - -
小常识:
-

-之前创建的锚点标题组件是比较简单,没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法。实际上,它只是一个接受一些 prop 的函数。在这样的场景下,我们可以将组件标记为 functional,这意味它无状态 (没有响应式数据),也没有实例 (没有 this 上下文)。一个函数式组件就像这样: -

- -```javascript -Vue.component('my-component', { - functional: true, - // Props 是可选的 - props: { - // ... - }, - // 为了弥补缺少的实例 - // 提供第二个参数作为上下文 - render: function (createElement, context) { - // ... - } -}) -``` - - -

-注意:在 2.3.0 之前的版本中,如果一个函数式组件想要接收 prop,则 props 选项是必须的。在 2.3.0 或以上的版本中,你可以省略 props 选项,所有组件上的 attribute 都会被自动隐式解析为 prop。 - -当使用函数式组件时,该引用将会是 HTMLElement,因为他们是无状态的也是无实例的。 -
-在 2.5.0 及以上版本中,如果你使用了单文件组件,那么基于模板的函数式组件可以这样声明: -
- -```javascript - -``` - -

-组件需要的一切都是通过 context 参数传递,它是一个包括如下字段的对象: -
-props:提供所有 prop 的对象
-children:VNode 子节点的数组
-slots:一个函数,返回了包含所有插槽的对象
-scopedSlots:(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
-data:传递给组件的整个数据对象,作为 createElement 的第二个参数传入组件
-parent:对父组件的引用
-listeners:(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
-injections:(2.3.0+) 如果使用了 inject 选项,则该对象包含了应当被注入的 property。
-在添加 functional: true 之后,需要更新我们的锚点标题组件的渲染函数,为其增加 context 参数,并将 this.$slots.default 更新为 context.children,然后将 this.level 更新为 context.props.level。
- -因为函数式组件只是函数,所以渲染开销也低很多。 - -在作为包装组件时它们也同样非常有用。比如,当你需要做这些时:
- -程序化地在多个组件中选择一个来代为渲染;
-在将 children、props、data 传递给子组件之前操作它们。
-下面是一个 smart-list 组件的例子,它能根据传入 prop 的值来代为渲染更具体的组件: -
- -```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 - ) - } -}) -``` - - - -
小测试:
- -函数式组件,组件需要的一切都是通过 context 参数传递,context不包括那个字段?

- -## 答案 - - -functional - -## 选项 - -### A - -scopedSlots -### B - -props -### C - - -slots - diff --git "a/data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/1.jsX/exercises.json" "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/1.render\345\207\275\346\225\260/exercises.json" similarity index 100% rename from "data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/1.jsX/exercises.json" rename to "data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/1.render\345\207\275\346\225\260/exercises.json" diff --git "a/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/1.render\345\207\275\346\225\260/exercises.md" "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/1.render\345\207\275\346\225\260/exercises.md" new file mode 100644 index 0000000000000000000000000000000000000000..da37afb9dd763f939839edf2d46e4fee44d0c6ec --- /dev/null +++ "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/1.render\345\207\275\346\225\260/exercises.md" @@ -0,0 +1,50 @@ +# 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') + ]) +} + + + diff --git "a/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/2.createElement\345\217\202\346\225\260/config.json" "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/2.createElement\345\217\202\346\225\260/config.json" new file mode 100644 index 0000000000000000000000000000000000000000..11a60b39b2ac7d1beb2f80e3cb268d1d8ad60a9a --- /dev/null +++ "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/2.createElement\345\217\202\346\225\260/config.json" @@ -0,0 +1,12 @@ +{ + "node_id": "vue-ce443ccab6c048078cafd292ffd6ef92", + "keywords": [ + "createElement" + ], + "children": [], + "export": [], + "keywords_must": [ + "createElement" + ], + "keywords_forbid": [] +} \ No newline at end of file diff --git "a/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/2.createElement\345\217\202\346\225\260/exercises.json" "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/2.createElement\345\217\202\346\225\260/exercises.json" new file mode 100644 index 0000000000000000000000000000000000000000..774cbbec97823974a13471e89ef0e1bbb7fd2c3c --- /dev/null +++ "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/2.createElement\345\217\202\346\225\260/exercises.json" @@ -0,0 +1,7 @@ +{ + "type": "code_options", + "author": "zhaoshuangshi", + "source": "exercises.md", + "notebook_enable": false, + "exercise_id": "c39802e0a80948a5b6225ac98fa33dcd" +} \ No newline at end of file diff --git "a/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/2.createElement\345\217\202\346\225\260/exercises.md" "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/2.createElement\345\217\202\346\225\260/exercises.md" new file mode 100644 index 0000000000000000000000000000000000000000..bde54d445a0e2c665157445f8292aa2493cc5585 --- /dev/null +++ "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/2.createElement\345\217\202\346\225\260/exercises.md" @@ -0,0 +1,26 @@ +# createElement参数 + +当使用Vue中的createElement函数创建一个元素节点时,下面哪些参数是必填的? + + + +## 答案 + +以上都是必填的 + +## 选项 + +### A + +标签名 + +### B + +对象描述 + + +### C + + +子元素 + diff --git "a/data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/1.jsX/config.json" "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/3.JSX/config.json" similarity index 100% rename from "data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/1.jsX/config.json" rename to "data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/3.JSX/config.json" diff --git "a/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/3.JSX/exercises.json" "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/3.JSX/exercises.json" new file mode 100644 index 0000000000000000000000000000000000000000..774cbbec97823974a13471e89ef0e1bbb7fd2c3c --- /dev/null +++ "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/3.JSX/exercises.json" @@ -0,0 +1,7 @@ +{ + "type": "code_options", + "author": "zhaoshuangshi", + "source": "exercises.md", + "notebook_enable": false, + "exercise_id": "c39802e0a80948a5b6225ac98fa33dcd" +} \ No newline at end of file diff --git "a/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/3.JSX/exercises.md" "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/3.JSX/exercises.md" new file mode 100644 index 0000000000000000000000000000000000000000..6d6aa0b890f8d3a61c60cda89c5767e81d142839 --- /dev/null +++ "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/3.JSX/exercises.md" @@ -0,0 +1,25 @@ +# JSX + +在 Vue 中使用 JSX 时,以下哪种写法是正确的? + + +## 答案 + +`` + + +## 选项 + +### A + +`` + +### B + +`` + +### C + + +`` + diff --git "a/data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/2.\345\207\275\346\225\260\347\273\204\344\273\266\345\214\226/config.json" "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/4.\345\207\275\346\225\260\345\274\217\347\273\204\344\273\266/config.json" similarity index 100% rename from "data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/2.\345\207\275\346\225\260\347\273\204\344\273\266\345\214\226/config.json" rename to "data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/4.\345\207\275\346\225\260\345\274\217\347\273\204\344\273\266/config.json" diff --git "a/data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/2.\345\207\275\346\225\260\347\273\204\344\273\266\345\214\226/exercises.json" "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/4.\345\207\275\346\225\260\345\274\217\347\273\204\344\273\266/exercises.json" similarity index 100% rename from "data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/2.\345\207\275\346\225\260\347\273\204\344\273\266\345\214\226/exercises.json" rename to "data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/4.\345\207\275\346\225\260\345\274\217\347\273\204\344\273\266/exercises.json" diff --git "a/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/4.\345\207\275\346\225\260\345\274\217\347\273\204\344\273\266/exercises.md" "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/4.\345\207\275\346\225\260\345\274\217\347\273\204\344\273\266/exercises.md" new file mode 100644 index 0000000000000000000000000000000000000000..1b2cf171be4f56975f7fb58f4ec89b6152df64b2 --- /dev/null +++ "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/4.\345\207\275\346\225\260\345\274\217\347\273\204\344\273\266/exercises.md" @@ -0,0 +1,24 @@ + +# 函数式组件 + +在Vue中,函数式组件的特点是什么? + + +## 答案 + +可以接受props作为参数。 + +## 选项 + +### A + +可以使用this关键字。 + +### B + +可以包含生命周期钩子。 + +### C + +可以是有状态的,含有响应式数据。 + diff --git "a/data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/config.json" "b/data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/config.json" similarity index 100% rename from "data/3.Vue\351\253\230\351\230\266/2.render\345\207\275\346\225\260/config.json" rename to "data/3.Vue\351\253\230\351\230\266/2.\346\270\262\346\237\223\345\207\275\346\225\260&JSX/config.json"