Getting Started

MVVM、MVC、MVP模型

vue相关：

• vue
• vue-router
• vuex
• axios

举个栗子:

<div id="app" v-bind:title="message">
 { {message} }
</div>

new Vue({
    el: '#app'
    data: {
        message: 'hello world!'
    }
})

重要的属性:

• data - 数据
• methods - 方法
• watch - 监听
• computed - 计算属性
• component - 注册组件

除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true

// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})

指令

指令带有前缀 v-

• 模板渲染 - v-text，v-html，{ {} }
• 控制模板显示或者隐藏 - v-if，v-show
• 循环 - v-for
• 事件绑定 - v-on 譬如：点击事件v-on:click也可以简写为@click
• 属性绑定 - v-bind 譬如：v-bind:title也可以简写为:title
• 实现表单数据的双向绑定 - v-model
• v-cloak - 解决页面加载时候闪烁的问题（譬如：[v-cloak] { display: none } ）
• v-pre - 直接输出原始值
• v-once: 只执行一次数据改变

vuejs 组件之间的信息通讯 - props

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

过滤器

过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：

属性计算 computed

computed: {
    fullName: function () {
        return
    }
}

computed: {
    fullName: {
        get: function () {

        },
        set: function () {

        }
    }
}

生命周期

• beforeCreate - 组件实例刚被创建, 组件属性计算之前, 如data等属性
• created - 组件实例创建完成, 属性已绑定, 但DOM还未生成, $el属性还存在
• beforeMount - 模板编译/挂载之前
• mounted - 模板编译/挂载之后
• beforeUpdate - 组件更新之前
• updated - 组件更新之后
• activated - for keep-alive ,组件被激活时调用
• deactivated - for keep-alive ,组件被移除时调用
• beforeDestroy - 组件销毁前调用
• destroy - 组件销毁后调用

使用例子:

beforeCreate： 举个栗子：可以在这加个loading事件。

created：在这结束loading，还做一些初始化，实现函数自执行。

mounted： 在这发起后端请求，拿回数据，配合路由钩子做一些事情。

beforeDestroy： 你确认删除XX吗？

destroyed ：当前组件已被删除，清空相关内容。

keep-alive 使用时候初次进入页面声明周期的调用会执行 created -> mounted -> activated。再次进入的时候只执行 activated。

父组件传递到子组件

子组件要显式地用 props 选项声明它预期的数据：

export default {
    data () {
        return {
        }
    },
    props: ['message']
}

在父组件中引用子组件：

<child :message="hello my son !"></child>

子组件传递到父组件

触发：

this.$emit('increment')

监听：

v-on:increment="incrementTotal"

选项对象合并策略

• mergeHook
  • 子组件和父组件的生命周期事件会合并在一个数组里。父组件在前，子组件在后。
• watch
  • 子组件和父组件的watchers会合并在一个数组里。父组件在前，子组件在后。
• mergeAssets(filters，components，directives)
  • 首先会在子组件里查找，如果没有，才会沿着原型链向上，找父组件中对应的属性。
• data 合并规则
  • 无重复的属性保留
  • 同名覆盖
  • data中的对象也是相同规则,无重复的属性保留,同名覆盖
  • props、methods、computed: 无重复保留,同名子组件覆盖父组件

ajax请求

vue的ajax请求可以用 vue-resource，jquery-ajax，axios，fetch

鄙人打算用axios进行接下来的探索.

axios 配套 qs 使用改变传递的数据结构。