- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

vue快速学习02、基础用法

红目香薰发表于 2022/06/26 20:55:11 2022/06/26

【摘要】编辑 vue快速学习02、基础用法目录vue快速学习02、基础用法1、数据双向绑定2、数据绑定3、钩子函数4、created函数用法15、created函数用法26、filters过滤器7、v-once与v-text8、数据计算9、数据绑定10、样式控制111、样式控制212、v-if14、v-on15、watch16、v-for17、computed18、table增加操作19、ta...

编辑

vue快速学习02、基础用法

1、数据双向绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>

<body>
    <!--视图层-->
    <div id="app">
        <input type="text" v-model="Msg"><br/>
        <p>{{Msg}}</p>
    </div>
    <!--引入vue环境-->
    <script src="js/vue.js"></script>
    <!--视图模型层-->
    <script>
        /* Vue的基础使用方法，内部参数格式为json*/
        new Vue({
            el: "#app",
            data: {
                Msg: "天使之吻"
            }
        })
    </script>
</body>

</html>

2、数据绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <fieldset>
            <legend>姓名栏</legend>
            <p>姓：<input type="text" v-model="xing" /></p>
            <p>名：<input type="text" v-model="ming" /></p>
            <p>{{xing}}_{{ming}}</p>
        </fieldset>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                xing: "",
                ming: ""
            }
        });
    </script>
</body>

</html>

3、钩子函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: ""
            },
            created() {
                console.log("初始化");
            },
            mounted() {
                console.log("完成初始化");
            },
            beforeDestroy() {
                console.log("销毁前执行，看不到。");
            }
        });
    </script>
</body>

</html>

4、created函数用法1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div id="show">{{ShowText}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                StrArray: ["北京第三区交通委提醒您",
                    "道路千万条",
                    "安全第一条",
                    "行车不规范",
                    "亲人两行泪"
                ],
                index: 0,
                ShowText: ""
            },
            created() {
                var _this = this;
                _this.ShowText = _this.StrArray[0];
                setInterval(() => {
                    _this.index++;
                    if (_this.index == _this.StrArray.length) {
                        _this.index = 0;
                    }
                    _this.ShowText = _this.StrArray[_this.index];
                }, 2000);
            }
        });
    </script>
</body>

</html>

5、created函数用法2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{ShowTime}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                ShowTime: "" //Vue里data数据不能给null
            },
            created() {
                //时间的处理
                var _this = this;
                setInterval(() => {
                    var str = "当前日期时间是：";
                    var d = new Date();
                    var year = d.getFullYear();
                    var month = (d.getMonth() + 1).toString().padStart(2, '0');
                    var day = d.getDate().toString().padStart(2, '0');
                    var hour = d.getHours().toString().padStart(2, '0');
                    var min = d.getMinutes().toString().padStart(2, '0');
                    var se = d.getSeconds().toString().padStart(2, '0');
                    _this.ShowTime = str + year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + se;
                }, 1000);
            }
        });
    </script>
</body>

</html>

6、filters过滤器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="showText" />
        <hr/>
        <p>{{showText|filterText}}</p>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                showText: ""
            },
            filters: {
                filterText: function(o) {
                    var isf = o.indexOf("傻") == -1;
                    return isf ? o : "*";
                }
            }
        })
    </script>
</body>

</html>

7、v-once与v-text

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <span>{{Msg}}</span>
        <hr/>
        <span v-once>{{Msg}}</span>
        <hr/>
        <span v-text>{{Msg}}</span>
        <hr/>
        <input type="text" v-model="Msg" />
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                Msg: "我是基础的参数"
            }
        })
    </script>
</body>

</html>

8、数据计算

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <fieldset>
            <legend>个人薪资计算器</legend>
            <p>基本工资：<input type="text" v-model="a1" /></p>
            <p>岗位工资：<input type="text" v-model="a2" /></p>
            <p>月度奖金：<input type="text" v-model="a3" /></p>
            <p>综合补贴：<input type="text" v-model="a4" /></p>
            <p>扣款金额：<input type="text" v-model="a5" /></p>
            <p>应发工资：￥{{parseFloat(a1)+parseInt(a2)+parseInt(a3)+parseInt(a4)-parseInt(a5)}}元</p>
        </fieldset>
    </div>
    <!-- 引入环境 -->
    <script src="js/vue.js"></script>
    <!-- 视图模型 -->
    <script>
        new Vue({
            el: "#app",
            data: {
                a1: 0,
                a2: 0,
                a3: 0,
                a4: 0,
                a5: 0
            }
        })
    </script>
