案例改写vue - 码农教程

案例一todolist：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style type="text/css">
        .list_con{
            width:600px;
            margin:50px auto 0;
        }
        .inputtxt{
            width:550px;
            height:30px;
            border:1px solid #ccc;
            padding:0px;
            text-indent:10px;           
        }
        .inputbtn{
            width:40px;
            height:32px;
            padding:0px;
            border:1px solid #ccc;
        }
        .list{
            margin:0;
            padding:0;
            list-style:none;
            margin-top:20px;
        }
        .list li{
            height:40px;
            line-height:40px;
            border-bottom:1px solid #ccc;
        }

        .list li span{
            float:left;
        }

        .list li a{
            float:right;
            text-decoration:none;
            margin:0 10px;
        }
    </style>
    <script src="js/vue.min.js"></script>
</head>
<body>

    <div class="list_con">
    <h2>To do list</h2>
        <input type="text" name="" id="txt1" class="inputtxt" v-model="txt">
        <input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="fnAdd">

        <ul id="list" class="list">

            <li v-for="(i, j) in mylist"><span>{{ i }}</span><a href="javascript:;" class="up" @click="fnUp(j)"> ↑ </a><a href="javascript:;" class="down" @click="fnDown(j)"> ↓ </a><a href="javascript:;" class="del" @click="fnDel(j)">删除</a></li>
            <!-- <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> -->

        </ul>

    </div>
    <script>
        var list_con = new Vue({
            el:'.list_con',
            data:{
                mylist:['学习html', '学习css', '学习javascript'],
                txt:''
            },
            methods:{
                fnAdd: function(){
                    if(this.txt == '')
                    {
                        alert('请输入内容');
                        return
                    }
                    // mylist结尾追加数据 -- 用户输入的数据
                    this.mylist.push( this.txt );
                    this.txt = ''
                },
                fnDel: function(index){
                    // 在mylist删除指定的下标的数据  splice(位置下标, 删除个数, 添加的数据)
                    this.mylist.splice(index, 1)
                },
                fnUp: function(index){
                    // 第一个报错
                    if(index == 0)
                    {
                        alert('已经是第一个了');
                        return
                    }
                    // 选中数据  原位置删除  新位置粘贴
                    var myData = this.mylist[index];
                    this.mylist.splice(index, 1);
                    this.mylist.splice(index-1, 0, myData)
                },
                fnDown: function(index){
                    if(index == this.mylist.length-1)
                    {
                        alert('已经是最后一个了');
                        return
                    }
                    var myData = this.mylist[index];
                    this.mylist.splice(index, 1);
                    this.mylist.splice(index+1, 0, myData)
                }
            }
        })
    </script>
</body>
</html>

案例一聊天对话框：

<!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">
    <title>Document</title>
    <style type="text/css">
        .talk_con{
            width:600px;
            height:500px;
            border:1px solid #666;
            margin:50px auto 0;
            background:#f9f9f9;
        }
        .talk_show{
            width:580px;
            height:420px;
            border:1px solid #666;
            background:#fff;
            margin:10px auto 0;
            overflow:auto;
        }
        .talk_input{
            width:580px;
            margin:10px auto 0;
        }
        .whotalk{
            width:80px;
            height:30px;
            float:left;
            outline:none;
        }
        .talk_word{
            width:420px;
            height:26px;
            padding:0px;
            float:left;
            margin-left:10px;
            outline:none;
            text-indent:10px;
        }        
        .talk_sub{
            width:56px;
            height:30px;
            float:left;
            margin-left:10px;
        }
        .atalk{
           margin:10px; 
        }
        .atalk span{
            display:inline-block;
            background:#0181cc;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
        .btalk{
            margin:10px;
            text-align:right;
        }
        .btalk span{
            display:inline-block;
            background:#ef8201;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
    </style>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div class="talk_con">
        <div class="talk_show" id="words">
            <!-- A 字典的person值 -->
            <!-- 如果说话的人是a，加atalk  否则btalk -->
            <div v-for="i in mylist" :class="[i.person == 'A'?'atalk':'btalk']"><span>{{ i.person }}说：{{ i.content}}</span></div>
            <!-- <div class="btalk"><span>B说：还没呢，你呢？</span></div> -->
        </div>
        <div class="talk_input">
            <select class="whotalk" id="who" v-model="who">
                <option value="0">A说：</option>
                <option value="1">B说：</option>
            </select>
            <input type="text" class="talk_word" id="talkwords" v-model="txt">
            <input type="button" value="发送" class="talk_sub" id="talksub" @click="fnSend">
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:'.talk_con',
            data:{
                // 1,2， 3  1 == 说话的人是谁？说话的内容是什么
                mylist:[
                    {person:'A', content:'吃饭了吗？'},
                    {person:'B', content:'还没呢，你呢？'}
                ],
                txt:'',
                who:'0'
            },
            methods:{
                fnSend: function(){
                    if(this.txt == '')
                    {
                        alert('请输入内容');
                        return
                    }
                    // mylist追加结尾数据 -- {}
                    this.mylist.push({person:this.who==0?'A':'B', content:this.txt});
                    this.txt = ''
                }
            }
        })
    </script>
</body>
</html>