自定义属性

在 vue 组件实例中 也可以自定义属性

// options
{
bzj: '我是把子君'
...
}

使用$option 获取属性值

var myOption = this.$options.bzj; // myOption => "我是把子君"

使用 this.$data 可获取当前实例的整个 data 对象

---

自定义指令   directive

指令其实就是 v-for、v-show、等等那些在组件标签内使用的东西。其实 vue 也是支持自定义的。虽然还是有点复杂

事例

当打开页面后还没点击过任何内容，要求一个输入框就处于聚焦状态。

可以自定义个指令绑定在 input 标签上就可实现。

// 注册一个全局自定义指令 `v-focus`
Vue.directive("focus", {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // el 就是绑定了该指令元素的 dom节点。
    // 聚焦元素
    el.focus();
  },
});

如果想注册局部指令，组件实例中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus  指令啦，如下：

注意你自定义的指令   使用时需加上 **v-**自定义组件名

<input v-focus>

自定义指令的钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

自定义指令的钩子函数参数

指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding：一个对象，包含以下 property：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive=”1 + 1” 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive=”1 + 1” 中，表达式为 “1 + 1”。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 其他它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的datase来进行。

---

过滤器

格式化数据

{{ msg | 过滤器 }}

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和** **v-bind** **表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<font style="color:#525252;">{{ msg | capitalize }}</font>

<font style="color:#2973B7;"><div</font> <font style="color:#2973B7;">v-bind:id=</font><font style="color:#42B983;">"rawId | formatId"</font><font style="color:#2973B7;">></div></font>

你可以在一个组件的选项中定义本地的过滤器：

filters: {
  capitalize (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter("capitalize", function (value) {
  if (!value) return "";
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
});

new Vue({
  // ...
});

vue.use()

全局注册插件和方法。

Vue.use (plugins：object || function, args)

use 方法会执行 参数为对象中的 install 方法，如果参数为方法，会直接实现该方法。并且执行前会判断是否已经注册，如果注册了就不会在注册了。

// vue.use 会 向install参数中传递 vue类
import wx from 'weixin-js-sdk'
const plugin = {
  install(Vue) {
    Vue.prototype.$wechat = wx
    Vue.wechat = wx
  },
  $wechat: wx
}
export default plugin
...
// main.js 中
import plugin from 'plugin'
Vue.use(plugin) // 注册，plugin.install被调用

vue 使用 JSX

JSX  是一种  Javascript  的语法扩展，JSX = Javascript + XML，即在  Javascript  里面写  XML，因为  JSX  的这个特性，所以他即具备了  Javascript  的灵活性，同时又兼具  html  的语义化和直观性

其实 vue 官方也说了，对于那些非常多v-if v-else的情况，就可以尝试使用 render 函数或者 jsx，不过 render 函数写简单的结构还行，结构复杂了就很蛋疼了，而既然用到 render 了，肯定是有一些复杂的逻辑判断，结构肯定简单不了，所以用 jsx 就是一个比较好的选择了

就是不用写 template 了   直接在 render 函数的返回值里   写 jsx