</body>

</html>

9、数据绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <img :src="url" v-bind:style="sty" />
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                url: "imgs/1 (10).png",
                sty: "width:300px;height:250px;border:5px solid red"
            }
        })
    </script>
</body>

</html>

10、样式控制1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .co {
            color: red;
        }
        
        .bgc {
            background-color: skyblue;
        }
        
        .fs {
            font-size: 2rem;
        }
        
        .bo {
            border: 2px solid hotpink;
        }
        
        .bor {
            border-radius: 50%;
        }
        
        .fc {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <p><input type="checkbox" v-model="state1" />字体颜色</p>
        <p><input type="checkbox" v-model="state2" />背景颜色</p>
        <p><input type="checkbox" v-model="state3" />文字大小</p>
        <p><input type="checkbox" v-model="state4" />添加边框</p>
        <p><input type="checkbox" v-model="state5" />圆角边框</p>
        <p><input type="checkbox" v-model="state6" />文字居中</p>
        <hr/>
        <p v-bind:class="{co:state1,bgc:state2,fs:state3,bo:state4,bor:state5,fc:state6}">安杰有一个美丽、大方、端庄、孝心的女朋友</p>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                state1: false,
                state2: false,
                state3: false,
                state4: false,
                state5: false,
                state6: false
            }
        })
    </script>
</body>

</html>

11、样式控制2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <img :src="url" style="width:100%;height:100vh" />
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                Imgs: [
                    "imgs/1 (1).png",
                    "imgs/1 (2).png",
                    "imgs/1 (3).png",
                    "imgs/1 (4).png",
                    "imgs/1 (5).png",
                    "imgs/1 (6).png",
                    "imgs/1 (7).png",
                    "imgs/1 (8).png",
                    "imgs/1 (9).png",
                    "imgs/1 (10).png",
                    "imgs/1 (11).png",
                    "imgs/1 (12).png",
                    "imgs/1 (13).png"
                ],
                index: 0,
                url: ""
            },
            created() {
                //影分身之术
                var _this = this;
                _this.url = _this.Imgs[0];
                //轮播
                setInterval(() => {
                    _this.index++;
                    if (_this.index == _this.Imgs.length) {
                        _this.index = 0;
                    }
                    //将每次递增或归零的下角标赋值到数组上
                    _this.url = _this.Imgs[_this.index];
                }, 2500);
            }
        })
    </script>
</body>

</html>

12、v-if

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="isf" />登录/注册<br/>
        <button v-on:click="change">切换</button>
        <div v-if="isf">
            <p>登录</p>
        </div>
        <div v-else>
            <p>注册</p>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                isf: true
            },
            methods: {
                change: function() {
                    //bool值相互切换
                    this.isf = this.isf ? false : true;
                }
            }
        })
    </script>
</body>

</html>

13、v-if、v-else

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1 v-on:click="change" style="cursor: pointer">切换</h1>
        <hr/>
        <div v-if="isf">
            <h1>注册</h1>
            <p>账号：<input type="text" placeholder="请输入账号"></p>
            <p>密码：<input type="password" placeholder="请输入密码"></p>
            <p>二次输入密码：<input type="password" placeholder="请输入密码"></p>
            <button>注册提交</button>
        </div>
        <div v-else>
            <h1>登录</h1>
            <p>账号：<input type="text" placeholder="请输入账号"></p>
            <p>密码：<input type="password" placeholder="请输入密码"></p>
            <button>登录提交</button>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                isf: true
            },
            methods: {
                change: function() {
                    //反向切换bool值方法
                    this.isf = this.isf ? false : true;
                }
            }
        })
    </script>
</body>

</html

14、v-on

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1><span v-on:click="choose(1)">选项卡一</span><span v-on:click="choose(2)">选项卡二</span></h1>
        <div v-if="show1">
            某人拥有十个雍容华贵，沉鱼落雁，闭月羞花的姐姐。
        </div>
        <div v-if="show2">
            某人需要一个善解人意，手下过百将的巾帼红颜。
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                show1: true,
                show2: false
            },
            methods: {
                choose: function(o) {
                    console.log(o);
                    var _this = this;
                    if (o == "1") {
                        _this.show1 = true;
                        _this.show2 = false;
                    } else {
                        _this.show2 = true;
                        _this.show1 = false;
                    }
                }
            }
        })
    </script>
