135 lines
3.1 KiB
HTML
135 lines
3.1 KiB
HTML
<!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>Vue 组件</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
|
||
<style>
|
||
.on {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
|
||
<div id="app">
|
||
|
||
<input v-model="userInput" type="text" placeholder="输入备忘内容">
|
||
<button @click="addList">提交</button>
|
||
|
||
|
||
<ul v-if="listArray.length != 0">
|
||
<li v-for="(item,index) in listArray"
|
||
:key="index"
|
||
@click="changeOn(index)"
|
||
:class=" index == currentIndex ? 'on' : '' ">
|
||
{{ item }}
|
||
<span @click="deleteTag(index)"> x </span>
|
||
</li>
|
||
</ul>
|
||
|
||
<p v-else>抱歉，没有数据</p>
|
||
|
||
<!-- <aa-button @father="getChildEvent" :a="list"/> -->
|
||
|
||
<v-jubu></v-jubu>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
// 实现一个任务便签
|
||
// 组件 ？积木
|
||
// 全局注册
|
||
// 局部注册
|
||
// 父子组件
|
||
// 父子组件的数据传递
|
||
// 两种方式：
|
||
// 父 --> 子 props
|
||
// 子 --> 父 ，不允许 props，但是可以通过 $emit 触发事件来回调 提交数据给父
|
||
// 官方文档地址：https://cn.vuejs.org/v2/api/#vm-emit
|
||
|
||
// 局部注册
|
||
// 1: 先定义局部组件
|
||
// 2: 在你需要用的地方(父组件)进行注册，然后使用。
|
||
|
||
// 全局注册
|
||
// 官方文档地址：https://cn.vuejs.org/v2/guide/components-registration.html
|
||
// Vue.component('aa-button', {
|
||
// props: ['a','b'],
|
||
// data () {
|
||
// return {
|
||
|
||
// }
|
||
// },
|
||
// methods: {
|
||
// hello() {
|
||
// this.$emit("father","aa-button 的数据")
|
||
// }
|
||
// },
|
||
// template: `
|
||
// <ul>
|
||
// <li @click="hello" v-for="(item,index) in a" :key="index"> {{ item.title }} </li>
|
||
// </ul>
|
||
// `
|
||
// });
|
||
|
||
|
||
// 局部注册
|
||
var childenComponents = {
|
||
template: `<h2>{{ msg }}</h2>`,
|
||
data () {
|
||
return {
|
||
msg: "我是局部注册的组件"
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
}
|
||
};
|
||
|
||
new Vue({
|
||
el: '#app',
|
||
data : {
|
||
userInput: null,
|
||
listArray: [],
|
||
currentIndex: null,
|
||
list: [
|
||
{ id: 1,title: '哈哈哈哈' },
|
||
{ id: 2,title: '顶顶顶顶' }
|
||
],
|
||
listArr: [
|
||
{ id: 1,title: '哈哈哈哈wwwww' },
|
||
{ id: 2,title: '顶顶顶顶www' }
|
||
]
|
||
},
|
||
created() {
|
||
console.log(this.userInput)
|
||
},
|
||
methods: {
|
||
addList() {
|
||
this.listArray.push(this.userInput)
|
||
this.userInput = null
|
||
},
|
||
deleteTag(key) {
|
||
console.log(key)
|
||
this.listArray.splice(key,1)
|
||
},
|
||
changeOn (key) {
|
||
this.currentIndex = key
|
||
},
|
||
getChildEvent (key) {
|
||
console.log("父组件接收到子组件传递过来的数值为：", key)
|
||
}
|
||
},
|
||
components: {
|
||
'v-jubu': childenComponents
|
||
},
|
||
})
|
||
</script>
|
||
|
||
</body>
|
||
</html> |