vue动画基础知识

爱你孤身走安详

已于 2022-09-23 20:40:35 修改

阅读量1.7k

点赞数 3

文章标签： vue.js 前端 javascript

于 2022-09-23 20:36:52 首次发布

本文链接：https://blog.csdn.net/linlinaitangtang/article/details/127017361

版权

本文详细介绍了Vue中的组件使用，包括组件的作用、定义与注册、参数传递以及子组件与父组件间的通信。同时，文章还探讨了Vue的过渡效果，如v-show和v-if的差异，以及transition组件的应用，包括enter-active-class和leave-active-class等属性。此外，通过一个简单的增删改查案例展示了如何在实际开发中应用Vue组件。

摘要由CSDN通过智能技术生成

动画:

两个状态形成过渡进入，和离开

（v-show）（v-if）

transittion：单个动画元素

属性;name;名称

enter-active-class=""
指定进出class




leavce-active-class

 指定离开class

产生状态与类：

v-enter-active
进入整个状态

v-enter
进入整个状态


v-enter-to

进入结束状态

组件：

作用;

1.组件是vue的一个重要的特点

2.实现多人协作开发

3.通过组件划分降低开发的难度

4.实现服用,降低重复劳动

组件解释：

组件就是定义好的一功能模块。

建议：多用props，少在组件中使用data（降低组件的耦合性）

1.定义：

注意：template有且只有一个根节点

const steper={
template:`<span></span>`
}

定义与使用:

2.在父组件中注册

components:{
steper:steper
}

3.在组件的模块中使用：

<step></step>

传参：

父传子：

父：

<modal :visible="visible">

</modal>

子：

props：{
visible：{
   type：Boolean,default:false
}
}

子使用:

注意：vue是单向数据流，父组件传递给子组件的props是只读（不能修改）this.visible

子传父：

子：

this.$emit("update:visible",false)

父：

监听事件，修改值

<modal @update:visible="visible=$event">
 
</modal>

插槽：

插槽：组件的嵌套内容

父：

<modal> <input/>
<button>
确定
</button>
</modal>

子组件模板中使用：

template:`<div><slot></slot></div>`

vue的增删改查：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="./js/vue.min.js"></script>
    <style>
        #table{
            margin:0 auto;
            width: 600px;
        }
        table{
            width: 800px;
            text-align: center;
        }

    </style>
</head>

<body>
	<div id="table">
		<div class="app">
			<input type="text" placeholder="标题" v-model="input.name"/>
			<input type="text" placeholder="发布人" v-model="input.user"/>
			<input type="date" placeholder="发布时间" v-model="input.date"  style="color: rgb(248, 17, 17);" />
			<button :disabled="!input.name||!input.user||!input.date" @click="addItem()">新增</button>
		</div>
		<table  border="1" bgColor="aqua" >

				<tr>
					<th>序号</th>
					<th>标题</th>
					<th>发布人</th>
					<th>发布时间</th>
					<th>操作</th>
				</tr>
			<tbody>
				<tr v-for="(v,i) in items" :key="v.id">
					<td><input type="checkbox" v-model="v.check" @change="selectItem(v)" />{{v.id}}</td>
					<td>{{v.name}}</td>
					<td>{{v.user}}</td>
					<td>{{v.date}}</td>
					<td>
                       
						<button  @click="delItem(i)" style="color: red;">删除</button>
						<button @click ="uPdataShow(v)" style="color:blue ;">编辑</button>
					</td>
				</tr>
			</tbody>
		</table>


		<div id="layer" v-show="flag">
			<div class="mask">
				<div class="title">
					编辑
					<span @click="flag = false">x</span>
				</div>
				<div class="content" > 
					<input type="text" placeholder="标题" v-model="emit.name"/>
					<input type="text" placeholder="发布人" v-model="emit.user"/>
					<input type="date" placeholder="发布时间" v-model="emit.date"/>
					<button @click="dataItem()" :disabled="!emit.name||!emit.user||!emit.date">更新</button>
					<button @click="flag = false">取消</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
   
    new Vue({
        el: '#table',
        data: {
            input: {
                name: '',
                user: '',
                data: '',
                check: false,
            },
            items: [
                    {
                        name: 'javascript',
                     user: '华晨宇',
                      date: '2018-02-09',
                       id: 1,
                        check: false 
				},
                {
                    name: 'jquery',
                     user: '吴炫亦',
                      date: '2018-02-09',
                       id: 2,
                        check: false 
				},
                {
                    name: 'vue',
                     user: '张碧晨',
                      date: '2018-02-09',
                       id: 3,
                        check: false 
                },
            ],
            flag: false,
            emit: {
                name: '',
                user: '',
                data: '',
                check: false,
            },
        },
        methods: {
            //添加数据
            addItem() {
                //每次添加的时候item最大的id+1  遍历出所有id 
                var _id = Math.max(...this.items.map(v => v.id)) + 1;
                var { name, user, date, check } = this.input;
                this.items.push({
                    name,
                    user,
                    date,
                    id: _id,
                    check
                });
            },
          
            
            //单选
            selectItem(v) {
                //全部选中时  
                this.checkALL = this.items.every(v => {

                });
            },
            //删除
            delItem(i) {
             
                this.items = this.items.filter((v, index) => index != i);
            },
          uPdataShow(v) {
                this.flag = true;
                //数据回显
                this.emit={
                    name:v.name,
                    user:v.user,
                    date:v.date,
                    id:v.id,
                    check:v.check
                }
            },
            
           dataItem() {
                var { name, user, date, id, check } = this.emit;
                
                this.items.forEach((v, i) => {
                
                    if (v.id == id) {
                        v.name = name;
                        v.user = user;
                        v.date = date,
                        v.check = check;
                    }
                })
                this.flag = false;
            }
        },
    })

</script>
</html>