2018 May 28 —— improvement; web; js

Vue mooc (4)

响应式

只有当 Vue 实例创建时所绑定的 data 属性才是响应式

Vue 属性与方法

$符号使用:

  • vm.$data
  • vm.$el Vue 实例使用的根 DOM 元素
  • vm.$watch
  • Vue 生命周期: 在 Vue 实例的不同生命周期被调用

Vue 模版语法

计算属性

computed 计算属性处理,当 data 变化时触发 computed 执行,进而引起 结果变化;

 

computed :{
    // function 被定义为 computedMsg 计算属性的 getter 
    computedMsg: function() {}

}



VS 

 

计算属性与方法表达式所得到结果一致,但计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

class bind

v-bind:class 绑定,利用对应 data 属性控制绑定逻辑;

click

  • @click.native 父组件监听自身的 Dom 事件
  • @click

事件的传递

Vue 从上到下传属性 props ,自底向上发送事件(父组件监听事件的发生)

注意事件名称的完全对应

组件基础

  • 组件 data 选项: 函数,每个组件对象维护一份独立的data 函数返回的数据拷贝
  • 组件中模版 template 下有且仅有单个根元素
组件之间的事件传递
  • Child 抛出事件, $emit 事件 => $emit(‘eventName’,value)
  • Parent 接受事件, v-on:eventName
组件注册
  • 全局注册(一处导入处处使用,劣势在于用户所有地方都会加载这些组件代码,但用户所处页面其实并未使用到这些相关组件)
  • 局部注册
  • Webpack 注册管理
上一篇
下一篇
Loading Disqus comments...
Table of Contents