[ADD]组件
This commit is contained in:
parent
c5cacb5b99
commit
4a6f0067b1
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||||
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title></title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="">
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 7]>
|
||||
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
|
||||
<![endif]-->
|
||||
<div id="itany">
|
||||
<button @click="flag='my-hello'">显示hello组件</button>
|
||||
<button @click="flag='my-world'">显示world组件</button>
|
||||
<div>
|
||||
<keep-alive>
|
||||
<component :is="flag"></component>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var vm = new Vue({
|
||||
el: '#itany',
|
||||
data: {
|
||||
flag: 'my-hello'
|
||||
},
|
||||
components: {
|
||||
'my-hello': {
|
||||
template: '<h3>我是hello组件：{{x}}</h3>',
|
||||
data(){
|
||||
return {
|
||||
x: Math.random()
|
||||
}
|
||||
}
|
||||
},
|
||||
'my-world': {
|
||||
template: '<h3>我是world组件: {{y}}</h3>',
|
||||
data(){
|
||||
return {
|
||||
y: Math.random()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||||
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title></title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="">
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 7]>
|
||||
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
|
||||
<![endif]-->
|
||||
<div id="example-1">
|
||||
<my-component></my-component>
|
||||
<my-demo></my-demo>
|
||||
</div>
|
||||
|
||||
<div id="example-2">
|
||||
<simple-counter></simple-counter>
|
||||
<simple-counter></simple-counter>
|
||||
<simple-counter></simple-counter>
|
||||
</div>
|
||||
|
||||
<div id="counter-event-example">
|
||||
<p>{{total}}</p>
|
||||
<button-counter v-on:increment="incrementTotal"></button-counter>
|
||||
<button-counter v-on:increment="incrementTotal"></button-counter>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var Child = {
|
||||
template: '<div>A custom component! </div>'
|
||||
}
|
||||
var Demo = {
|
||||
template: '<div>A demo</div>'
|
||||
}
|
||||
|
||||
new Vue({
|
||||
el: '#example-1',
|
||||
components: {
|
||||
'my-component': Child,
|
||||
'my-demo': Demo
|
||||
}
|
||||
})
|
||||
|
||||
var data = {counter: 0}
|
||||
Vue.component('simple-counter', {
|
||||
template: '<button v-on:click="counter += 1">{{counter}}</button>',
|
||||
data: function(){
|
||||
return {counter: 0}
|
||||
}
|
||||
})
|
||||
new Vue({
|
||||
el: '#example-2'
|
||||
})
|
||||
|
||||
Vue.component('button-counter', {
|
||||
template: '<button v-on:click="increment">{{ counter }}</button>',
|
||||
data: function() {
|
||||
return {counter: 0}
|
||||
},
|
||||
methods: {
|
||||
increment: function(){
|
||||
this.counter += 1
|
||||
this.$emit("increment")
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
new Vue({
|
||||
el: '#counter-event-example',
|
||||
data: {
|
||||
total: 0
|
||||
},
|
||||
methods: {
|
||||
incrementTotal: function(){
|
||||
this.total += 1
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue