weixin_44010641的博客

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-for用于对象遍历（数组/JSON），渲染数据列表。2）遍历对象键/值对。

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

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

v-model用于非成对DOM的数据绑定({{}}模板数据绑定只适合成对标签)

方法定义通过Vue对象中的methods属性进行拓展1）基础示例new Vue({methods: {fun(){alert(1);})2）操作对象数据new Vue({data: {},methods: {fun(){alert(val);})

DOM标签通过大胡子语法绑定相应的属性值，直接将data对象中的属性名写入即可（参考基础示例）Vue构造函数内部拓展了内置数据对象data，所有数据放置在data对象内（参考基础示例）Vue中的数据绑定采用大胡子语法，即双{}进行数据绑定。模板（大胡子）中允许进行简单的JS运算。a) 不允许出现变量定义行为。b) 不允许出现条件判断语句。1）内置data对象。

静态页面中Vue引入类似于JQuery，将Vue放置进网页即可，自己写的Vue代码要放在引用的JS框架文件之后。Vue2.0较1.0作了较多的改变，很多语法都不太一样了，目前版本是2.x版本（日期：2017/09/07）。以上通过构造函数的形式创建了一个Vue的作用域环境，并绑定了一个父节点ID为’#app’的DOM元素节点。目前几乎所有新的框架都对旧版本（IE9之前）的浏览器不再支持，选择本框架前请谨慎。在编写Vue的时候，需要确定一个主环境，自己的代码都写在主环境下。2）项目文件Vue.JS。