感谢您的支持,我会继续努力的!
打开微信扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
Powered by RUNCODEX.COM,学的不仅是技术,更是梦想!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue组件</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<new-item></new-item>
<m-com></m-com>
<p>
{{total}}
</p>
<count-com v-on:increment="incrementTotal"></count-com>
</div>
<br/><br/><br/><br/><br/>
<div id="azz">
//这里将无法渲染,局部注册的组件
<m-com></m-com><br/>
<child v-bind:message='msg' v-model="msg"></child>
<br/>
<mtemp></mtemp>
<template id="my-temp">
<label>do something here!</label>
</template>
</body>
</html>
xxxxxxxxxx
//组件名最好是小写,并包含短杠
//注册组件
var data = {message:'Hello World!',counter:1}
var myt = Vue.component('mtemp',{
template:'#my-temp'
})
Vue.component('new-item', {
template: '<div>this is a component!<br/>{{message}}<br/><button v-on:click="counter += 1">{{ counter }}</button></div>',
//每个组件共享数据
/* data: function(){
return data;
}*/
//每个组件私有数据
data:function(){
return {message:"hello",counter:1}
}
Vue.component('child',{
props:['message'],
template:'<span>{{message}}</span>'
//局部注册组件
var child={
template: '<div>this is a child component!</div>'
// 创建根实例
new Vue({
el: '#azz',
data:{
msg:'i am msg',
news:"i am news"
},
//组件
Vue.component('count-com',{
template:'<button v-on:click="increment">{{ counter }}</button>',
return {
counter:0
methods:{
increment:function(){
this.counter +=1
//报告内部有事件发生
this.$emit('increment')
el: '#app',
total: 0
components:{
'm-com':child
incrementTotal:function(){
this.total+=1;
输入 CSS 代码……