首页 > 代码库 > vue学习之一

vue学习之一

2024-09-22 04:00:25   217人阅读

搞懂一个东西，最好的方式是学习它的使用，准守它的规则，那么

它的才能更好了解到它的内部建构。

vue据说包含react+angular的的优点。

vue到底是什么?
一个mvvm框架(库)、和angular类似
比较容易上手、小巧
mvc:
　　mvp
　　mvvm
　　mv*
　　mvx
官网:http://cn.vuejs.org/
手册： http://cn.vuejs.org/api/

vue和angular区别?
vue——简单、易学
指令以 v-xxx
一片html代码配合上json，在new出来vue实例
个人维护项目

适合: 移动端项目,小巧

vue的发展势头很猛，github上start数量已经超越angular
angular——上手难
指令以 ng-xxx
所有属性和方法都挂到$scope身上
angular由google维护

合适: pc端项目

共同点: 不兼容低版本IE

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.min.css">
    <script src="./lib/jquery-1.7.2.js"></script>
    <script src="./lib/bootstrap.js"></script>
    <script src="./lib/vue.js"></script>
    <script>
    /*有些方法在vue里，是和它內部的方法衝突的，例如delete，alert，所在標籤里無法使用的，不過在js還是可以使用的
        既然使用vue那麼就準守它的規則
    */
    window.onload=function(){
        var vue=new Vue({
            el:"#tblPage",
            data:{
                myData:[{username:"中國人",age:24},{username:"cliOu",age:20}],
                username:"",
                age:"",
                currentIndex:-1
            },
            methods:{
                add:function(){
                    this.myData.push({username:this.username,age:this.age});
                    this.username="";
                    this.age="";
                },
                deleteTbl:function(index){
                    if(index<0){
                        this.myData=[];
                    }else{
                        this.myData.splice(index,1);
                    }
                }
            }
        });
    }
    </script>
</head>
<body>
    <div class="container" id="tblPage">
        <form role="form">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" class="form-control" id="username" placeholder="请输入" v-model="username">
            </div>
            <div class="form-group">
                <label for="age">年　龄:</label>
                <input type="text" class="form-control" id="age" placeholder="请输入" v-model="age">
            </div>
            <div class="form-group text-right">
                <button type="button" class="btn btn-sm btn-primary" v-on:click="add()">添加</button>
                <button type="reset" class="btn btn-sm btn-danger">重置</button>
            </div>
        </form>
        <table class="table table-bordered table-hover">
            <caption class="h4 text-info">用户表信息</caption>
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in myData">
                <td>{{index+1}}</td>
                <td>{{item.username}}</td>
                <td>{{item.age}}</td>
                <td>
                    <button type="button" class="btn btn-xs btn-danger" v-on:click="currentIndex=index" data-toggle="modal" data-target="#layer">删除</button>
                </td>
            </tr>
            <tr v-show="myData.length>0">
                <td colspan="4" class="text-right">
                    <button type="button" class="btn btn-xs btn-danger" v-on:click="currentIndex=-1" data-toggle="modal" data-target="#layer">删除全部</button>
                </td>
            </tr>
            <tr v-show="myData.length==0">
                <td colspan="4" class="text-center text-muted">
                    无数据...
                </td>
            </tr>
        </table>
        <!-- 模態框 -->
        <div role="dialog" class="modal fade" id="layer">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="btn btn-danger" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title" v-show="currentIndex!=-1">你是否要刪除!</h4>
                        <h4 class="modal-title" v-show="currentIndex==-1">你是否要刪除全部!</h4>
                    </div>
                    <div class="modal-body text-right">
                        <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal" v-on:click="deleteTbl(currentIndex)">確認</button>
                    </div>
                </div>                
            </div>
        </div>
    </div>
</body>
</html>

 

vue学习之一


联系
我们