vue.js,基础用法实例

来源：互联网发布：程序员算法是什么编辑：程序博客网时间：2024/06/07 02:21
vue的基础用法实例

v-if , v-else
v-on ( 缩写 @ )
v-bind ( 缩写 : )
v-for
v-model
methods
el
watch
data
demo可直接复制使用，自行下载vue.js文件，助于熟悉基础
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>to-do-list</title>    <style type="text/css">        #vuedotolist{width: 400px;height: 500px;border: 2px solid #333;border-radius: 3px;margin:60px auto;position: relative;}        .edit{width: 80%;height: 35px;line-height: 35px;margin-top:30px;box-shadow: 0 0 4px #ccc;border: 1px solid #ccc;border-radius: 4px;outline: 0;box-sizing: border-box;margin-left: 10%;text-indent: 20px;}        .list{margin:0 auto;max-width: 80%;height: 60%;overflow-y: auto;}        .unit{position: relative;padding: 10px 0;border-bottom: 1px solid #efefef;}        .unit:last-child{border-bottom: 0;}        .finish{text-decoration: line-through;color: #ccc;}        .del{background: red;text-decoration: none;position: absolute;right: 20px;font-size: 12px;border:0;padding: 2px 5px;border-radius: 5px;color: #fff;cursor:pointer;}        .empty{font-size: 14px;color: #928787;text-align: center;padding: 10px 0;}        .number{position: absolute;right: 40px;bottom: 0px;}    </style></head><body>    <div id="vuedotolist">        <input  v-model="task.content" type="text"  class="edit" placeholder="编写任务" @keydown.enter="addTask" />        <p v-if="list.length==0" class="empty">今天暂无安排...</p>        <div class="list" v-else>            <div class="unit" v-for="(item,index) in list">                <input type="checkbox" :checked="item.finished" @click="changeState(index)" />                <span :class="{'finish':item.finished}">{{item.content}}</span>                <button @click="removeTask(index)" class="del">删除</button>            </div>        </div>        <p class="number">任务数量：{{list.length}}</p>    </div></body><!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> --><script src="src/vue.js"></script><script>    const STORAGE_KEY = 'to-do-list'    var fetch=function(){        return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')    };    var save=function(items){        window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))    };    const vuedotolist = new Vue({        el:"#vuedotolist",        data:{            //默认            task:{                content:'',       //内容                finished:false,   //未完成            },            //任务列表，默认取localStorage的数据            list:fetch()        },        methods:{            //添加新的任务            addTask:function(){                if (this.task.content != "") {                    this.list.push(this.task);                    // save(this.task);                    //存入list之后，重置task                    this.task={                        content:'',                        finished:false,                        // deleted:false                    }                }            },            //取反值，修改状态            changeState:function(index){                let curSate=this.list[index].finished;                this.list[index].finished=!curSate;            },            //移除当前的数据，重新返回数组给lsit            removeTask:function(index){                this.list.splice(index,1);            }        },        //监听，一旦list[]发生变化，存入localStorage数据        watch:{            list:{                handler:function(){                    save(this.list);                }            }        }    })</script></html>
阅读全文
0 0