vue简单案例,vue实例教程
这篇文章主要为大家详细介绍了某视频剪辑软件实现记事本案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现记事本案例的具体代码，供大家参考，具体内容如下
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
！-引入样式-
链接版本=样式表href= ./css/index.css
/头
身体
！-
1.用户输入待办事项，回车后添加到"正在进行",并清空文本框
2.在"正在进行"列表中单击列表项，添加到已完成列表
3.在"已经完成"列表中单击列表项，添加到正在进行列表
4.在响应列表项中点击删除删除该项目。
-
div id=应用程序
页眉
部分
=标题/标签的标签
input type= text v-model= thing placeholder=添加ToDo required= required autocomplete= off @ keydown。13=添加
/部分
/页眉
部分
氘正在进行span { {正在进行的。长度}}/span/h2
ol id=todolist class=演示框
李v-for=(项，索引)进行中：key=item.id
input type= checkbox @ click= addToDone(index) { { item。标题} }
button @click=delGoing(index)删除/按钮
/李
/ol
氘已完成span{{done.length}}/span/h2
ul id=donelist
li v-for=(item，index) in done :key=item.id
输入类型=复选框已选中@ click= addToGoing(index) { { item。标题} }
button @click=delDone(index)删除/按钮
/李
/ul
/部分
/div
页脚
版权副本；2021年todolist.cn
/页脚
脚本src=./vue。js /脚本
脚本
新Vue({
埃尔： #app ，
数据：{
id: 4，
//存储用户输入的信息
事情： ,
/* 正在进行列表*/
正在进行：[{
id: 1，
标题： 吃饭
}, {
id: 2，
标题： 睡觉
}],
//已经完成列表
完成：[{
id: 3，
标题： 打豆豆
}]
},
方法：{
//添加到待办事项
add() {
//组装一个对象，将对象添加到进行的数组中。
让obj={
id: this.id，
标题：这个东西
};
//新的对象产生，id自增，防止编号重复。
this.id
/* 把获取到的值添加到待办事项*/
这个。继续。push(obj)；
//将东西的值设置为空，则输入框自动清空
这个。thing=
},
//添加到已经完成
添加内容(索引){
//将点击的数据从进行的删除，添加到完成的中
//拼接（索引，1)从指数开始，删除一个元素100 .拼接会返回被删除的元素组成的数组。
这个。完成了。推(这个。进行中。拼接(索引，1)[0])
},
/* 添加到正在进行*/
addToGoing(索引){
这个。进行中。推(这个。完成了。拼接(索引，1)[0])
},
/* 从正在进行中删除*/
德尔戈(索引){
拼接（索引，1)
},
/* 从已经完成中删除*/
德尔东(索引){
this.done.splice(索引，1)
}
}
})
/脚本
/body
/html
样式部分
正文{
边距：0;
填充：0;
字体大小：16px
背景：# CDCDCD
}
标题{
高度：50px
背景：# 333;
背景：rgba(47，47，47，0.98)；
}
部分{
边距：0自动；
}
标签{
浮动：左；
宽度：100像素
行高：50px
颜色：# DDD；
字体大小：24px
光标：指针；
字体系列：“Helvetica新“，Helvetica，阿里亚，无衬线；
}
标题输入{
浮动：对；
宽度：60%;
高度：24px
边距-顶部：12px
文本缩进：10px
边框半径：5px
box-shadow: 0 1px 0 rgba(255，255，255，0.24)，0 1px 6px rgba(0，0，0，0.45)inset；
边框：无
}
输入：焦点{
轮廓宽度：0
}
h2 {
位置：相对；
}
跨度{
位置：绝对；
top:2px；
右：5px
显示：内嵌-块；
填充：0 5px
高度：20px
边框半径：20px
背景：# E6E6FA
行高：22px
文本对齐：居中；
颜色：# 666;
字体大小：14px
}
ol，
ul {
填充：0;
列表样式：无；
}
李输入{
位置：绝对；
top:2px；
左：10px
宽度：22px
高度：22px
光标：指针；
}
p {
边距：0;
}
李p输入{
top:3px；
左：40px
宽度：70%;
高度：20px
行高：14px
文本缩进：5px
字体大小：14px
}
李{
高度：32px
行高：32px
背景：# fff
位置：相对；
边距-底部：10px
填充：0 45px
边框半径：3px
边框-左侧：5px纯色# 629A9C
box-shadow: 0 1px 2px rgba(0，0，0，0.07)；
}
开环（同Open Loop）李{
光标：移动；
}
ul li {
左边框：5px纯色# 999;
不透明度：0.5;
}
阿利{
位置：绝对；
top:2px；
右：5px
显示：内嵌-块；
宽度：14px
高度：12px
边框-半径：14px
边框：6px双# FFF；
背景：# CCC
行高：14px
文本对齐：居中；
颜色：# FFF；
字体粗细：粗体；
字体大小：14px
光标：指针；
}
李按钮{
位置：绝对；
右：10px
top:50%；
transform:平移y(-50%)；
}
页脚{
颜色：# 666;
字体大小：14px
文本对齐：居中；
}
@媒体屏幕和（最大设备宽度：620像素){
部分{
宽度：96%;
填充：0 2%;
}
}
@媒体屏幕和（最小宽度：620像素){
部分{
宽度：600像素
填充：0 10px
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。