202212青少年软件编程（Python） 等级考试试卷（一级）

props类似于为子组件定义了属性名，用于接受父组件传递进来的值，通过v-bind将定义好的属性并绑定到子组件实例上进行参数绑定。Vue是不建议在不同的组件直接传递值的，我们需要使用props方法来进行组件间的值传递。props后的属性也可以是obj格式的对象，方便针对接受的参数进行过滤操作。父模板的数据，子组件是无法直接调用的。1）字符过滤（接受的值是否为字符）1）组件调用顶级对象中的data。2）子组件介绍父组件的多值传递。2）子组件中调用父组件的数据。1）子组件接受父组件的传值。

2）在components上拓展子组件。1）在component上拓展子组件。Vue中的组件可以拓展自己的子组件。

is 操作符可以用于组件的切换，配合component标签可以实现根据不同的组件名进行组件的切换效果。2）:is与components实现tab切换。1）:is与component实现组件切换。

本课主要介绍组件的一些小练习，通过这些小练习巩固下之前课程中的学习。2）结合methods组合示例。1）组件中值的双向绑定。

Vue组件中的data是独立的，Vue官方不建议各单元互通数据，每个组件有各自的数据对象，类似于Vue示例中的data。data对象会为不同组件注册不同的数据，同结构不同的组件可以使用不同的独立数据。如果data数据的参数值是域外定义的公共数据，那么所有组件会共享数据。组件中的data必须是带有返回值的函数对象。以下每个按钮的点击，改变的是同一个数据模型。2）data数据独立。

组件中的方法拓展与实例对象中的方法拓展类似。

Vue中的组件编写方式很多，这个应该算是Vue的缺点吧，本文将介绍Vue的其他组件的编写方式。这种方式比script组件高明不了多少，只是把JS换成了template标签。吐槽*非常奇怪的用法，通过JS标签生成组件，使用方式和。2）通过components进行拓展。2）通过components进行拓展。1）通过component进行拓展。1）通过component进行拓展。

我们可以通过在实例外部以component的方式拓展单个组件，当前方式需要在构建全局实例之前进行组件创建，不存在组件提升。components和methods类似，表示（组件）集合，我们也可以直接通过components进行组件拓展。如果组件涉及的DOM较多，必须要将所有DOM包裹在一个主DOM中，否则将报错。驼峰式命名在使用的时候，需要将调用的组件名转换成横杠式。3）通过components拓展组件。3）利用Vue对象进行生成。3）配合ES6模板语法使用。2）分离模板创建组件。

extend可以拓展组件模板，然后可以将extend拓展的模板班挂载到component上。Vue中可以自定义模板组件，组件的写法有很多种。4）将extend挂载到components上。3）将extend挂载到component上。1）在components上拓展组件。2）在component上拓展组件。6）template标签组件模板。5）JS组件模板语法。

new Vue({data: {},filters: {},})

v-html指令可以在DOM中渲染新的子HTML DOM，Vue官方认为HTML渲染是不安全的，并不建议直接做HTML插入操作。v-text可以将字符渲染进DOM中。

watch用于监测数据的变化，如果发生变化会及时返回修改前和修改后的数据。

事件修饰符的使用场景较多，主要为了处理事件冒泡和默认事件等所带来的一系列问题。

test: 38new Vue({methods: {fun(){alert('按回车键的到的内容');})

1） focus (进入焦点)2）鼠标事件 - 鼠标经过。

【代码】第九课 Vue中的v-bind指令拓展。

v-bind style 可以进行内嵌样式编写，属性值为字符，多属性用逗号分隔。动态绑定的class与原生class名不冲突，最终会合并成为一个。v-bind中的内容可以以{}运算符配合，进行简单的JS运算。动态修改的class名来源于data对象，而非手动给定。v-bind用于属性绑定，使得属性可以动态修改。4） v-bind绑定多class名。v-bind可以利用:作为简写方式。1） 动态切换class。

v-for用于对象遍历（数组/JSON），渲染数据列表。2）遍历对象键/值对。

v-if指令与v-show的功能在部分场景重叠，常用语条件判断。

v-show用于显示或隐藏DOM元素，配合布尔值表示显示状态，使用场景较多。指令中也可以传入data参数。2）配合methods使用。1） 配合data使用。