</body>

</html>

15、watch

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div id="app">
        <p>用户名:
            <input type="text" v-model="userName" placeholder="请输入用户名" />
            <span v-if="isf" style="color: red">该用户名规范为6-16字符</span>
        </p>
    </div>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                userName: "",
                isf: false
            },
            watch: {
                userName: function(newWord, oldWord) {
                    if (newWord.length < 6 || newWord.length > 16) {
                        this.isf = true;
                    } else {
                        this.isf = false;
                    }
                }
            }
        })
    </script>
</body>

</html>

16、v-for

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div id="app">
        <p v-for="item in list" class="text-center">
            <span class="text-info">{{item}}</span>
        </p>
    </div>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: [
                    "九月九日忆山东兄弟",
                    "王维",
                    "独在异乡为异客，",
                    "每逢佳节倍思亲。",
                    "遥知兄弟登高处，",
                    "遍插茱萸少一人。"
                ]
            }
        });
    </script>
</body>

</html>

17、computed

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <p><input type="text" placeholder="根据姓名搜索" v-model="SelectKey" /></p>
        <hr/>
        <table class="table table-hover table-border text-center">
            <tr class="info">
                <td> 编号 </td>
                <td> 姓名 </td>
                <td> 薪水 </td>
                <td> 性别 </td>
                <td> 操作 </td>
            </tr>
            <tr v-for="(item,index) in newlist">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.sex==0?"女":"男"}}</td>
                <td><button class="btn btn-success">删除</button></td>
            </tr>
        </table>
    </div>
    <!-- 环境 -->
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <!-- 视图模型 -->
    <script>
        new Vue({
            el: "#app",
            data: {
                list: [{
                    id: 1,
                    name: "黄杰",
                    price: 100,
                    sex: 1
                }, {
                    id: 2,
                    name: "李炳钊",
                    price: 999999,
                    sex: 1
                }, {
                    id: 3,
                    name: "张培海",
                    price: 888888,
                    sex: 1
                }, {
                    id: 4,
                    name: "雷静",
                    price: 50000,
                    sex: 0
                }, {
                    id: 5,
                    name: "李春梦",
                    price: 1000000,
                    sex: 0
                }],
                SelectKey: ""
            },
            computed: {
                newlist: function() {
                    var _this = this; //影分身
                    return _this.list.filter(function(o) {
                        return o.name.indexOf(_this.SelectKey) != -1;
                    });
                }
            }
        })
    </script>
</body>

</html>

18、table增加操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <p>
            编号:<input type="text" placeholder="请输入编号" v-model="id" /> 姓名:
            <input type="text" placeholder="请输入姓名" v-model="name" /> 薪水:
            <input type="text" placeholder="请输入薪水" v-model="price" /> 性别:
            <input type="text" placeholder="请输入性别" v-model="sex" />
            <button v-on:click="addInfo" class="btn btn-primary">添加信息</button>
        </p>

        <hr/>
        <p><input type="text" placeholder="请输入搜索内容" v-model="SelectKey" /></p>
        <hr/>
        <table class="table table-hover table-border text-center">
            <tr class="info">
                <td> 编号 </td>
                <td> 姓名 </td>
                <td> 薪水 </td>
                <td> 性别 </td>
                <td> 操作 </td>
                </td>
            </tr>
            <tr v-for="(item,index) in newlist">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.sex==0?"女":"男"}}</td>
                <td><button class="btn btn-success">删除</button></td>
            </tr>
        </table>
    </div>
    <!-- 环境 -->
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <!-- 视图模型 -->
    <script>
        new Vue({
            el: "#app",
            data: {
                list: [{
                    id: 1,
                    name: "黄杰",
                    price: 100,
                    sex: 1
                }, {
                    id: 2,
                    name: "李炳钊",
                    price: 999999,
                    sex: 1
                }, {
                    id: 3,
                    name: "张培海",
                    price: 888888,
                    sex: 1
                }, {
                    id: 4,
                    name: "雷静",
                    price: 50000,
                    sex: 0
                }, {
                    id: 5,
                    name: "李春梦",
                    price: 1000000,
                    sex: 0
                }],
                SelectKey: "",
                id: 0,
                name: "",
                price: 0,
                sex: 0
            },
            computed: {
                newlist: function() {
                    var _this = this; //影分身
                    return _this.list.filter(function(o) {
                        return o.name.indexOf(_this.SelectKey) != -1;
                    });
                }
            },
            methods: {
                addInfo: function() {
                    this.list.push({
                        id: this.id,
                        name: this.name,
                        price: this.price,
                        sex: this.sex
                    });
                }
            }

        })
    </script>
