vue cli 3的使用

新建一个文件夹vueclidemo

cd vuclidemo 

npm init -y

cnpm i -D @vue/cli

npx vue create myapp

cd myapp

npm run serve

简单的Curd操作

<template>
    <div>
        <div id="seller">

            <form action="#" @submit.prevent="addPhone">
            <input type="text" ref="pname">
            <input type="submit">
            </form>

            <table>
                <caption><h5>手机销售排行</h5></caption>
                <tr v-for="phone of phones">
                    <td>{{phone.id}}</td>
                    <td>{{phone.name}}</td>
                    <td><button @click="deletePhone(phone.id)">删除</button></td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PhoneSeller",
        data:function () {
            return {
                maxid:2,
                phones:[
                {id:1,name:"iphone"},
                    {id:2,name:"xia0mi"},
                ]}
        },
        methods:{
            deletePhone(id){
                let index=this.phones.findIndex(phone=>phone.id==id)
                this.phones.splice(index,1)
            },
            addPhone(){
                let phoneName=this.$refs.pname.value
                let phone={id:++this.maxid,name:phoneName}
                this.phones.push(phone)
            }
        }
    }
</script>

<style scoped>
    #seller{
        width: 500px;
        margin: 0 auto;
    }
    table{
        width: 490px;
        border: 2px solid gray;
        border-collapse: collapse;
    }
    td{
        border: 1px solid gray;
    }
</style>