引入vue 與 axios

  <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>

引入自己的js

<script src="js/moduel-user.js"></script>

頁面撰寫

<div id="app">


    <div v-if="viewid == 1">
        <button @click="showSaveForm()" >新建</button>
        <table border="1px" width="100%">
            <tr>
                 <td>序號</td>
                 <td>id</td>
                 <td>用戶名</td>
                 <td>密碼</td>
                 <td>郵箱</td>
                 <td>年齡</td>
                 <td>性別</td>
                 <td>操作</td>
            </tr>
            <tr v-for="(user,index) in users">
                <td>{{index+1}}</td>
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.password}}</td>
                <td>{{user.email}}</td>
                <td>{{user.age}}</td>
                <td>{{user.sex}}</td>
                <td>
                    <button @click="deleteById(user.id)">洗掉</button>
                    <button @click="findOne(user.id)">編輯</button>
                </td>
            </tr>
        </table>
    </div>

    <div v-if="viewid != 1">
        <form>
            <input type="hidden"  v-model="user.id"  >
           用戶名 :<input type="text"  v-model="user.username"  ><br/>
           密碼:<input type="text"    v-model="user.password"   ><br/>
           郵箱:<input type="text"    v-model="user.email"   ><br/>
           年齡:<input type="text"    v-model="user.age"   ><br/>
           性別:<input type="text"    v-model="user.sex"   ><br/>
           <button @click="back">回傳</button> <button v-if="viewid == 2" @click="saveUser()">保存</button><button v-if="viewid == 3" @click="updateUser(user.id)">修改</button><br/>
        </form>
    </div>
</div>

module-user.js

//vue的核心物件 view model  雙向系結
//如果資料發生改變，頁面同步顯示
//反之也成立
//view model
var vm = new Vue(
    {
        el:'#app', //讓vu掌握指定的視圖區域
        data:{
            user:{
                id:-1,
                username:'',
                password:'',
                email:'',
                sex:'',
                age:0
            },
            viewid:1, //控制視圖的狀態  ==1 顯示串列，==2 添加 == 3修改
            users:[] //集合
        },
        methods:{
            //函式
            findAll:function () {
                var vm = this
                axios.get('/users')
                    .then(function (response) {//正常
                        console.log(response.data);
                        vm.users = response.data.data
                        vm.viewid = 1
                    })
                    .catch(function (err) {//請求失敗
                        console.log(err);
                        alert(response.err)
                    });
            },
            findOne:function (id) {
                var vm = this
                axios.get('/users/'+id)
                    .then(function (response) {//正常
                        console.log(response.data);
                        vm.user = response.data.data
                        vm.viewid = 3
                    })
                    .catch(function (err) {//請求失敗
                        console.log(err);
                        alert(response.err)
                    });
            },
            deleteById:function (id) {
                axios.delete('/users/'+id)
                    .then(function (response) {//正常
                        console.log(response.data);
                        //vm.users = response.data.data
                        //vm.viewid = 1
                        vm.findAll()
                    })
                    .catch(function (err) {//請求失敗
                        console.log(err);
                        alert(response.err)
                    });
            },
            showSaveForm:function(){
                var vm = this
                vm.viewid = 2
            },
            back:function(){
                var vm = this
                vm.viewid = 1
            },
            saveUser:function () {
                var vm = this
                axios.post('/users',vm.user)
                    .then(function (response) {//正常
                        console.log(response.data);
                        vm.findAll()
                    })
                    .catch(function (err) {//請求失敗
                        console.log(err);
                        alert(response.err)
                    });
            },
            updateUser:function (id) {
                var vm = this
                axios.put('/users/'+id,vm.user)
                    .then(function (response) {//正常
                        console.log(response.data);
                        vm.findAll()
                    })
                    .catch(function (err) {//請求失敗
                        console.log(err);
                        alert(response.err)
                    });
            }
        },
        created:function () {
            //發送請求查詢串列
           // alert("vm創建成功")
            //this表示當前vm物件
            this.findAll()
        }
    }
) //創建了MVVM中的VM物件

• vm物件的重點在于兩個，一個是data，另一個是methods
• data，可以接收服務端回傳的資料，同步到頁面顯示
• 也可以將表單里面的資料同步保存，然后提交給后臺，