</body>

</html>

19、table删除操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <p>
            编号:<input type="text" placeholder="请输入编号" v-model="id" /> 姓名:
            <input type="text" placeholder="请输入姓名" v-model="name" /> 薪水:
            <input type="text" placeholder="请输入薪水" v-model="price" /> 性别:
            <input type="text" placeholder="请输入性别" v-model="sex" />
            <button v-on:click="addInfo" class="btn btn-primary">添加信息</button>
        </p>

        <hr/>
        <p><input type="text" placeholder="请输入搜索内容" v-model="SelectKey" /></p>
        <hr/>
        <table class="table table-hover table-border text-center">
            <tr class="info">
                <td> 编号 </td>
                <td> 姓名 </td>
                <td> 薪水 </td>
                <td> 性别 </td>
                <td> 操作 </td>
            </tr>
            <tr v-for="(item,index) in newlist">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.sex==0?"女":"男"}}</td>
                <td><button class="btn btn-success" v-on:click="del(index)">删除</button></td>
            </tr>
        </table>
    </div>
    <!-- 环境 -->
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <!-- 视图模型 -->
    <script>
        new Vue({
            el: "#app",
            data: {
                list: [{
                    id: 1,
                    name: "黄杰",
                    price: 100,
                    sex: 1
                }, {
                    id: 2,
                    name: "李炳钊",
                    price: 999999,
                    sex: 1
                }, {
                    id: 3,
                    name: "张培海",
                    price: 888888,
                    sex: 1
                }, {
                    id: 4,
                    name: "雷静",
                    price: 50000,
                    sex: 0
                }, {
                    id: 5,
                    name: "李春梦",
                    price: 1000000,
                    sex: 0
                }],
                SelectKey: "",
                id: 0,
                name: "",
                price: 0,
                sex: 0
            },
            computed: {
                newlist: function() {
                    var _this = this; //影分身
                    return _this.list.filter(function(o) {
                        return o.name.indexOf(_this.SelectKey) != -1;
                    });
                }
            },
            methods: {
                addInfo: function() {
                    this.list.push({
                        id: this.id,
                        name: this.name,
                        price: this.price,
                        sex: this.sex
                    });
                },
                del: function(o) {
                    if (confirm('是否删除此行?')) {
                        this.list.splice(o, 1);
                    }
                }
            }

        })
    </script>
</body>

</html>

