API(全局配置,全局API)
全局配置
silent
类型:boolean
默认值:false
⽤法
取消Vue所有的⽇志与警告
devtools
类型:boolean
默认值:true(⽣成版为false)
⽤法
// 务必在加载 Vue 之后,⽴即同步设置以下内容
errorHandler
类型:Function
默认值:undefined
⽤法
// handle error
// `info` 是 Vue 特定的错误信息,⽐如错误所在的⽣命周期钩⼦
/
/ 只在 2.2.0+ 可⽤
}
warnHandler(2.4.0新增)
类型:function
默认值:undefined
⽤法
// `trace` 是组件的继承关系追踪
}
为 Vue 的运⾏时警告赋予⼀个⾃定义处理函数。注意这只会在开发者环境下⽣效,在⽣产环境下它会被忽略。ignoreElements
类型: Array<string | RegExp>
默认值: []
⽤法
'my-custom-web-component',
'another-web-component',
// ⽤⼀个 `RegExp` 忽略所有“ion-”开头的元素
// 仅在 2.5+ ⽀持
/^ion-/
]
keyCodes
类型:{[key:string] :number | Array}
默认值:{}
⽤法
v: 86,
f1: 112,
// camelCase 不可⽤
mediaPlayPause: 179,
// 取⽽代之的是 kebab-case 且⽤双引号括起来
"media-play-pause": 179,
up: [38, 87]
}
<input type="text" @dia-play-pause="method">
给 v-on ⾃定义键位别名。
performance(2.2.0新增)
类型:boolean
默认值:false(⾃2.2.3起)
⽤法:
设置为 true 以在浏览器开发⼯具的性能/时间线⾯板中启⽤对组件初始化、编译、渲染和打补丁的性能追踪。只适⽤于开发模式和⽀持performance.mark API 的浏览器上。
productionTip(2.2.0新增)
类型:boolean
默认值:true
⽤法:
设置为 false 以阻⽌ vue 在启动时⽣成⽣产提⽰。
全局API
什么是全局API?
全局API并不在构造器⾥,⽽是先声明全局变量或者直接在Vue上定义⼀些新功能,Vue内置了⼀些全局API。说的简单些就是,在构造器外部⽤Vue提供给我们的API函数来定义新的功能。
参数:{Object} options
⽤法:
使⽤基础Vue构造器,创建⼀个“⼦类”。参数是⼀个包含组件选项的对象。
data选项是特例,需要注意在d()中它必须是函数
<div id="mount-point"></div>
// 创建构造器
var Profile = d({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例,并挂载到⼀个元素上。
new Profile().$mount('#mount-point')
结果如下:
<p>Walter White aka Heisenberg</p>
参数:
{function} [callback]
{Object} [context]
⽤法:
在下次DOM更新循环结束之后执⾏延迟回调。在修改数据之后⽴即使⽤这个⽅法,获取更新后的DOM
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
// DOM 更新了
})
// 作为⼀个 Promise 使⽤ (2.1.0 起新增,详见接下来的提⽰)
.then(function () {
// DOM 更新了
})
2.1.0 起新增:如果没有提供回调且在⽀持 Promise 的环境中,则返回⼀个 Promise。请注意 Vue 不⾃带 Promise 的 polyfill,所以如
果你的⽬标浏览器不原⽣⽀持 Promise (IE:你们都看我⼲嘛),你得⾃⼰提供 polyfill。
Vue.set(target,key,value)
Vue.set的作⽤就是在构造器外部操作构造器内部的数据,属性或者⽅法。⽐如在vue构造器内部定义⼀个count为1的数据,我们构造器外部定义了⼀个⽅法,要每次点击按钮给值加1,就需要⽤到Vue.set.
参数
{Object | Array} target
{string | number} key
{any} value
返回值:设置的值
⽤法
设置对象的属性,如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个⽅法主要⽤于避开Vue不能检测属性被添加的限制
在外部改变数据的三种⽅法
1、⽤Vue.set改变
function add(){
Vue.set(outData,'count',4);
}
2、⽤Vue对象的⽅法添加
3、直接操作外部数据
为什么要有Vue.set的存在
由于javascript的限制,Vue不能⾃动检测以下变动的数组
当你利⽤索引值直接设置⼀个项时,Vue不会为我们⾃动更新
当你修改数组的长度时,Vue不会为我们⾃动更新
Vue.delete(target,key)
参数
{Object | Array} target
{string | number} key/index
⽤法
删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。这个⽅法主要⽤于避开Vue不能检测到属性被删除的限制,但是你应该很少会使⽤它。
Vue.directive(id,[definition])
参数
{string} id
{Function | Object} [definition]
⽤法:
注册或获取全局指令
js
// 注册
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
// 注册 (指令函数)
Vue.directive('my-directive', function () {
// 这⾥将会被 `bind` 和 `update` 调⽤
})
// getter,返回已注册的指令
var myDirective = Vue.directive('my-directive')
Vue.filter(id,[definition])
参数:
{string} id
{Function} [definition]
⽤法:
注册或获取全局过滤器
/ 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
Vueponent(id,[definition])
参数
{string} id
{Function | Object} [definition]
⽤法
注册或获取全局组件。注册还会⾃动使⽤给定的id设置组建的名称
/ 注册组件,传⼊⼀个扩展过的构造器
Vueponent('my-component', d({ /* ... */ }))
// 注册组件,传⼊⼀个选项对象 (⾃动调⽤ d)
Vueponent('my-component', { /* ... */ })
// 获取注册的组件 (始终返回构造器)
var MyComponent = Vueponent('my-component')
局部注册组件和全局注册组件是相对应的,局部注册的组件只能在组件注册的作⽤域⾥进⾏使⽤,其他作⽤域使⽤⽆效
<h1>component组件</h1>
<hr>
<p>全局组件</p>
<div id="app">
<reba></reba>
</div>
<p>局部注册组件</p>
<div id="app1">
<panda></panda>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
javascript全局数组//注册全局组件
Vueponent('reba',{
template:`<div >全局化注册的reba标签</div>`
})
var app=new Vue({
el:'#app',
data:{
}
})
var app1 = new Vue({
el: '#app1',
components:{
'panda':{
template: `<div >局部组件化注册的panda标签</div>`
}
}
})
</script>
<h1>component组件的props属性设置</h1>
<hr>
<div id="app">
<panda v-bind:here="message"></panda>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message:'SiChuan'
},
components: {
'panda':{
template: `<div >panda 来⾃{{here}}</div>`,
props: ['here']
}
}
})
</script>
Vue.use(plugin)
参数:{Object | Function} plugin
⽤法:
安装vue.js插件。如果插件是⼀个对象,必须提供install⽅法。如果插件是⼀个函数,它会被作为install⽅法。install⽅法调⽤时,会将Vue作为参数传⼊。
当install⽅法被同⼀个插件多次调⽤,插件将只会被安装⼀次。
Vuepile(template)
参数 {string} template
⽤法:在render函数中编译模板字符串。只在独⽴构建时有效
var res = Vuepile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: der,
staticRenderFns: res.staticRenderFns
})
template制作模板
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论