图片.png

（*useful）标记：目前觉得有用的函数
//FIXME 标记：待补充

---

Vue生命周期管理：

lifecycle

指令 (Directives) 是带有 v- 前缀的特殊属性

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

v-if:

<p v-if="seen">现在你看到我了</p>

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

computed:

计算属性是基于它们的依赖进行 缓存的

computed: {
  now: function () {
    return Date.now()
  }
}

methods:

    Vue.component('child', {
            // 声明 props
            props: {
                message: {
                    type: String,
                    default: "placeholderString-child",
                }
            },
            // 就像 data 一样，prop 也可以在模板中使用
            // 同样也可以在 vm 实例中通过 this.message 来使用
            template: '<span v-on:click="changValue" >{{ message }}</span>',
            mounted: function () {//加载完成

            },
            data: function () {  //这里必须是function
                return {
                }
            },
            methods: {
                changValue: function () { //（*useful）
                    this.$emit("change","子组件向父组件传值"+this.message.type); 
                }
            }
        })

组件组合：有别于传统的JS通信方式，两个模块的交互，类似OC的protocol （*useful）

下图非常重要：非常重要：重要：

从传统直接操作dom，转换到操作数据，来改变数据

非常重要-vue父子组件

v-on: 可省略v-on 表示为 @

监听 DOM 事件来触发一些 JavaScript 代码：
input

键值修饰符：
<input v-on:keyup.enter="submit">
<-- 缩写语法 -->
<input @keyup.enter="submit">
事件修饰符：
<form v-on:submit.prevent="onSubmit">...</form>

v-bind: 可省略v-bind 表示为 :

• 绑定都是 属性 class style herf id
• 自定义的 prop

class，style绑定

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

v-model ：

v-model 指令在表单控件元素上创建双向数据绑定

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea
    v-model="message"
    placeholder="add multiple lines">
</textarea>

修饰符 : lazy
<-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

组件 (Component) 是 Vue.js 最强大的功能之一

data 必须是函数

Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return data
  }
})

内容分发机制 <slot>

假定我们有一个 app-layout 组件，它的模板为：
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件模板：
<app-layout>
  <h1 slot="header">这里可能是一个页面标题</h1>
  <p>主要内容的一个段落。</p>
  <p>另一个主要段落。</p>
  <p slot="footer">这里有一些联系信息</p>
</app-layout>

渲染结果：
<div class="container">
  <header>
    <h1>这里可能是一个页面标题</h1>
  </header>
  <main>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
  </main>
  <footer>
    <p>这里有一些联系信息</p>
  </footer>
</div>

vue底层实现原理：（*useful）

Object.defineProperty： 监听数据的setter getter方法
缺点：

• 不能检测数组的变化

vue改进：

• vue通过hack ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']方法对数组变化监听，
• 其他（arr[1]=newValue）则不能监听到。

代替方案：Proxy（加强版Object.defineProperty,可以监听数组等） （*useful）

Vue.js