Vue学习之路(4)-资源配置选项(自定义内容配置)

引言

测试基于vue初始化的脚手架,不加router等其他的,使用index.html,编辑的入口main.js,结合控制台和页面观察输出结果,学习选项的使用

components

//定义局部组件
类型：Object 
//包含 Vue 实例可用组件的哈希表
//下面的方法是注册全局组件
Vue.component('my-component', {
  // 选项
})
//components 配置是根据配置局部引入的组件,

index.html
用默认的

main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'

Vue.config.productionTip = false
Vue.component('hello',{
  template:'<div>Hello-01</div>'
})
const App = {
  template:'<div>Hello-02</div>'
}
/* eslint-disable no-new */
new Vue({
  el: '#app',

//  components: { App }, ES6语法
  components: { App:App },

  template: `<div>
    <hello></hello>
    <App></App>
  </div>`
})

directives

//自定义指令集
类型：Object
//包含 Vue 实例可用指令的哈希表

//全局注册自定义指令集
当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})


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

main.js

import Vue from 'vue'

Vue.config.productionTip = false


/* eslint-disable no-new */
var vm = new Vue({
  el: '#app',
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  },
  template: '<input v-focus>'
})

filters

//自定义局部过滤器
类型：Object
//包含 Vue 实例可用过滤器的哈希表。

// 注册全局的过滤器
Vue.filter('my-filter', function (value) {
  // 返回处理后的值
})

局部注册使用过滤器的例子
index.html

main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'

Vue.config.productionTip = false

Vue.filter('formatId',function (value) {
  if(!value) value = 0
  return 'id-'+ value
})

/* eslint-disable no-new */
var vm = new Vue({
  el: '#app',
  filters: {
    //首字母大写
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  },
  template: '<div  v-bind:id="rawId | formatId"> {{ message | capitalize }}</div>',
  data: function () {
    return {
      message:'hello world',
      rawId:'1'
    }
  }
})