<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件多种方法</title>
<script src="assets/js/vue.js"></script>
<script>
window.οnlοad=function(){
let c = Vue.extend({
template:'#hello',
data(){
return{
name:"fengJ"
}
}
});//方法一：用Vue.extend({})创建模板，可以用Vue.component()创建组件，也可以在components:{}里创建组件;也可以同时一块使用。
Vue.component('helloH',c) //Vue.component里的组件名的大写用-隔开写小写比如:helloH:hello-h
let e = Vue.extend({
template:'<div>hello world66</div>'
});
Vue.component('hello3',e)
//方法二：
Vue.component('hello4',{
template:'<div>{{nickname}}</div>',
data(){
return{
nickname:"fj"
}
}
})
let B={
template:"#helloTitle",
data(){
return{
title:"姓名"
}
}
}
var vm=new Vue({
el:"#main",
data(){
return{
num:2
}
},
components:{
'hello':e,
'hello2':c,
//方法三：
'hello5':{
template:"#helloName",
data(){
return {
nicksex:"man"
}
}
},
//方法四：
'hello6':B
}
})
}
</script>
</head>
<template id="hello">
<div>
{{name}}
</div>
</template>
<template id="helloName">
<div>
{{nicksex}}
</div>
</template>
<template id="helloTitle">
<div>
{{title}}
</div>
</template>
<body>
<div id="main">
<div>
{{num}}
</div>
<hello></hello>
<hello-h></hello-h>
<hello2></hello2>
<hello3></hello3>
<hello4></hello4>
<hello5></hello5>
<!-- <hello6></hello6> -->
<!-- 方法四：注：动态用:is;静态用:is-->
<component is='hello6'></component>
</div>
</body>
</html>
9758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