20、table修改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <p>
            编号:<input type="text" placeholder="请输入编号" v-model="id" /> 姓名:
            <input type="text" placeholder="请输入姓名" v-model="name" /> 薪水:
            <input type="text" placeholder="请输入薪水" v-model="price" /> 性别:
            <input type="text" placeholder="请输入性别" v-model="sex" />
            <button v-on:click="addInfo" class="btn btn-primary">添加信息</button>
            <button v-on:click="updateById" class="btn btn-primary">保存修改</button>
        </p>

        <hr/>
        <p><input type="text" placeholder="请输入搜索内容" v-model="SelectKey" /></p>
        <hr/>
        <table class="table table-hover table-border text-center">
            <tr class="info">
                <td> 编号 </td>
                <td> 姓名 </td>
                <td> 薪水 </td>
                <td> 性别 </td>
                <td> 操作 </td>
            </tr>
            <tr v-for="(item,index) in newlist">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.sex==0?"女":"男"}}</td>
                <td><button class="btn btn-success" v-on:click="del(index)">删除</button>
                    <button class="btn btn-primary" v-on:click="getInfo(item)">修改</button></td>
            </tr>
        </table>
    </div>
    <!-- 环境 -->
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <!-- 视图模型 -->
    <script>
        new Vue({
            el: "#app",
            data: {
                list: [{
                    id: 1,
                    name: "黄杰",
                    price: 100,
                    sex: 1
                }, {
                    id: 2,
                    name: "李炳钊",
                    price: 999999,
                    sex: 1
                }, {
                    id: 3,
                    name: "张培海",
                    price: 888888,
                    sex: 1
                }, {
                    id: 4,
                    name: "雷静",
                    price: 50000,
                    sex: 0
                }, {
                    id: 5,
                    name: "李春梦",
                    price: 1000000,
                    sex: 0
                }],
                SelectKey: "",
                id: 0,
                name: "",
                price: 0,
                sex: 0
            },
            computed: {
                newlist: function() {
                    var _this = this; //影分身
                    return _this.list.filter(function(o) {
                        return o.name.indexOf(_this.SelectKey) != -1;
                    });
                }
            },
            methods: {
                addInfo: function() {
                    this.list.push({
                        id: this.id,
                        name: this.name,
                        price: this.price,
                        sex: this.sex
                    });
                },
                del: function(o) {
                    if (confirm('是否删除此行?')) {
                        this.list.splice(o, 1);
                    }
                },
                getInfo: function(o) {
                    this.id = o.id;
                    this.name = o.name;
                    this.price = o.price;
                    this.sex = o.sex;
                },
                updateById: function() {
                    for (var index = 0; index < this.list.length; index++) {
                        var item = this.list[index];
                        if (item.id == this.id) {
                            console.log(item.id);
                            this.list[index].name = this.name;
                            this.list[index].price = this.price;
                            this.list[index].sex = this.sex;
                            return;
                        }
                    }
                }
            }

        })
    </script>
</body>

</html>

21、template

基础声明

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <myheart></myheart>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //搭建母版
        var myheart_tem = Vue.extend({
            template: "<div><h1>My Heart Will Go On</h1><hr/><p>爱无止境·肉丝·杰克</p></div>"
        });
        //创建组件，第一个参数是自定义组件名称，母版
        Vue.component("myheart", myheart_tem);
        //创建VUE
        new Vue({
            el: "#app"
        })
    </script>
</body>

</html>

template简单使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        body {
            overflow: hidden;
        }
        
        .myh {
            background: #2E6EC2;
            height: 10vh;
            color: white;
            font-size: 3rem;
            line-height: 10vh;
        }
        
        .myc {
            background-color: #F8F1DC;
            text-align: center;
            height: 85vh;
            font-size: 5rem;
            line-height: 85vh;
        }
        
        .myf {
            background: #2E6EC2;
            text-align: center;
            height: 5vh;
            color: white;
            font-size: 2rem;
            line-height: 5vh;
        }
    </style>
</head>

<body>
    <div id="app">
        <myhead></myhead>
        <mycontent></mycontent>
        <myfoot></myfoot>
    </div>
    <!-- 环境 -->
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script>
        //创建母版
        var head = Vue.extend({
            template: "<div class='myh'>后台管理系统</div>"
        });
        var content = Vue.extend({
            template: "<div class='myc'>后台管理中心内容</div>"
        });
        var foot = Vue.extend({
            template: "<div class='myf'>版权所有：项目开发组</div>"
        });
        //绑定组件
        Vue.component("myhead", head);
        Vue.component("mycontent", content);
        Vue.component("myfoot", foot);
        new Vue({
            el: "#app"
        })
    </script>
</body>

</html>

22、components绑定组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>一堆水果的遍历</h1>
        <!-- 需要的自定义的组件 -->
        <show-fruit></show-fruit>
    </div>
    <!-- 模板·在APP的外面 -->
    <template id="show">
        <div>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </template>
    <!-- 环境 -->
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            components: { //绑定组件
                "show-fruit": {
                    data: function() {
                        return {
                            list: ["百香果", "蛇皮果", "姑娘果", "莲雾", "雪莲果"]
                        }
                    },
                    template: "#show"
                }
            }
        })
    </script>
</body>

</html>

