引言
测试基于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'
}
}
})