how2j

13.fetch.js

一般说来 Vue 不会直接使用原生的 Ajax 而是使用 ajax 框架。而 fetch.js 就是眼下比较流行的一种 ajax 框架

13.1 代码实例

通过fetch.js获取云端数据

<script src="http://how2j.cn/study/fetch.min.js"></script>

<div id="hero">

</div>

<script>
var url = "http://how2j.cn/study/json.txt"
fetch(url).then(function(response) {
    response.json().then(function (jsonObject) {
        var jsonString = JSON.stringify(jsonObject)
        document.getElementById("hero").innerHTML = "通过fetch获取到的json数据："+ jsonString;
    })
}).catch(function(err){
    console.log("Fetch错误:"+err);
})

</script>

14.axio.js

14.1 代码实例

<script src="http://how2j.cn/study/axios.min.js"></script>

<div id="hero">

</div>

<script>
var url = "http://how2j.cn/study/json.txt"
    axios.get(url).then(function(response) {
        var jsonObject = response.data;
        var jsonString = JSON.stringify(jsonObject)
        document.getElementById("hero").innerHTML = "通过 axios 获取到的json数据："+ jsonString;
    })

</script>

15.ajax(fetch.js/axio.js)

16.vue-cli

vue-cli 是 vue 出来的一个脚手架，可以进行组件式地开发。
npm install -g @vue/cli@3.0.1 安装命令

17.纯vue.js 写curd

粘贴过来方便看

<html>
<head>
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
        td{
            border:1px solid gray;
        }

        table{
            border-collapse:collapse;
        }

        div#app{
            margin:20px auto;
            width:400px;
            padding:20px;
        }      
    </style>
</head>

<body>
    <div id="app">
            <table id="heroListTable" >
                <thead>
                    <tr>
                        <th>英雄名称</th>
                        <th>血量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="hero in heros ">
                        <td>{{hero.name}}</td>
                        <td>{{hero.hp}}</td>
                        <td>
                            <a href="#nowhere" @click="edit(hero)">编辑</a>
                            <a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            英雄名称:
                            <input type="text"    v-model="hero4Add.name" />
                            <br>
                            血量：
                            <input type="number"    v-model="hero4Add.hp" />
                            <br>
                            <button type="button"  v-on:click="add">增加</button>
                         </td>                  
                    </tr>
                </tbody>
            </table>

            <div id="div4Update">

                            英雄名称:
                            <input type="text"    v-model="hero4Update.name" />
                            <br>
                            血量：
                            <input type="number"    v-model="hero4Update.hp" />                       
                            <input type="hidden"    v-model="hero4Update.id" />                       
                            <br>
                            <button type="button"  v-on:click="update">修改</button>                
                            <button type="button"  v-on:click="cancel">取消</button>                

            </div>
    </div>

    <script type="text/javascript">
        //修改区域隐藏起来先
        $("#div4Update").hide();

        //Model
        var data = {
            heros: [
            { id: 1, name: '盖伦', hp: 318},
            { id: 2, name: '提莫', hp: 320},
            { id: 3, name: '安妮', hp: 419},
            { id: 4, name: '死歌', hp: 325},
            { id: 5, name: '米波', hp: 422},
            ],
            hero4Add: { id: 0, name: '', hp: '0'},
            hero4Update: { id: 0, name: '', hp: '0'}
        };

        //用于记录最大id值
        var maxId = 5;
        //计算最大值
        for (var i=0;i<data.heros.length;i++){
            if (data.heros[i].id > maxId)
                maxId=  this.heros[i].id;
        }      

    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
        methods: {
            add: function (event) {
                //获取最大id
                maxId++;
                //赋予新id
                this.hero4Add.id = maxId;
                if(this.hero4Add.name.length==0)
                    this.hero4Add.name = "Hero#"+this.hero4Add.id;
                //把对象加入到数组
                this.heros.push(this.hero4Add);
                //让 hero4Add 指向新的对象
                this.hero4Add = { id: 0, name: '', hp: '0'}
            },
            deleteHero: function (id) {
                console.log("id"+id);
                for (var i=0;i<this.heros.length;i++){
                    if (this.heros[i].id == id) {
                        this.heros.splice(i, 1);
                        break;
                    }
                }
            },
            edit: function (hero) {
                $("#heroListTable").hide();
                $("#div4Update").show();
                this.hero4Update = hero;
            },
            update:function(){
                //因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
                $("#heroListTable").show();
                $("#div4Update").hide();          
            },
            cancel:function(){
                //其实就是恢复显示
                $("#heroListTable").show();
                $("#div4Update").hide();
            }
        }
    });
    </script>
<div style="height:300px"></div>
</body>
</html>