vue + element-ui 简单的入门小例子——todolist
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
1. 这里不使用vue-cli来构建,而是直接创建一个html,IE不支持
2. 引入Vue和element-ui,注意vue要先于element-ui的js引入,代码如下:
<!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">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>todolist</title>
</head>
<div id="app">
<!-- element的input组件 -->
<el-input></el-input>
</div>
<body>
<script>
new Vue({ //记得声明,不然看不到element的input组件
el: '#app',
data: {
},
methods: {//这里用于定义方法
},
computed: {//计算属性
}
})
</script>
</body>
</html>
只要引入 js 和 css 成功,打开页面可以看到如下
接下来用HTML,一个输入框,一行字显示完成和未完成的事项数量,和事项列表,然后添加几个简单的方法
<body>
<div id="app">
<el-container>
<el-header height="20">
<h1>ToDoList</h1>
</el-header>
<el-main>
<el-input placeholder="回车添加待办事项" class="todoinput" @keyup.enter.native="add" v-model="newtodo.content"></el-input>
<p>进行中:{{ todolist.length }} 已完成:{{ donenum }}</p>
<el-row v-for="(item, index) in todolist" class="list-row">
<el-col :xs="2" :sm="1" :md="1" :lg="1" :xl="1" class="check" :class="{ red: !todolist[index].done, 'green': todolist[index].done }">
<el-checkbox size="mini" v-model="item.done"></el-checkbox>
</el-col>
<el-col :xs="20" :sm="22" :md="22" :lg="22" :xl="22">
<input type="text" v-model="item.content" class="ipcont" :class="{done: todolist[index].done}">
</el-col>
<el-col :xs="2" :sm="1" :md="1" :lg="1" :xl="1" class="close">
<i class="el-icon-close" @click="del(index)"></i>
</el-col>
</el-row>
</el-main>
</el-container>
</div>
<script>
var doit = new Vue({
el: '#app',
data: {
newtodo: {
content: '',
done: false
},
todolist: [
{
content: '现在开始吧',
done: false
}
]
},
methods: {
add: function () {
if (this.newtodo.content) {
this.todolist.push(this.newtodo)
this.newtodo = { content: '', done: false }
}
},
del: function (index) {
this.todolist.splice(index, 1)
}
},
computed: {
donenum: function () {
return this.todolist.filter(function (val) { return val.done }).length
}
}
})
</script>
接下来解释一下代码:
<!--input回车触发add函数,添加.native是因为element-ui对input有封装,不添加无法触发-->
@keyup.enter.native="add
<!--v-model="newtodo.content,双向绑定,输入的内容-->
。。 v-model="newtodo.content"
用浏览器查看页面代码可见,我们绑定的 class=”todoinput是在input的外部。
<!--循环data里todolist的内容 item是每一项的内容, index是索引-->
v-for="(item, index) in todolist"
<!--通过done的值来绑定class,当done是true时绑定green表示完成,false时绑定red这个class-->
:class="{ red: !todolist[index].done, 'green': todolist[index].done }
<!--双向绑定checkbox,item.done的值判断是否选中-->
<el-checkbox size="mini" v-model="item.done"></el-checkbox>
<!--给input绑定一个删除线的class,当done为true表示完成时就添加这个class-->
<input type="text" v-model="item.content" class="ipcont" :class="{done: todolist[index].done}">
<!--点击出发删除函数,会把index传给自己定义del函数,-->
<i class="el-icon-close" @click="del(index)"></i>
//if判断输入内容是否为空,不为空就把输入的内容添加到todolist
//添加后把input的内容复位
add: function () {
if (this.newtodo.content) {
this.todolist.push(this.newtodo)
this.newtodo = { content: '', done: false }
}
},
//这里很好理解,点击就删除,用的是原生js的splice()
del: function (index) {
this.todolist.splice(index, 1)
}
//计算属性,filter()把,done为true的返回出来,然后用length得出为true的一共有几个
//在HTML部分的 “已完成:{{ donenum }}” 把已完成的显示到页面上
donenum: function () {
return this.todolist.filter(function (val) { return val.done }).length
}
接下来是样式,很简单,不做解释
<style>
/*#FBFBFB #B9E1DC #F38181 #756C83 */
#app {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
color: #756C83;
}
.el-header {
text-align: center;
}
.todoinput {
margin-bottom: 40px;
}
.list-row {
height: 40px;
background-color: #fbfbfb;
margin-bottom: 5px;
}
.check {
text-align: center;
line-height: 40px;
}
.red {
border-left: #ef5f65 2px solid;
}
.green {
border-left: #B9E1DC 2px solid;
}
.ipcont {
width: 90%;
margin-top: 8px;
border: 0;
line-height: 24px;
background-color: transparent;
font-size: 16px;
color: #756C83;
}
.close {
text-align: center;
line-height: 40px;
}
.el-icon-close {
cursor: pointer;
}
.el-icon-close:hover {
color: #ef5f65;
}
.done {
text-decoration: line-through;
}
</style>
如果本地存储,可以用HTML的localStorage来存储,在script变迁内添加如下代码
var STORAGE_KEY = 'todolist'
function fetch() {
return JSON.parse(window.localStorage.getItem(STORAGE_KEY)
|| '[]')
}
function save(items) {
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
}
再通过watch来监听todolist的变化,一旦变化就通过save()保存,每次进入时通过fetch()读取
完整代码如下:
<!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">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>todolist</title>
</head>
<body>
<div id="app">
<el-container>
<el-header height="20">
<h1>ToDoList</h1>
</el-header>
<el-main>
<el-input placeholder="回车添加待办事项" class="todoinput" @keyup.enter.native="add" v-model="newtodo.content"></el-input>
<p>进行中:{{ todolist.length }} 已完成:{{ donenum }}</p>
<el-row v-for="(item, index) in todolist" class="list-row">
<el-col :xs="2" :sm="1" :md="1" :lg="1" :xl="1" class="check" :class="{ red: !todolist[index].done, 'green': todolist[index].done }">
<el-checkbox size="mini" v-model="item.done"></el-checkbox>
</el-col>
<el-col :xs="20" :sm="22" :md="22" :lg="22" :xl="22">
<input type="text" v-model="item.content" class="ipcont" :class="{done: todolist[index].done}">
</el-col>
<el-col :xs="2" :sm="1" :md="1" :lg="1" :xl="1" class="close">
<i class="el-icon-close" @click="del(index)"></i>
</el-col>
</el-row>
</el-main>
</el-container>
</div>
<script>
var STORAGE_KEY = 'todolist'
function fetch() {
return JSON.parse(window.localStorage.getItem(STORAGE_KEY)
|| '[]')
}
function save(items) {
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
}
//--------------------------------------------------
var doit = new Vue({
el: '#app',
data: {
newtodo: {
content: '',
done: false
},
todolist: fetch()
},
methods: {
add: function () {
if (this.newtodo.content) {
this.todolist.push(this.newtodo)
this.newtodo = { content: '', done: false }
}
},
del: function (index) {
this.todolist.splice(index, 1)
}
},
computed: {
donenum: function () {
return this.todolist.filter(function (val) { return val.done }).length
}
},
watch: {
todolist: {
handler(items) {
save(items)
},
deep: true
}
}
})
</script>
<style>
/*#FBFBFB #B9E1DC #F38181 #756C83 */
#app {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
color: #756C83;
}
.el-header {
text-align: center;
}
.todoinput {
margin-bottom: 40px;
}
.list-row {
height: 40px;
background-color: #fbfbfb;
margin-bottom: 5px;
}
.check {
text-align: center;
line-height: 40px;
}
.red {
border-left: #ef5f65 2px solid;
}
.green {
border-left: #B9E1DC 2px solid;
}
.ipcont {
width: 90%;
margin-top: 8px;
border: 0;
line-height: 24px;
background-color: transparent;
font-size: 16px;
color: #756C83;
}
.close {
text-align: center;
line-height: 40px;
}
.el-icon-close {
cursor: pointer;
}
.el-icon-close:hover {
color: #ef5f65;
}
.done {
text-decoration: line-through;
}
</style>
</body>
</html>
就这么多了。
可以点这里看看效果
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)