<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<style>
.component{
border: 1px solid #000;
padding: 10px;
}
</style>
</head>
<body>
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<div id="app2">
<my-component></my-component>
</div>
<script>
new Vue({
el:'#app',
components:{
//register
'my-component':{
template:' <div class="component">A custiom component of Vue!</div>'
}
}
});
new Vue({
el:'#app2',
components:{
//register
'my-component':{
template:' <div class="component">A custiom component of Vue2!</div>'
}
}
});
</script>
</body>
</html>
区域注册就是一个vue下一个值 还有一种方法是全局注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<style>
#app{
margin: 1em;
font-size: 1.2em;
}
.component{
border: 1px solid #000;
padding: 10px;
}
</style>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<div id="app2">
<my-component></my-component>
</div>
<div id="app3">
<my-component></my-component>
</div>
<script>
//register
Vue.component('my-component',{
template:'<div class="component">A custiom component of Vue!</div>'
});
//create root instance
new Vue({
el:'#app'
});
new Vue({
el:'#app2'
});
new Vue({
el:'#app3'
});
</script>
</body>
</html>
这种写法就省了两个vue都写代码
接下来是比较难得样例。可能你现在看不懂。我先贴出来下文,慢慢分解他
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
<meta charset="UTF-8">
<title>Vue - Component System</title>
<style>
body {
font-size: 1.8em;
}
#app {
display: block;
width: 1000px;
height: 500px;
overflow: hidden;
}
.header {
width: 100%;
height: 80px;
line-height: 80px;
text-align: center;
background-color: #eee;
}
.main {
position: relative;
width: 60%;
height: 100%;
text-align: center;
background-color: #fff;
float: left;
}
.aside {
width: 40%;
height: 100%;
line-height: 300px;
text-align: center;
background-color: pink;
float: right;
}
.block {
display: inline-block;
width: 85px;
height: 85px;
background-color: green;
margin: 20px;
color: #ffffff;
font-size: 26px;
line-height: 85px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<custom-header msg="Header"></custom-header>
<custom-main></custom-main>
<custom-aside></custom-aside>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script>
var CustomBlock = Vue.extend({
data() {
return {
content: 'b'
}
},
template: '<div class="block">{{content}}</div>',
});
var CustomMain=Vue.extend({
template:' <div class="main">\n' +
' <div style="margin: 10px">Main\n </div>' +
' <custom-block></custom-block>\n' +
' <custom-block></custom-block>\n' +
' <custom-block></custom-block>\n' +
' <custom-block></custom-block>\n' +
' <custom-block></custom-block>\n' +
' <custom-block></custom-block>\n' +
' </div>\n' +
' ',
components:{
CustomBlock
}
});
var CustomHeader=Vue.extend({
//template
// template:' <div class="header">{{great}}{{msg}}</div>'
render:function (createElement) {
return createElement('div',{
class:'header'
},[this.greet,' ',this.msg]);
},
data(){
return{
greet:'Hi'
}
},
props:{
msg:{
type:String,
default:'Hello'
}
}
});
var CustomAside=Vue.extend({
template:'<div class="aside">Aside</div>\n'
});
new Vue({
el:'#app',
components:{
CustomMain,
CustomHeader,
CustomAside
}
});
</script>
</div>
</body>
</html>
解析:
style 略
h5
<div id="app">
<custom-header msg="Header"></custom-header>
<custom-main></custom-main>
<custom-aside></custom-aside>
</div>
这前面模版已经知道是什么东西了 唯有一个msg 我们不知道是咋来的 具体分析代码
js
我们可以看到 他在这个地方用到了
var CustomHeader=Vue.extend({
//template
// template:' <div class="header">{{great}}{{msg}}</div>'
render:function (createElement) {
return createElement('div',{
class:'header'
},[this.greet,' ',this.msg]);
},
data(){
return{
greet:'Hi'
}
},
props:{
msg:{
type:String,
default:'Hello'
}
}
});
props是啥。。。先不着急 从第一个属性慢慢拆解
Vue.extend()
官方地址全局 API
-
参数:
{Object} options
-
用法:
使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
data
选项是特例,需要注意 - 在Vue.extend()
中它必须是函数 -
<div id="mount-point"></div>
// 创建构造器 var Profile = Vue.extend({ 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>
官方地址render
// template:' <div class="header">{{great}}{{msg}}</div>'
render:function (createElement) {
return createElement('div',{
class:'header'
},[this.greet,' ',this.msg]);
},
模版替代方案。他和上面的模版写法的意思是一样的
data(){
return{
greet:'Hi'
}
},
data怎么这么写了
我们之前的data 是在Vue类中的。。可以这么写
data:{greet:'Hi'}
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
data: function () {
return { a: 1 }
}
})
官方教程:data
终于到我们想解开的问题这里了
props:{
msg:{
type:String,
default:'Hello'
}
}
官方说你要懂这个就推荐你学学基础组件
该页面假设你已经阅读过了组件基础。如果你还对组件不太了解,推荐你先阅读它。
那我们先去看看基础组件去吧。。德智体美劳全面学习
。。。。。。。。。学习中。。。。。。。。。。。
看着还挺好玩,,我之前都没看过。
ding 发现一个关于Prop的 点击可以打开
通过 Prop 向子组件传递数据
早些时候,我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话,它是没有办法使用的。这也正是 prop 的由来。
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题,我们可以用一个 props
选项将其包含在该组件可接受的 prop 列表中:
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。在上述模板中,你会发现我们能够在组件实例中访问这个值,就像访问 data
中的值一样。
一个 prop 被注册之后,你就可以像这样把数据作为一个自定义特性传递进来:
一个 prop 被注册之后,你就可以像这样把数据作为一个自定义特性传递进来:
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
My journey with Vue
Blogging with Vue
Why Vue is so fun
然而在一个典型的应用中,你可能在 data
里有一个博文的数组:
new Vue({
el: '#blog-post-demo',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
并想要为每篇博文渲染一个组件:
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
></blog-post>
如上所示,你会发现我们可以使用 v-bind
来动态传递 prop。这在你一开始不清楚要渲染的具体内容,比如从一个 API 获取博文列表的时候,是非常有用的。
到目前为止,关于 prop 你需要了解的大概就这些了,如果你阅读完本页内容并掌握了它的内容,我们会推荐你再回来把 prop 读完。
这个又一次体现了双向绑定啊。 可与把网络数据返回给html 我们之前用 data 就是把数据发给了html
接着往上往下还有一个
CustomBlock 这个用法我们上述已经讲解
CustomMain 模版套用模版,
CustomAside 直接一个模版更简单
最后一段陌生代码
new Vue({
el:'#app',
components:{
CustomMain,
CustomHeader,
CustomAside
}
});
这就是使用extend出来的䧋了。也很好理解 ,至此 就讲解完成了