VUE笔记01

组件

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

每个 Vue 应用都是通过用 Vue 函数（类）创建一个新的 Vue 实例开始的。一般的 UI 组件是需要有 html、css 去展示对应的界面（视图）的。所以，我们需要给这种组件设置模板。

data：因为 vue 根节点,在整个vue单页面实例中,它有且只有一个,所以 data 可以设置成一个 Object{}；但是子组件可能会多次实例化和调用,所以为了确保子组件的数据的独立性和隔离性,需要使用 data(){return{}}的方法.每次返回一个新的对象。

可复用组件的 data 必须是函数，且该函数必须返回一个对象作为组件最终的 data。

Props：通过props属性来声明一个自己的属性，然后父组件就可以往里面传递数据。props是子组件访问父组件数据的唯一接口，props是单向绑定的；

• 如果传入的 props 值为一个表达式，则必须使用 v-bind

• 组件中的 data 和 props 数据都可以通过组件实例进行直接访问

• data 中的 key 与 props 中的 key 不能冲突

  父组件到子组件内部的数据传递：

  父组件通过上述提到的 props 向一个子组件内部传递数据。

  子组件内部到外部的数据传递

  vue 为每个组件对象提供了一个内置方法 $emit ，它等同于自定义事件中的 new Event,trigger 等

  this.$emit('自定义事件名称', 事件数据)
  

  • 事件数据就是中触发事件的同时携带传递的数据 - event

  • 父级在使用该组件的过程中，可以通过 @事件名称 来注册绑定事件函数

  • 事件函数的第一个参数就是事件数据

  ref 与 $refs

  ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。

  $refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute，Vue 会对它进行解析，影响当前DOM。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达