<!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>
</head>
<body>
<div id="app">
<div>
<add-couse v-model= couse @input= onInput @add-couse= addCouse ></add-couse>
<couses-list :couses= list ></couses-list>
</div>
</div>
<script src="./js/vue.js"></script>
<script>
// add-couse
Vue.component( add-couse , {
props: [ value ],
template: `
<div>
<input type= text :value= value @input= onInput @keyup.enter= addCouse />
<button @click= addCouse >add</button>
</div>
`,
methods: {
addCouse() {
this.$emit( add-couse )
},
onInput(e) {
this.$emit( input , e.target.value)
}
}
})
// couse-list
Vue.component( couses-list , {
props: {
couses: {
type: Array,
default: []
}
},
created() {
console.log(this.couses)
},
template: `<div>
<p v-for= (em,index) in couses :key= index >{{em}}</p>
</div>`
})
const app = new Vue({
el: #app ,
data() {
return {
couse: 000 ,
list: [ 1 , 2 ,6]
}
},
watch: {
couses(newValue, oldValue) {
console.log(newValue)
}
},
methods: {
onInput(val) {
this.couse = val
},
addCouse() {
this.list.push(this.couse)
this.couse =
}
},
updated () {
console.log(this.list)
},
})
// console.log(app, app.title)
// console.log(app.$options.render)
</script>
</body>
</html>
使用url引入vue库文件使用vue时，Vue.component创建的组件在应用时必须使用闭合标签，否则只能显示其中一会组件
<add-couse v-model= couse @input= onInput @add-couse= addCouse ></add-couse>
<couses-list :couses= list ></couses-list>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
