vue组件学习

子组件注册到父组件时，Vue.js会编译好父组件的模板，模板的内容已经决定了父组件将要渲染的HTML。

http://blog.csdn.net/xingjigongsi/article/details/54602404

小结:

1、指令:

v-model 数据双向绑定

v-if、v-show、v-esle   根据给定的表达式值决定是否显示

v-for  循环

v-bind  将dom属性与数据相绑定  如v-bind:src="img_src";  Vue.data:{img_src:"1.jpg"}

v-on:事件=“方法/内联语句”    如v-on:click="test('ok',$event)"  可简写成@click="test('ok',$event)"    这里的$event指原生的dom事件

2、组件

组件的创建

组件的注册    自定义标签与组件构造器绑定  形如: "parentTag":"模板"

组件的使用

①因为前面组件的注册中html与js的高耦合性，所以使用script标签或template时为了使JavaScript在html模板分离。

②父子组件的作用域 --父子组件的数据传递(子组件接收父组件数据:在子组件中定义props属性来接收父组件中使用v-bind绑定的属性；父组件接收子组件的数据:)   如:

<div id="app">
    <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>

Vue作用域插槽:
   我认为是子组件返回模板后，父组件重新来渲染


Vue 组件的 API 来自三部分 - props, events 和 slots ：
Props 允许外部环境传递数据给组件
Events 允许从外部环境在组件内触发副作用
Slots 允许外部环境将额外的内容组合在组件中


Render函数-使用 JavaScript来创建你的 HTML的template