GettingStarted with Vue

作者: coooCode | 来源:发表于2019-01-15 19:41 被阅读0次

GettingStarted with Vue
GettingStarted
GettingStarted With SprimgMVC
GettingStarted With Mybatis
windows本地使用tiddlywiki的一种方案
【译】Grails GettingStarted
SpringBoot 参考指南——002
在官网首页如何打开指南的pdf
【基础】Vue安装
vue基础知识

一、前端页面中(a.html):

引入vue.js库
准备data;
将data绑定到页面元素中

二、Crud 操作(没有与后端数据交互)

1.查询

效果查询效果.PNG
代码(a.html)

<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>
</head>
<body>
    <div id="app">
            <table id="heroListTable" >
                <thead>
                    <tr>
                        <th>英雄名称</th>
                        <th>血量</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="hero in heros ">
                        <td>{{hero.name}}</td>
                        <td>{{hero.hp}}</td>
                    </tr>
                </tbody>
            </table>
    </div>
<script type="text/javascript">
    //Model
    var data = {
        heros: [
        { id: 1, name: '盖伦', hp: 318},
        { id: 2, name: '提莫', hp: 320}
        ]
    };
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data
    });
</script>
</body>
</html>

2.添加

利用双向绑定
效果添加.PNG
代码

<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>
</head>
<body>
    <div id="app">
            <table id="heroListTable" >
                <thead>
                    <tr>
                        <th>英雄名称</th>
                        <th>血量</th>
                    </tr>
                </thead>
                <tbody v-for = "hero in heroes">
                    <tr>
                        <td>{{hero.name}}</td>
                    <td>{{hero.hp}}</td>
                    </tr> 
                    
                </tbody>
            </table>

            <br/>
            英雄名字:<input type="text" v-model="hero4Add.name"><br>
            血量:<input type="number" v-model="hero4Add.hp"><br>
            <button type="button" v-on:click = "add">添加</button>

            <!---->
            <script type="text/javascript">
                var data = {
                    heroes : [
                        {id:1,name:"gareen",hp:"1"},
                        {id:2,name:"kay",hp:"2"}
                    ],
                    hero4Add:{id:0,name:"",hp:""}
                };

                var maxId = 3;
                for (var i = 0; i < data.heroes.length; i++) {
                    if (data.heroes[i].id > maxId) {
                        maxId = data.heroes[i].id;
                    }
                }

                var vue = new Vue({
                    el : "#app",
                    data : data,
                    methods:{
                        add:function(event){
                            maxId++;
                            this.hero4Add.id = maxId;
                            if (this.hero4Add.name.length == 0) {
                                this.hero4Add.name = "Hero#"+this.hero4Add.id;
                            }
                            this.heroes.push(this.hero4Add);
                            this.hero4Add = { id: 0, name: "", hp: "0"}
                        }
                    }
                });

            </script>
    </div>
</script>
</body>
</html>

3.删除

效果删除.PNG
代码
1）增加删除的链接

<td>
    <a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
</td>

2）

deleteHero: function (id) {
    for (var i=0;i<this.heros.length;i++){
        if (this.heros[i].id == id) {
            this.heros.splice(i, 1);
            break;
        }
    }
}

4.更新

效果

更新.PNG
代码
1)增加链接

<a href="#nowhere" @click="edit(hero)">编辑</a>

2)增加用于编辑的 div

<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>

3)增加相关函数
一加载script先将$("#div4Update").hide();

edit: function (hero) {
    $("#heroListTable").hide();
    $("#div4Update").show();
    this.hero4Update = hero;
},
update:function(){
    //因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
    $("#heroListTable").show();
    $("#div4Update").hide();           
},
cancel:function(){
    //其实就是恢复显示
    $("#heroListTable").show();
    $("#div4Update").hide();
}