全局组件的第一种定义方式
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<!--注意:如果组件的名称采用的是驼峰命名方式,则需要用-隔开-->
<!--例如:下面定义的名称为myCom1的组件,就需要<my-Com1></my-Com1>这样来使用-->
<my-com1></my-com1>
<mycom2></mycom2>
<mycom3></mycom3><!--简写1-->
<mycom4></mycom4><!--简写2-->
<mycom5></mycom5><!--简写3-->
<mycom6></mycom6><!--简写4-->
</div>
<template id="temp3">
<div>
<p>简写3的组件</p>
</div>
</template>
<template id="temp4">
<div>
<p>简写4的组件</p>
</div>
</template>
<script>
//定义全局Vue组件
//Vue.extend 返回的是一个“扩展实例构造器”,即:组件的模板对象
/*Vue.component 是用来全局注册组件的方法,其作用是将通过 Vue.extend 生成的扩展实例构造器注册(命名)为一个组件
可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时,会自动调用类似于 new myVue 这样的构造函数来生成组件实例,
并挂载到自定义元素上,当然实际情况要比这复杂得多,还需要处理 props 数据传递、slot 内容分发、自定义事件、组件生命周期……事宜*/
var com1 = Vue.extend({
template: "<h3>我是组件</h3>" //通过template属性,指定了组件要展示的HTML结构
})
Vue.component("myCom1", com1); //myCom1是我定义的组件名字,com1是组件的内容 (驼峰命名)
Vue.component("mycom2", com1); //mycom2是我定义的组件名字,com1是组件的内容(非驼峰命名)
//简写1
Vue.component("mycom3", Vue.extend({
template: "<h4>简写1的组件</h4>"
}))
//简写2
//相对上面的简写,这里更是简单了,直接省略Vue.extend()
//这种写法虽然简单点,但是它有他的问题, 就是这个组件只能有且只有一个根元素
Vue.component("mycom4", {
//template: "<span>简写2的组件</span><span>哈哈</span>" 错误的写法;需要用在外面用一个div将span两个span元素包裹起来,形成一个唯一的根元素
template: "<div><span>简写2的组件</span><span>哈哈</span></div>"
});
//简写3
//这种写法,就是直接将模板设定为指定的模板
Vue.component("mycom5", {
template: "#temp3", //它的模板为id为temp的这个模 :<template id="temp5"></template>
})
//简写4
//这中方式就更简单了,可以直接得到一个组件的模板对象,对象名为mycom6 (在Vue路由中,需要用到这中方式声明的组件对象)
//这里仅仅是声明了一个组件对象,所以不能直接在Vue中直接使用<mycom6></mycom6>,如果想要使用就需要在将这个组件对象注册为全局,或者私有的组件
//例如:定义全局组件Vue.component("mycom6", mycom6); 或者在Vue中定义私有组件 components: { mycom6 }
var mycom6 = { template: "#temp4" }
//Vue.component("mycom6", mycom6); //声明一个名字为mycom6的全局组件,它使用的是上面定义的那个mycom6组件模板对象
var vm = new Vue({
el: "#app",
data: {},
components: {
mycom6 //这里仅仅将我们声明好的组件对象放到这里就可以了。就可以在页面使用了:如<mycom6></mycom6>
}
})
</script>
</body>
</html>
全局组件定义的第二种方式:推荐
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<mycom></mycom> <!--组件的使用方式-->
</div>
<template id="temp"><!--组件模板-->
<div>
<h3>这是通过template元素,在外部定义的组件结构,这个方式有代码的智能提示和高亮</h3>
<span>好用,不错</span>
</div>
</template>
<script>
//定义全局Vue组件 组件名叫mycom,组件的内容是#temp所指向的模板内容
Vue.component("mycom", {
template: "#temp"
});
var vm = new Vue({ el: "#app" })
</script>
</body>
</html>
私有组件的定义方式
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<mycom></mycom> <!--组件的使用方式-->
<login></login>
</div>
<template id="temp">
<!--组件模板-->
<div>
<h3>这是通过template元素,在外部定义的组件结构,这个方式有代码的智能提示和高亮</h3>
<span>好用,不错</span>
</div>
</template>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {},
components: { //components中是定义私有组件的
//定义个名字为mycom的私有组件
"mycom": {
template: "#temp"
},
//定义个名字为login的私有组件
"login": {
template: "<h1>这里是登陆窗口</h1>"
}
}
})
</script>
</body>
</html>
组件中data的使用
在Vue中,除了vue实例有data外,组件是可以有自己的data和methods
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<mycom1></mycom1> <!--组件的使用方式-->
</div>
<template id="temp">
<!--组件模板-->
<div>
<h3>{{msg}}</h3> <!--这个msg是组件中的data-->
<span>{{name}}</span>
</div>
</template>
<script>
//1>组件可以有自己的data数据
//2>组件中的data与vue实例中的data有点不一样,vue实例中的data可以是一个对象,但是组件中的data只能是一个函数,并且函数必须返回一个对象
Vue.component("mycom1", {
template: "#temp",
data: function () { //组件中的data与vue实例中的data有点不一样,他只能是一个函数,并且函数必须返回一个对象(将需要的数据放在对象中返回)
return {
name:'张学友',
msg: "我是data中的数据"
};
}
})
var vm = new Vue({
el: "#app",
data: {},
methods: {}
})
</script>
</body>
</html>
组件中的data和methods
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<mycom1></mycom1> <!--组件的使用方式-->
<hr />
<mycom1></mycom1> <!--组件的使用方式-->
</div>
<!--组件模板-->
<template id="temp">
<div>
<input type="button" value="+1" v-on:click="increment" /> <!--increment是组件中的方法-->
<input type="text" v-model="count" /><!--count是组件中的count-->
<h3>{{count}}</h3><!--count是组件中的count-->
</div>
</template>
<script>
//1>组件可以有自己的data数据 和 methods 方法
//2>组件中的data与vue实例中的data有点不一样,vue实例中的data可以是一个对象,但是组件中的data只能是一个函数,并且函数必须返回一个对象
Vue.component("mycom1", {
template: "#temp",
data: function () { //组件中的data与vue实例中的data有点不一样,他只能是一个函数,并且函数必须返回一个对象(将需要的数据放在对象中返回)
return {
count:0
}
},
methods: {
increment: function () {
this.count += 1;
}
}
})
var vm = new Vue({
el: "#app",
data: {},
methods: {}
})
</script>
</body>
</html>
使用component占位符实现组件的切换
一般情况下,在同一个页面,我们要实现不同的功能(比如登录,注册)可以采用切换登录,注册的模块来实现不同的显示
这样就不用登录搞一个页面,注册也搞一个页面了。我们根据不同的需求来确定这个页面应该显示什么内容,比如下面的:
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<a href="" v-on:click.prevent="comName='login'">登陆</a>
<a href="" v-on:click.prevent="comName='register'">注册</a>
<!-- Vue提供了component来展示对应名称的组件-->
<!-- component 是一个占位符,v-bind:is属性可以用来指定要展示的组件名称-->
<!-- 例如v-bind:is="comName" 就表示这里要展示comName变量的值这个组件 ,例如:comName的值为login 那么这里就展示login这个组件-->
<component v-bind:is="comName"></component>
</div>
<!--组件模板-->
<template id="login">
<div>
<h3>登陆模块</h3>
</div>
</template>
<template id="register">
<div>
<h3>注册模块</h3>
</div>
</template>
<script>
Vue.component("login", { //定义一个登陆组件
template: "#login",
})
Vue.component("register", { //定义一个注册组件
template: "#register",
})
var vm = new Vue({
el: "#app",
data: {
comName: 'login'//默认展示登陆模块
}
})
</script>
</body>
</html>