vue组件基础

最新推荐文章于 2024-10-04 00:46:18 发布

LHaoYan

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量337

点赞数

文章标签： vue.js vue

本文链接：https://blog.csdn.net/Gnemoah6/article/details/114387856

版权

vue组件基础

1、注册组件和使用

1.1、创建组件的关键字 Vue.component()

1.2、注册组件：

Vue.component('list-itme', {
	template: `<li :class="{bianse:current_id==id}" v-on:click="dianji(id)">{{title}}</li>`,
})
//这个里面“list-itme”就是注册的组件，名字可以自己任意取
//这个里面“template”就是组件Dom 结构，里面写html

1.3、如何使用组件：

		<ul>
            <list-itme @change-active="handleActive" v-for="(itme,index) in posts" 		:current_id="current_id" :id="itme.id" :title="itme.title"></list-itme>
        </ul>

<!-- 在我们地模板里面直接使用就行 -->

2、组件中地data

2.1、如何在组件中定义data

Vue.component('list-itme', {
	template: `<li :class="{bianse:current_id==id}" v-on:click="dianji(id)">{{title}}</li>`,
    data.function(){
    return{
    posts: [
                    { id: 1, title: '元旦快乐' },
                    { id: 2, title: '春节快乐' }
                ]
}
}
})

2.2、组件中定义data和根里面地data定义的不同

根里面的data创建时直接就可以创建
组件中的data创建时是使用函数创建一个局部作用域

3、父组件向子组件传递数据

3.1、静态传递

<ul>
<list-itme title="今天时3.5号"></list-itme>
</ul>

Vue.component('list-itme', {
	template: `<li :class="{bianse:current_id==id}" v-on:click="dianji(id)">{{title}}</li>`,
    props:['title']
})
//第一步创建一个组，注册一个组件
//第二步在模板里面使用组件<list-itme></list-itme>
//第三步创建一个props属性来存储title的值
//第四步{{title}}渲染到页面

3.2、动态传递

<ul>
<list-itme v-for:(itme in posts) :title=itme.title></list-itme>
</ul>

Vue.component('list-itme', {
	template: `<li :class="{bianse:current_id==id}" v-on:click="dianji(id)">{{title}}</li>`,
    props:['title'],
    data.function(){
    return{
    posts: [
                    { id: 1, title: '元旦快乐' },
                    { id: 2, title: '春节快乐' }
                ]
}
}
})
//动态传值:title(是使用v-bind指令绑定动态数据)
//动态传值里面的title是不在接受写死的值，而是通过变量的方式转递过去的

3.2、posts的小补充

posts属性可以是一个数组形式的，也可以是一个对象形式的
对象形式的可以规定传递数据的类型
posts:{
	titlt:String
}
//这个时候就要去我们传递title的值必须是一个字符串类型的

4、点击互斥效果案例练习分析

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bianse{
            color: red;
        }
    </style>
</head>

<body>
    <div id="zj">
//v-for="(itme,index) in posts是在遍历posts数组里面的数据
        <ul>
            <list-itme @change-active="handleActive" v-for="(itme,index) in posts" :current_id="current_id" :id="itme.id" :title="itme.title"></list-itme>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        // 1、自定义组件，注册组件（list-itme）
        Vue.component('list-itme', {
            //props里面是存储数据
            props:['title','id',"current_id"],
            //2、template就是组件Dom 结构，里面写html
            template: `<li :class="{bianse:current_id==id}" v-on:click="dianji(id)">{{title}}</li>`,
            //给li注册一个点击事件v-on:click="dianji(id)"，把id的值传出去
            methods:{
                dianji:function(id){
                   this.$emit('change-active',id)
                    //this.$emit('change-active',id)是用监听方式,当我点击dianji时同时触发我们自定义的change-active,同时触发根里面定义的事件,从而达到效果
                }
            }
        })
        let app = new Vue({
            el: "#zj",
            data: {
                current_id:-1,
                posts: [
                    { id: 1, title: '元旦快乐' },
                    { id: 2, title: '春节快乐' }
                ]
            },
            methods:{
                handleActive:function(id){
                    this.current_id=id
                }
            }
        })
    </script>
</body>

</html>

效果图:

在这里插入图片描述

5 自定义的表格组件案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .bg{
            width: 1000px;
            height: 300px;
            border: 1px solid black;
        }
        tr,td,th{
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <list-table :post='posts'></list-table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 1、自定义组件，注册组件（list-table）
        Vue.component('list-table', {
            //2,props存储数据
            props:['post'],
            template: `
            <table class=bg>
            <thead>
                <tr>
                <th>编号</th>
                <th>日期</th>
                <th>姓名</th>
                <th>地址</th>
                <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(itme,index) in post">
                    <td>{{itme.id}}</td>
                    <td>{{itme.date}}</td>
                    <td>{{itme.name}}</td>
                    <td>{{itme.address}}</td>
                    <td><button v-on:click="dele(itme.id)">删除</button></td>
                </tr>
            </tbody>
        </table>
            `,
        methods:{
            dele:function(id){
                let index=this.post.findIndex(itme=>{
                    return itme.id==id
                })
                this.post.splice(index,1)
            }
        }
        })
        let app = new Vue({
            el: "#app",
            data: {
                posts: [
                    {
                        id: 1,
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    },
                    {
                        id: 2,
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    },
                    {
                        id: 3,
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }
                ]
            }
        }) 
    </script>
</body>

</html>