SOURCE

console 命令行工具 X clear

                    
>
console
        new Vue({
            el:"#app",
//           数据
            data:{
                title:"列表",
                lists:["列表1","列表2","列表3","列表4","列表5","列表6","列表7"],
                sp:"输入",
                val:"请输入数据",
            },
//           函数
            methods:{
                add(){
//                   this指向new Vue
                    if(this.val){
                        this.lists.unshift(this.val);
                        this.val="";
                    }else{
                        this.lists.unshift("");
                    }

                }
            }
        })
    <div id="app">
        <h1 v-html="title"></h1>
        <span v-text="sp"></span>
        <input type="text" v-model="val">
        <button v-on:click="add">添加</button>
        <ul>
            <li v-for="list in lists">{{list}}</li>
        </ul>
    </div>
<!-- v-html   数据绑定 -->
<!-- v-text   同上 -->
<!-- v-on  绑定事件   :click 点击  ="函数"-->
<!-- v-for 循环   -->