Vue 01

最新推荐文章于 2024-04-24 23:50:29 发布

dashan_1200

最新推荐文章于 2024-04-24 23:50:29 发布

阅读量81

点赞数

文章标签： webpack javascript ViewUI

原文链接：http://www.cnblogs.com/humi/p/10500495.html

版权

https://blog.csdn.net/u013210620/article/details/79801683#npmvue_14

http://www.runoob.com/nodejs/nodejs-npm.html

https://www.cnblogs.com/dreling/p/6892684.html#autoid-2-0-0

关于node 环境和 npm配置代理

NODE NPM config

path

npm config set prefix "D:\software\nodejs\global_modules"
prefix=D:\software\nodejs\node_modules\npm
C:\Users\imi\AppData\Roaming\npm

设置代理

    nvm  settings.txt 文件proxy= ip:port
    npm config set proxy=10.4.200.230:8080
    npm config set registry=http://registry.npmjs.org

关于https
经过上面设置使用了http开头的源，因此不需要设https_proxy了，否则还要增加一句:

npm config set https-proxy http://server:port
代理用户名和密码

然后全局安装webpack

    npm install webpack -g
    npm install webpack-cli -g
    webpack -v
    4.14.0

就可以出现版本了
也可以随意切换nodejs

增删改查

vue crud html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue crud</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div id="container" class="container">
            <h2> vue card 1</h2>
            <div id="card1" class="card ">
                <div id="" class="card-body">
                    <form class="form-inline">
                        <label for="name">Name:</label>
                        <input type="text" class="form-control" v-model="addPer.name" id="name" placeholder="Enter name">
                        <label for="name">Phone:</label>
                        <input type="text" class="form-control" v-model="addPer.phone" id="phone" placeholder="Enter Phone">
                        <label for="email">Email:</label>
                        <input type="email" class="form-control" v-model="addPer.email" id="phone" placeholder="Enter email">
                        <button type="button" class="btn" v-on:click="addPerson(addPer)">Add</button>
                        <input type="text" class="form-control" v-model="keyWords" v-on:keyup.13="searched(this)" v-on:keyup="search(this)" id="phone" placeholder="Enter email">
                    </form>
                </div>
            </div>
            <div id="card2" class="card">
                <table class="table  table-hover">
                    <thead>
                        <tr>
                            <th style="display: none;">Id</th>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>Email</th>
                            <th>Operation</th>
                        </tr>
                    </thead>
                    <tbody id="pers">
                        <tr v-for="i in persons">
                            <td style="display: none;">{{i.id}}</td>
                            <td>{{i.name}}</td>
                            <td>{{i.phone}}</td>
                            <td>{{i.email}}</td>
                            <td>
                                <button type="button" class="btn" @click="removePerson(i.id)">Remove</button>
                                <button type="button" class="btn" @click="editPerson(i)" data-toggle="modal" data-target="#myModal">Edit</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>


            <!-- 模态框 -->
            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">

                        <!-- 模态框头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">Edit</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>

                        <!-- 模态框主体 -->
                        <div class="modal-body">
                            <form class="form">
                                <label for="name">Name:</label>
                                <input type="text" class="form-control" v-model="editPer.name" id="name" placeholder="Enter name">
                                <label for="phone">Phone:</label>
                                <input type="text" class="form-control" v-model="editPer.phone" id="phone" placeholder="Enter Phone">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" v-model="editPer.email" id="email" placeholder="Enter email">
                                <!-- <button type="button" class="btn" v-on:click="editOk(person)">Add</button> -->
                            </form>
                        </div>
                        <!-- 模态框底部 -->
                        <!-- <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="crud.js" type="text/javascript" charset="utf-8"></script>
</html>

crud.js


var data = {
    persons: [{
            id: 1,
            name: 'joe',
            phone: '1342324234',
            email: 'wasadoo@133.com'
        },
        {
            id: 2,
            name: 'Ezreal',
            phone: '1342324234',
            email: 'jjghjgh@163.com'
        }
    ],
    addPer: {
        id: 0,
        name: "",
        phone: "",
        email: ""
    },
    editPer: {
        id: 0,
        name: "",
        phone: "",
        email: ""
    },
    keyWords:''
}
var _persons = [];
_persons[0] = data.persons;
var max_id = data.persons.length;
for (var i in data.persons) {
    if (i.id > max_id) {
        max_id = i.id
    }
}

var app = new Vue({
    el: "#container",
    data: data,
    methods: {
        addPerson: function(e) {
            if (e.name) {
                max_id++;
                this.addPer.id = max_id;
                data.persons.push(this.addPer)
                this.addPer = {
                    id: 0,
                    name: "",
                    phone: "",
                    email: ""
                };
            } else {
                alert('name can\'t empty')
            }
            _persons[0] = data.persons;
        },
        editPerson: function(e) {
            data.editPer = e || {};
            e = data.editPer;
            _persons[0] = data.persons;
        },
        removePerson: function(e) {
            for (let i in data.persons) {
                if (e === data.persons[i].id)
                    data.persons.splice(i, 1)
            }
            _persons[0] = data.persons;
        },
        search:function(e){
            // console.log(app.keyWords)
            _persons[1] = [];
            if($.isEmptyObject(app.keyWords)){
                 app.persons = _persons[0]
            }else{
                _persons[1]=[];
                for(var i in app.persons){
                    app.persons=[]
                    for(_i in app.persons[i])
                    if((app.persons[i][_i]+'').includes(app.keyWords))
                        _persons[1].push(app.persons[i])
                }
                 app.persons = _persons[1]
            }
        },
        searched:function(e){
            console.log(e)
        }
    }
})

转载于:https://www.cnblogs.com/humi/p/10500495.html

dashan_1200

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 01

https://blog.csdn.net/u013210620/article/details/79801683#npmvue_14http://www.runoob.com/nodejs/nodejs-npm.htmlhttps://www.cnblogs.com/dreling/p/6892684.html#autoid-2-0-0关于node 环境和 npm配置代理N...
复制链接

扫一扫