23、props传值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div id="app">
        <h1 align="center">员工信息表</h1>
        <!-- 自定义组件名称 -->
        <showlist :newlist="list"></showlist>
    </div>
    <!-- 组件的模板 -->
    <template id="show">
            <table class="table table-border" style="text-align: center">
                <tr class="info">
                    <td>编号</td>
                    <td>诗词名称</td>
                    <td>作者</td>
                    <td>经典词语</td>
                </tr>
                <tr v-for="item in newlist">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.worker}}</td>
                    <td><pre>{{item.classic}}</pre></td>
                </tr>
            </table>
    </template>
    <!-- 环境 -->
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: [{
                    id: 1,
                    name: "《将进酒》",
                    worker: "李白",
                    classic: "烹羊宰牛且为乐，会须一饮三百杯！"
                }, {
                    id: 2,
                    name: "《夏日绝句》",
                    worker: "李清照",
                    classic: "生当作人杰，死亦为鬼雄！"
                }, {
                    id: 3,
                    name: "《长恨歌》",
                    worker: "白居易",
                    classic: "回眸一笑百媚生，六宫粉黛无颜色。"
                }, {
                    id: 4,
                    name: "《锦瑟》",
                    worker: "李商隐",
                    classic: "锦瑟无端五十弦，一弦一度思华年！"
                }]

            },
            components: {
                "showlist": {
                    props: ["newlist"],
                    template: "#show"
                }

            }
        })
    </script>
</body>

</html>

24、components子父组件的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>
    <div id="app">
        <h1>员工管理系统</h1>
        <!-- 父类组件 -->
        <fu-temp :showlist="list"></fu-temp>
    </div>
    <!-- 父类模板 -->
    <template id="fu">
        <div>
            搜索：<input type="text" v-model="SelectKey" placeholder="请输入搜索内容"/>
            <hr/>
            <zi-temp :newlist="filterlist"></zi-temp>
        </div>
    </template>
    <!-- 子类模板 -->
    <template id="zi">
        <div>
            <table class="table table-border" style="text-align: center">
                        <tr class="info">
                            <td>编号</td>
                            <td>诗词名称</td>
                            <td>作者</td>
                            <td>经典词语</td>
                        </tr>
                        <tr v-for="item in newlist">
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.worker}}</td>
                            <td><pre>{{item.classic}}</pre></td>
                        </tr>
             </table>
        </div>
    </template>
    <!-- 环境 -->
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: [{
                    id: 1,
                    name: "《将进酒》",
                    worker: "李白",
                    classic: "烹羊宰牛且为乐，会须一饮三百杯！"
                }, {
                    id: 2,
                    name: "《夏日绝句》",
                    worker: "李清照",
                    classic: "生当作人杰，死亦为鬼雄！"
                }, {
                    id: 3,
                    name: "《长恨歌》",
                    worker: "白居易",
                    classic: "回眸一笑百媚生，六宫粉黛无颜色。"
                }, {
                    id: 4,
                    name: "《锦瑟》",
                    worker: "李商隐",
                    classic: "锦瑟无端五十弦，一弦一度思华年！"
                }]
            },
            components: {
                "fu-temp": {
                    props: ["showlist"],
                    data: function() {
                        return {
                            SelectKey: ""
                        }
                    },
                    template: "#fu",
                    components: {
                        "zi-temp": {
                            props: ["newlist"],
                            template: "#zi"
                        }
                    },
                    computed: {
                        filterlist: function() {
                            var _this = this;
                            return _this.showlist.filter(function(o) {
                                return o.classic.indexOf(_this.SelectKey) != -1;
                            });
                        }
                    }
                }
            }

        });
    </script>
</body>

</html>

25、slot插槽使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>三好学生遍历</h1>
        <!-- 声明自定义组件 -->
        <showinfo :newlist="list">
            <template slot="cache" slot-scope="props">
                <li>{{props.item}}</li>
            </template>
        </showinfo>
    </div>
    <template id="show">
        <div>
            <slot name="cache" v-for="item in newlist" :item="item"></slot>
        </div>
    </template>
    <!-- 环境 -->
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: ["王佳乐", "张雄飞", "宋建飞"]
            },
            components: {
                "showinfo": {
                    props: ["newlist"],
                    template: "#show"
                }
            }
        })
    </script>
</body>

</html>

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

vue快速学习02、基础用法

vue快速学习02、基础用法

1、数据双向绑定

2、数据绑定

3、钩子函数

4、created函数用法1

5、created函数用法2

6、filters过滤器

7、v-once与v-text

8、数据计算

9、数据绑定

10、样式控制1

11、样式控制2

12、v-if

14、v-on

15、watch

16、v-for

17、computed

18、table增加操作

19、table删除操作

20、table修改

21、template

22、components绑定组件

23、props传值

24、components子父组件的使用

25、slot插槽使用

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品