2-2.Vue全局API

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')---自定义标签
发布了32 篇原创文章 · 获赞 3 · 访问量 508

猜你喜欢

转载自blog.csdn.net/weixin_43913219/article/details/104040019