Vue全局API
Vue构造器的延伸
Vue.extend返回的是扩展实例构造器,经常和Vue.component用来生成组件,需要实例化并挂载于自定义元素上。
下面这个例子是Vue.extend扩展实例构造器的简单demo,不再使用new Vue()进行构造。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue扩展实例构造器</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>这是Vue.extend扩展实例构造器的实例</h1>
<div id="app"></div>
<script type="text/javascript">
var test=Vue.extend({
template:'<p><a :href="okURL">这是扩展实例构造器</a></p>',
data:function(){
return{
messages:'这是一个链接',
okURL:'http://www.baidu.com'
}
}
})
new test().$mount('#app')
</script>
</body>
</html>
运行结果:
附加:
1.使用自定义标签时不需要传递任何参数,只是一个静态标签,在这时调用 template进行模板构造。
2.在使用Vue.extend书写构造器时,不再使用data:{}进行属性的定义,而是采用以下的方式:
data:function(){
return{
messages:'这是一个链接',
okURL:'http://www.baidu.com'
}
}
3.使用Vue.extend进行简单的构造:
var demo=Vue.extend({...})
4.进行实例化并挂载到自定义元素
new demo().$mount('#app')
//new demo().$mount('.app')---class
//new demo().$mount('author')---自定义标签