• vue快速学习02、基础用法

    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插槽使用

    1、数据双向绑定

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.  
    10. </head>
    11.  
    12. <body>
    13.     <!--视图层-->
    14.     <div id="app">
    15.         <input type="text" v-model="Msg"><br/>
    16.         <p>{{Msg}}</p>
    17.     </div>
    18.     <!--引入vue环境-->
    19.     <script src="js/vue.js"></script>
    20.     <!--视图模型层-->
    21.     <script>
    22.         /* Vue的基础使用方法，内部参数格式为json*/
    23.         new Vue({
    24.             el: "#app",
    25.             data: {
    26.                 Msg: "天使之吻"
    27.             }
    28.         })
    29.     </script>
    30. </body>
    31.  
    32. </html>

    2、数据绑定

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <fieldset>
    14.             <legend>姓名栏</legend>
    15.             <p>姓：<input type="text" v-model="xing" /></p>
    16.             <p>名：<input type="text" v-model="ming" /></p>
    17.             <p>{{xing}}_{{ming}}</p>
    18.         </fieldset>
    19.     </div>
    20.     <script src="js/vue.js"></script>
    21.     <script>
    22.         new Vue({
    23.             el: "#app",
    24.             data: {
    25.                 xing: "",
    26.                 ming: ""
    27.             }
    28.         });
    29.     </script>
    30. </body>
    31.  
    32. </html>

    3、钩子函数

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app"></div>
    13.     <script src="js/vue.js"></script>
    14.     <script>
    15.         new Vue({
    16.             el: "#app",
    17.             data: {
    18.                 msg: ""
    19.             },
    20.             created() {
    21.                 console.log("初始化");
    22.             },
    23.             mounted() {
    24.                 console.log("完成初始化");
    25.             },
    26.             beforeDestroy() {
    27.                 console.log("销毁前执行，看不到。");
    28.             }
    29.         });
    30.     </script>
    31. </body>
    32.  
    33. </html>

    4、created函数用法1

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <div id="show">{{ShowText}}</div>
    14.     </div>
    15.     <script src="js/vue.js"></script>
    16.     <script>
    17.         new Vue({
    18.             el: "#app",
    19.             data: {
    20.                 StrArray: ["北京第三区交通委提醒您",
    21.                     "道路千万条",
    22.                     "安全第一条",
    23.                     "行车不规范",
    24.                     "亲人两行泪"
    25.                 ],
    26.                 index: 0,
    27.                 ShowText: ""
    28.             },
    29.             created() {
    30.                 var _this = this;
    31.                 _this.ShowText = _this.StrArray[0];
    32.                 setInterval(() => {
    33.                     _this.index++;
    34.                     if (_this.index == _this.StrArray.length) {
    35.                         _this.index = 0;
    36.                     }
    37.                     _this.ShowText = _this.StrArray[_this.index];
    38.                 }, 2000);
    39.             }
    40.         });
    41.     </script>
    42. </body>
    43.  
    44. </html>

    5、created函数用法2

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <div>{{ShowTime}}</div>
    14.     </div>
    15.     <script src="js/vue.js"></script>
    16.     <script>
    17.         new Vue({
    18.             el: "#app",
    19.             data: {
    20.                 ShowTime: "" //Vue里data数据不能给null
    21.             },
    22.             created() {
    23.                 //时间的处理
    24.                 var _this = this;
    25.                 setInterval(() => {
    26.                     var str = "当前日期时间是：";
    27.                     var d = new Date();
    28.                     var year = d.getFullYear();
    29.                     var month = (d.getMonth() + 1).toString().padStart(2, '0');
    30.                     var day = d.getDate().toString().padStart(2, '0');
    31.                     var hour = d.getHours().toString().padStart(2, '0');
    32.                     var min = d.getMinutes().toString().padStart(2, '0');
    33.                     var se = d.getSeconds().toString().padStart(2, '0');
    34.                     _this.ShowTime = str + year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + se;
    35.                 }, 1000);
    36.             }
    37.         });
    38.     </script>
    39. </body>
    40.  
    41. </html>

    6、filters过滤器

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <input type="text" v-model="showText" />
    14.         <hr/>
    15.         <p>{{showText|filterText}}</p>
    16.     </div>
    17.     <script src="js/vue.js"></script>
    18.     <script>
    19.         new Vue({
    20.             el: "#app",
    21.             data: {
    22.                 showText: ""
    23.             },
    24.             filters: {
    25.                 filterText: function(o) {
    26.                     var isf = o.indexOf("傻") == -1;
    27.                     return isf ? o : "*";
    28.                 }
    29.             }
    30.         })
    31.     </script>
    32. </body>
    33.  
    34. </html>

    7、v-once与v-text

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <script src="js/vue.js"></script>
    10. </head>
    11.  
    12. <body>
    13.     <div id="app">
    14.         <span>{{Msg}}</span>
    15.         <hr/>
    16.         <span v-once>{{Msg}}</span>
    17.         <hr/>
    18.         <span v-text>{{Msg}}</span>
    19.         <hr/>
    20.         <input type="text" v-model="Msg" />
    21.     </div>
    22.     <script>
    23.         new Vue({
    24.             el: "#app",
    25.             data: {
    26.                 Msg: "我是基础的参数"
    27.             }
    28.         })
    29.     </script>
    30. </body>
    31.  
    32. </html>

    8、数据计算

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <!-- 视图层 -->
    13.     <div id="app">
    14.         <fieldset>
    15.             <legend>个人薪资计算器</legend>
    16.             <p>基本工资：<input type="text" v-model="a1" /></p>
    17.             <p>岗位工资：<input type="text" v-model="a2" /></p>
    18.             <p>月度奖金：<input type="text" v-model="a3" /></p>
    19.             <p>综合补贴：<input type="text" v-model="a4" /></p>
    20.             <p>扣款金额：<input type="text" v-model="a5" /></p>
    21.             <p>应发工资：￥{{parseFloat(a1)+parseInt(a2)+parseInt(a3)+parseInt(a4)-parseInt(a5)}}元</p>
    22.         </fieldset>
    23.     </div>
    24.     <!-- 引入环境 -->
    25.     <script src="js/vue.js"></script>
    26.     <!-- 视图模型 -->
    27.     <script>
    28.         new Vue({
    29.             el: "#app",
    30.             data: {
    31.                 a1: 0,
    32.                 a2: 0,
    33.                 a3: 0,
    34.                 a4: 0,
    35.                 a5: 0
    36.             }
    37.         })
    38.     </script>
    39. </body>
    40.  
    41. </html>

    9、数据绑定

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <img :src="url" v-bind:style="sty" />
    14.     </div>
    15.     <script src="js/vue.js"></script>
    16.     <script>
    17.         new Vue({
    18.             el: "#app",
    19.             data: {
    20.                 url: "imgs/1 (10).png",
    21.                 sty: "width:300px;height:250px;border:5px solid red"
    22.             }
    23.         })
    24.     </script>
    25. </body>
    26.  
    27. </html>

    10、样式控制1

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <style>
    10.         .co {
    11.             color: red;
    12.         }
    13.         
    14.         .bgc {
    15.             background-color: skyblue;
    16.         }
    17.         
    18.         .fs {
    19.             font-size: 2rem;
    20.         }
    21.         
    22.         .bo {
    23.             border: 2px solid hotpink;
    24.         }
    25.         
    26.         .bor {
    27.             border-radius: 50%;
    28.         }
    29.         
    30.         .fc {
    31.             text-align: center;
    32.         }
    33.     </style>
    34. </head>
    35.  
    36. <body>
    37.     <div id="app">
    38.         <p><input type="checkbox" v-model="state1" />字体颜色</p>
    39.         <p><input type="checkbox" v-model="state2" />背景颜色</p>
    40.         <p><input type="checkbox" v-model="state3" />文字大小</p>
    41.         <p><input type="checkbox" v-model="state4" />添加边框</p>
    42.         <p><input type="checkbox" v-model="state5" />圆角边框</p>
    43.         <p><input type="checkbox" v-model="state6" />文字居中</p>
    44.         <hr/>
    45.         <p v-bind:class="{co:state1,bgc:state2,fs:state3,bo:state4,bor:state5,fc:state6}">安杰有一个美丽、大方、端庄、孝心的女朋友</p>
    46.     </div>
    47.     <script src="js/vue.js"></script>
    48.     <script>
    49.         new Vue({
    50.             el: "#app",
    51.             data: {
    52.                 state1: false,
    53.                 state2: false,
    54.                 state3: false,
    55.                 state4: false,
    56.                 state5: false,
    57.                 state6: false
    58.             }
    59.         })
    60.     </script>
    61. </body>
    62.  
    63. </html>

    11、样式控制2

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <img :src="url" style="width:100%;height:100vh" />
    14.     </div>
    15.     <script src="js/vue.js"></script>
    16.     <script>
    17.         new Vue({
    18.             el: "#app",
    19.             data: {
    20.                 Imgs: [
    21.                     "imgs/1 (1).png",
    22.                     "imgs/1 (2).png",
    23.                     "imgs/1 (3).png",
    24.                     "imgs/1 (4).png",
    25.                     "imgs/1 (5).png",
    26.                     "imgs/1 (6).png",
    27.                     "imgs/1 (7).png",
    28.                     "imgs/1 (8).png",
    29.                     "imgs/1 (9).png",
    30.                     "imgs/1 (10).png",
    31.                     "imgs/1 (11).png",
    32.                     "imgs/1 (12).png",
    33.                     "imgs/1 (13).png"
    34.                 ],
    35.                 index: 0,
    36.                 url: ""
    37.             },
    38.             created() {
    39.                 //影分身之术
    40.                 var _this = this;
    41.                 _this.url = _this.Imgs[0];
    42.                 //轮播
    43.                 setInterval(() => {
    44.                     _this.index++;
    45.                     if (_this.index == _this.Imgs.length) {
    46.                         _this.index = 0;
    47.                     }
    48.                     //将每次递增或归零的下角标赋值到数组上
    49.                     _this.url = _this.Imgs[_this.index];
    50.                 }, 2500);
    51.             }
    52.         })
    53.     </script>
    54. </body>
    55.  
    56. </html>

    12、v-if

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <input type="checkbox" v-model="isf" />登录/注册<br/>
    14.         <button v-on:click="change">切换</button>
    15.         <div v-if="isf">
    16.             <p>登录</p>
    17.         </div>
    18.         <div v-else>
    19.             <p>注册</p>
    20.         </div>
    21.     </div>
    22.     <script src="js/vue.js"></script>
    23.     <script>
    24.         new Vue({
    25.             el: "#app",
    26.             data: {
    27.                 isf: true
    28.             },
    29.             methods: {
    30.                 change: function() {
    31.                     //bool值相互切换
    32.                     this.isf = this.isf ? false : true;
    33.                 }
    34.             }
    35.         })
    36.     </script>
    37. </body>
    38.  
    39. </html>

    13、v-if、v-else

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <h1 v-on:click="change" style="cursor: pointer">切换</h1>
    14.         <hr/>
    15.         <div v-if="isf">
    16.             <h1>注册</h1>
    17.             <p>账号：<input type="text" placeholder="请输入账号"></p>
    18.             <p>密码：<input type="password" placeholder="请输入密码"></p>
    19.             <p>二次输入密码：<input type="password" placeholder="请输入密码"></p>
    20.             <button>注册提交</button>
    21.         </div>
    22.         <div v-else>
    23.             <h1>登录</h1>
    24.             <p>账号：<input type="text" placeholder="请输入账号"></p>
    25.             <p>密码：<input type="password" placeholder="请输入密码"></p>
    26.             <button>登录提交</button>
    27.         </div>
    28.     </div>
    29.     <script src="js/vue.js"></script>
    30.     <script>
    31.         new Vue({
    32.             el: "#app",
    33.             data: {
    34.                 isf: true
    35.             },
    36.             methods: {
    37.                 change: function() {
    38.                     //反向切换bool值方法
    39.                     this.isf = this.isf ? false : true;
    40.                 }
    41.             }
    42.         })
    43.     </script>
    44. </body>
    45.  
    46. </html

    14、v-on

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <h1><span v-on:click="choose(1)">选项卡一</span><span v-on:click="choose(2)">选项卡二</span></h1>
    14.         <div v-if="show1">
    15.             某人拥有十个雍容华贵，沉鱼落雁，闭月羞花的姐姐。
    16.         </div>
    17.         <div v-if="show2">
    18.             某人需要一个善解人意，手下过百将的巾帼红颜。
    19.         </div>
    20.     </div>
    21.     <script src="js/vue.js"></script>
    22.     <script>
    23.         new Vue({
    24.             el: "#app",
    25.             data: {
    26.                 show1: true,
    27.                 show2: false
    28.             },
    29.             methods: {
    30.                 choose: function(o) {
    31.                     console.log(o);
    32.                     var _this = this;
    33.                     if (o == "1") {
    34.                         _this.show1 = true;
    35.                         _this.show2 = false;
    36.                     } else {
    37.                         _this.show2 = true;
    38.                         _this.show1 = false;
    39.                     }
    40.                 }
    41.             }
    42.         })
    43.     </script>
    44. </body>
    45.  
    46. </html>

    15、watch

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    10.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    11.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    12. </head>
    13.  
    14. <body>
    15.     <div id="app">
    16.         <p>用户名:
    17.             <input type="text" v-model="userName" placeholder="请输入用户名" />
    18.             <span v-if="isf" style="color: red">该用户名规范为6-16字符</span>
    19.         </p>
    20.     </div>
    21.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    22.     <script>
    23.         new Vue({
    24.             el: "#app",
    25.             data: {
    26.                 userName: "",
    27.                 isf: false
    28.             },
    29.             watch: {
    30.                 userName: function(newWord, oldWord) {
    31.                     if (newWord.length < 6 || newWord.length > 16) {
    32.                         this.isf = true;
    33.                     } else {
    34.                         this.isf = false;
    35.                     }
    36.                 }
    37.             }
    38.         })
    39.     </script>
    40. </body>
    41.  
    42. </html>

    16、v-for

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    10.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    11.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    12. </head>
    13.  
    14. <body>
    15.     <div id="app">
    16.         <p v-for="item in list" class="text-center">
    17.             <span class="text-info">{{item}}</span>
    18.         </p>
    19.     </div>
    20.  
    21.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    22.     <script>
    23.         new Vue({
    24.             el: "#app",
    25.             data: {
    26.                 list: [
    27.                     "九月九日忆山东兄弟",
    28.                     "王维",
    29.                     "独在异乡为异客，",
    30.                     "每逢佳节倍思亲。",
    31.                     "遥知兄弟登高处，",
    32.                     "遍插茱萸少一人。"
    33.                 ]
    34.             }
    35.         });
    36.     </script>
    37. </body>
    38.  
    39. </html>

    17、computed

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    10.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    11.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    12. </head>
    13.  
    14. <body>
    15.     <!-- 视图层 -->
    16.     <div id="app">
    17.         <p><input type="text" placeholder="根据姓名搜索" v-model="SelectKey" /></p>
    18.         <hr/>
    19.         <table class="table table-hover table-border text-center">
    20.             <tr class="info">
    21.                 <td> 编号 </td>
    22.                 <td> 姓名 </td>
    23.                 <td> 薪水 </td>
    24.                 <td> 性别 </td>
    25.                 <td> 操作 </td>
    26.             </tr>
    27.             <tr v-for="(item,index) in newlist">
    28.                 <td>{{item.id}}</td>
    29.                 <td>{{item.name}}</td>
    30.                 <td>{{item.price}}</td>
    31.                 <td>{{item.sex==0?"女":"男"}}</td>
    32.                 <td><button class="btn btn-success">删除</button></td>
    33.             </tr>
    34.         </table>
    35.     </div>
    36.     <!-- 环境 -->
    37.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    38.     <!-- 视图模型 -->
    39.     <script>
    40.         new Vue({
    41.             el: "#app",
    42.             data: {
    43.                 list: [{
    44.                     id: 1,
    45.                     name: "黄杰",
    46.                     price: 100,
    47.                     sex: 1
    48.                 }, {
    49.                     id: 2,
    50.                     name: "李炳钊",
    51.                     price: 999999,
    52.                     sex: 1
    53.                 }, {
    54.                     id: 3,
    55.                     name: "张培海",
    56.                     price: 888888,
    57.                     sex: 1
    58.                 }, {
    59.                     id: 4,
    60.                     name: "雷静",
    61.                     price: 50000,
    62.                     sex: 0
    63.                 }, {
    64.                     id: 5,
    65.                     name: "李春梦",
    66.                     price: 1000000,
    67.                     sex: 0
    68.                 }],
    69.                 SelectKey: ""
    70.             },
    71.             computed: {
    72.                 newlist: function() {
    73.                     var _this = this; //影分身
    74.                     return _this.list.filter(function(o) {
    75.                         return o.name.indexOf(_this.SelectKey) != -1;
    76.                     });
    77.                 }
    78.             }
    79.         })
    80.     </script>
    81. </body>
    82.  
    83. </html>

    18、table增加操作

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    10.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    11.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    12. </head>
    13.  
    14. <body>
    15.     <!-- 视图层 -->
    16.     <div id="app">
    17.         <p>
    18.             编号:<input type="text" placeholder="请输入编号" v-model="id" /> 姓名:
    19.             <input type="text" placeholder="请输入姓名" v-model="name" /> 薪水:
    20.             <input type="text" placeholder="请输入薪水" v-model="price" /> 性别:
    21.             <input type="text" placeholder="请输入性别" v-model="sex" />
    22.             <button v-on:click="addInfo" class="btn btn-primary">添加信息</button>
    23.         </p>
    24.  
    25.         <hr/>
    26.         <p><input type="text" placeholder="请输入搜索内容" v-model="SelectKey" /></p>
    27.         <hr/>
    28.         <table class="table table-hover table-border text-center">
    29.             <tr class="info">
    30.                 <td> 编号 </td>
    31.                 <td> 姓名 </td>
    32.                 <td> 薪水 </td>
    33.                 <td> 性别 </td>
    34.                 <td> 操作 </td>
    35.                 </td>
    36.             </tr>
    37.             <tr v-for="(item,index) in newlist">
    38.                 <td>{{item.id}}</td>
    39.                 <td>{{item.name}}</td>
    40.                 <td>{{item.price}}</td>
    41.                 <td>{{item.sex==0?"女":"男"}}</td>
    42.                 <td><button class="btn btn-success">删除</button></td>
    43.             </tr>
    44.         </table>
    45.     </div>
    46.     <!-- 环境 -->
    47.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    48.     <!-- 视图模型 -->
    49.     <script>
    50.         new Vue({
    51.             el: "#app",
    52.             data: {
    53.                 list: [{
    54.                     id: 1,
    55.                     name: "黄杰",
    56.                     price: 100,
    57.                     sex: 1
    58.                 }, {
    59.                     id: 2,
    60.                     name: "李炳钊",
    61.                     price: 999999,
    62.                     sex: 1
    63.                 }, {
    64.                     id: 3,
    65.                     name: "张培海",
    66.                     price: 888888,
    67.                     sex: 1
    68.                 }, {
    69.                     id: 4,
    70.                     name: "雷静",
    71.                     price: 50000,
    72.                     sex: 0
    73.                 }, {
    74.                     id: 5,
    75.                     name: "李春梦",
    76.                     price: 1000000,
    77.                     sex: 0
    78.                 }],
    79.                 SelectKey: "",
    80.                 id: 0,
    81.                 name: "",
    82.                 price: 0,
    83.                 sex: 0
    84.             },
    85.             computed: {
    86.                 newlist: function() {
    87.                     var _this = this; //影分身
    88.                     return _this.list.filter(function(o) {
    89.                         return o.name.indexOf(_this.SelectKey) != -1;
    90.                     });
    91.                 }
    92.             },
    93.             methods: {
    94.                 addInfo: function() {
    95.                     this.list.push({
    96.                         id: this.id,
    97.                         name: this.name,
    98.                         price: this.price,
    99.                         sex: this.sex
    100.                     });
    101.                 }
    102.             }
    103.  
    104.         })
    105.     </script>
    106. </body>
    107.  
    108. </html>

    19、table删除操作

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    10.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    11.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    12. </head>
    13.  
    14. <body>
    15.     <!-- 视图层 -->
    16.     <div id="app">
    17.         <p>
    18.             编号:<input type="text" placeholder="请输入编号" v-model="id" /> 姓名:
    19.             <input type="text" placeholder="请输入姓名" v-model="name" /> 薪水:
    20.             <input type="text" placeholder="请输入薪水" v-model="price" /> 性别:
    21.             <input type="text" placeholder="请输入性别" v-model="sex" />
    22.             <button v-on:click="addInfo" class="btn btn-primary">添加信息</button>
    23.         </p>
    24.  
    25.         <hr/>
    26.         <p><input type="text" placeholder="请输入搜索内容" v-model="SelectKey" /></p>
    27.         <hr/>
    28.         <table class="table table-hover table-border text-center">
    29.             <tr class="info">
    30.                 <td> 编号 </td>
    31.                 <td> 姓名 </td>
    32.                 <td> 薪水 </td>
    33.                 <td> 性别 </td>
    34.                 <td> 操作 </td>
    35.             </tr>
    36.             <tr v-for="(item,index) in newlist">
    37.                 <td>{{item.id}}</td>
    38.                 <td>{{item.name}}</td>
    39.                 <td>{{item.price}}</td>
    40.                 <td>{{item.sex==0?"女":"男"}}</td>
    41.                 <td><button class="btn btn-success" v-on:click="del(index)">删除</button></td>
    42.             </tr>
    43.         </table>
    44.     </div>
    45.     <!-- 环境 -->
    46.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    47.     <!-- 视图模型 -->
    48.     <script>
    49.         new Vue({
    50.             el: "#app",
    51.             data: {
    52.                 list: [{
    53.                     id: 1,
    54.                     name: "黄杰",
    55.                     price: 100,
    56.                     sex: 1
    57.                 }, {
    58.                     id: 2,
    59.                     name: "李炳钊",
    60.                     price: 999999,
    61.                     sex: 1
    62.                 }, {
    63.                     id: 3,
    64.                     name: "张培海",
    65.                     price: 888888,
    66.                     sex: 1
    67.                 }, {
    68.                     id: 4,
    69.                     name: "雷静",
    70.                     price: 50000,
    71.                     sex: 0
    72.                 }, {
    73.                     id: 5,
    74.                     name: "李春梦",
    75.                     price: 1000000,
    76.                     sex: 0
    77.                 }],
    78.                 SelectKey: "",
    79.                 id: 0,
    80.                 name: "",
    81.                 price: 0,
    82.                 sex: 0
    83.             },
    84.             computed: {
    85.                 newlist: function() {
    86.                     var _this = this; //影分身
    87.                     return _this.list.filter(function(o) {
    88.                         return o.name.indexOf(_this.SelectKey) != -1;
    89.                     });
    90.                 }
    91.             },
    92.             methods: {
    93.                 addInfo: function() {
    94.                     this.list.push({
    95.                         id: this.id,
    96.                         name: this.name,
    97.                         price: this.price,
    98.                         sex: this.sex
    99.                     });
    100.                 },
    101.                 del: function(o) {
    102.                     if (confirm('是否删除此行?')) {
    103.                         this.list.splice(o, 1);
    104.                     }
    105.                 }
    106.             }
    107.  
    108.         })
    109.     </script>
    110. </body>
    111.  
    112. </html>

    20、table修改

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    10.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    11.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    12. </head>
    13.  
    14. <body>
    15.     <!-- 视图层 -->
    16.     <div id="app">
    17.         <p>
    18.             编号:<input type="text" placeholder="请输入编号" v-model="id" /> 姓名:
    19.             <input type="text" placeholder="请输入姓名" v-model="name" /> 薪水:
    20.             <input type="text" placeholder="请输入薪水" v-model="price" /> 性别:
    21.             <input type="text" placeholder="请输入性别" v-model="sex" />
    22.             <button v-on:click="addInfo" class="btn btn-primary">添加信息</button>
    23.             <button v-on:click="updateById" class="btn btn-primary">保存修改</button>
    24.         </p>
    25.  
    26.         <hr/>
    27.         <p><input type="text" placeholder="请输入搜索内容" v-model="SelectKey" /></p>
    28.         <hr/>
    29.         <table class="table table-hover table-border text-center">
    30.             <tr class="info">
    31.                 <td> 编号 </td>
    32.                 <td> 姓名 </td>
    33.                 <td> 薪水 </td>
    34.                 <td> 性别 </td>
    35.                 <td> 操作 </td>
    36.             </tr>
    37.             <tr v-for="(item,index) in newlist">
    38.                 <td>{{item.id}}</td>
    39.                 <td>{{item.name}}</td>
    40.                 <td>{{item.price}}</td>
    41.                 <td>{{item.sex==0?"女":"男"}}</td>
    42.                 <td><button class="btn btn-success" v-on:click="del(index)">删除</button>
    43.                     <button class="btn btn-primary" v-on:click="getInfo(item)">修改</button></td>
    44.             </tr>
    45.         </table>
    46.     </div>
    47.     <!-- 环境 -->
    48.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    49.     <!-- 视图模型 -->
    50.     <script>
    51.         new Vue({
    52.             el: "#app",
    53.             data: {
    54.                 list: [{
    55.                     id: 1,
    56.                     name: "黄杰",
    57.                     price: 100,
    58.                     sex: 1
    59.                 }, {
    60.                     id: 2,
    61.                     name: "李炳钊",
    62.                     price: 999999,
    63.                     sex: 1
    64.                 }, {
    65.                     id: 3,
    66.                     name: "张培海",
    67.                     price: 888888,
    68.                     sex: 1
    69.                 }, {
    70.                     id: 4,
    71.                     name: "雷静",
    72.                     price: 50000,
    73.                     sex: 0
    74.                 }, {
    75.                     id: 5,
    76.                     name: "李春梦",
    77.                     price: 1000000,
    78.                     sex: 0
    79.                 }],
    80.                 SelectKey: "",
    81.                 id: 0,
    82.                 name: "",
    83.                 price: 0,
    84.                 sex: 0
    85.             },
    86.             computed: {
    87.                 newlist: function() {
    88.                     var _this = this; //影分身
    89.                     return _this.list.filter(function(o) {
    90.                         return o.name.indexOf(_this.SelectKey) != -1;
    91.                     });
    92.                 }
    93.             },
    94.             methods: {
    95.                 addInfo: function() {
    96.                     this.list.push({
    97.                         id: this.id,
    98.                         name: this.name,
    99.                         price: this.price,
    100.                         sex: this.sex
    101.                     });
    102.                 },
    103.                 del: function(o) {
    104.                     if (confirm('是否删除此行?')) {
    105.                         this.list.splice(o, 1);
    106.                     }
    107.                 },
    108.                 getInfo: function(o) {
    109.                     this.id = o.id;
    110.                     this.name = o.name;
    111.                     this.price = o.price;
    112.                     this.sex = o.sex;
    113.                 },
    114.                 updateById: function() {
    115.                     for (var index = 0; index < this.list.length; index++) {
    116.                         var item = this.list[index];
    117.                         if (item.id == this.id) {
    118.                             console.log(item.id);
    119.                             this.list[index].name = this.name;
    120.                             this.list[index].price = this.price;
    121.                             this.list[index].sex = this.sex;
    122.                             return;
    123.                         }
    124.                     }
    125.                 }
    126.             }
    127.  
    128.         })
    129.     </script>
    130. </body>
    131.  
    132. </html>

    21、template

    基础声明

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <myheart></myheart>
    14.     </div>
    15.     <script src="js/vue.js"></script>
    16.     <script>
    17.         //搭建母版
    18.         var myheart_tem = Vue.extend({
    19.             template: "<div><h1>My Heart Will Go On</h1><hr/><p>爱无止境·肉丝·杰克</p></div>"
    20.         });
    21.         //创建组件，第一个参数是自定义组件名称，母版
    22.         Vue.component("myheart", myheart_tem);
    23.         //创建VUE
    24.         new Vue({
    25.             el: "#app"
    26.         })
    27.     </script>
    28. </body>
    29.  
    30. </html>

    template简单使用 

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <style>
    10.         * {
    11.             margin: 0px;
    12.             padding: 0px;
    13.         }
    14.         
    15.         body {
    16.             overflow: hidden;
    17.         }
    18.         
    19.         .myh {
    20.             background: #2E6EC2;
    21.             height: 10vh;
    22.             color: white;
    23.             font-size: 3rem;
    24.             line-height: 10vh;
    25.         }
    26.         
    27.         .myc {
    28.             background-color: #F8F1DC;
    29.             text-align: center;
    30.             height: 85vh;
    31.             font-size: 5rem;
    32.             line-height: 85vh;
    33.         }
    34.         
    35.         .myf {
    36.             background: #2E6EC2;
    37.             text-align: center;
    38.             height: 5vh;
    39.             color: white;
    40.             font-size: 2rem;
    41.             line-height: 5vh;
    42.         }
    43.     </style>
    44. </head>
    45.  
    46. <body>
    47.     <div id="app">
    48.         <myhead></myhead>
    49.         <mycontent></mycontent>
    50.         <myfoot></myfoot>
    51.     </div>
    52.     <!-- 环境 -->
    53.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    54.     <script>
    55.         //创建母版
    56.         var head = Vue.extend({
    57.             template: "<div class='myh'>后台管理系统</div>"
    58.         });
    59.         var content = Vue.extend({
    60.             template: "<div class='myc'>后台管理中心内容</div>"
    61.         });
    62.         var foot = Vue.extend({
    63.             template: "<div class='myf'>版权所有：项目开发组</div>"
    64.         });
    65.         //绑定组件
    66.         Vue.component("myhead", head);
    67.         Vue.component("mycontent", content);
    68.         Vue.component("myfoot", foot);
    69.         new Vue({
    70.             el: "#app"
    71.         })
    72.     </script>
    73. </body>
    74.  
    75. </html>

    22、components绑定组件

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <h1>一堆水果的遍历</h1>
    14.         <!-- 需要的自定义的组件 -->
    15.         <show-fruit></show-fruit>
    16.     </div>
    17.     <!-- 模板·在APP的外面 -->
    18.     <template id="show">
    19.         <div>
    20.             <ul>
    21.                 <li v-for="item in list">{{item}}</li>
    22.             </ul>
    23.         </div>
    24.     </template>
    25.     <!-- 环境 -->
    26.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    27.     <script>
    28.         new Vue({
    29.             el: "#app",
    30.             components: { //绑定组件
    31.                 "show-fruit": {
    32.                     data: function() {
    33.                         return {
    34.                             list: ["百香果", "蛇皮果", "姑娘果", "莲雾", "雪莲果"]
    35.                         }
    36.                     },
    37.                     template: "#show"
    38.                 }
    39.             }
    40.         })
    41.     </script>
    42. </body>
    43.  
    44. </html>

    23、props传值

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    10.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    11.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    12. </head>
    13.  
    14. <body>
    15.     <div id="app">
    16.         <h1 align="center">员工信息表</h1>
    17.         <!-- 自定义组件名称 -->
    18.         <showlist :newlist="list"></showlist>
    19.     </div>
    20.     <!-- 组件的模板 -->
    21.     <template id="show">
    22.             <table class="table table-border" style="text-align: center">
    23.                 <tr class="info">
    24.                     <td>编号</td>
    25.                     <td>诗词名称</td>
    26.                     <td>作者</td>
    27.                     <td>经典词语</td>
    28.                 </tr>
    29.                 <tr v-for="item in newlist">
    30.                     <td>{{item.id}}</td>
    31.                     <td>{{item.name}}</td>
    32.                     <td>{{item.worker}}</td>
    33.                     <td><pre>{{item.classic}}</pre></td>
    34.                 </tr>
    35.             </table>
    36.     </template>
    37.     <!-- 环境 -->
    38.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    39.     <script>
    40.         new Vue({
    41.             el: "#app",
    42.             data: {
    43.                 list: [{
    44.                     id: 1,
    45.                     name: "《将进酒》",
    46.                     worker: "李白",
    47.                     classic: "烹羊宰牛且为乐，会须一饮三百杯！"
    48.                 }, {
    49.                     id: 2,
    50.                     name: "《夏日绝句》",
    51.                     worker: "李清照",
    52.                     classic: "生当作人杰，死亦为鬼雄！"
    53.                 }, {
    54.                     id: 3,
    55.                     name: "《长恨歌》",
    56.                     worker: "白居易",
    57.                     classic: "回眸一笑百媚生，六宫粉黛无颜色。"
    58.                 }, {
    59.                     id: 4,
    60.                     name: "《锦瑟》",
    61.                     worker: "李商隐",
    62.                     classic: "锦瑟无端五十弦，一弦一度思华年！"
    63.                 }]
    64.  
    65.             },
    66.             components: {
    67.                 "showlist": {
    68.                     props: ["newlist"],
    69.                     template: "#show"
    70.                 }
    71.  
    72.             }
    73.         })
    74.     </script>
    75. </body>
    76.  
    77. </html>

    24、components子父组件的使用

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    10.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    11.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    12.  
    13. </head>
    14.  
    15. <body>
    16.     <div id="app">
    17.         <h1>员工管理系统</h1>
    18.         <!-- 父类组件 -->
    19.         <fu-temp :showlist="list"></fu-temp>
    20.     </div>
    21.     <!-- 父类模板 -->
    22.     <template id="fu">
    23.         <div>
    24.             搜索：<input type="text" v-model="SelectKey" placeholder="请输入搜索内容"/>
    25.             <hr/>
    26.             <zi-temp :newlist="filterlist"></zi-temp>
    27.         </div>
    28.     </template>
    29.     <!-- 子类模板 -->
    30.     <template id="zi">
    31.         <div>
    32.             <table class="table table-border" style="text-align: center">
    33.                         <tr class="info">
    34.                             <td>编号</td>
    35.                             <td>诗词名称</td>
    36.                             <td>作者</td>
    37.                             <td>经典词语</td>
    38.                         </tr>
    39.                         <tr v-for="item in newlist">
    40.                             <td>{{item.id}}</td>
    41.                             <td>{{item.name}}</td>
    42.                             <td>{{item.worker}}</td>
    43.                             <td><pre>{{item.classic}}</pre></td>
    44.                         </tr>
    45.              </table>
    46.         </div>
    47.     </template>
    48.     <!-- 环境 -->
    49.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    50.     <script>
    51.         new Vue({
    52.             el: "#app",
    53.             data: {
    54.                 list: [{
    55.                     id: 1,
    56.                     name: "《将进酒》",
    57.                     worker: "李白",
    58.                     classic: "烹羊宰牛且为乐，会须一饮三百杯！"
    59.                 }, {
    60.                     id: 2,
    61.                     name: "《夏日绝句》",
    62.                     worker: "李清照",
    63.                     classic: "生当作人杰，死亦为鬼雄！"
    64.                 }, {
    65.                     id: 3,
    66.                     name: "《长恨歌》",
    67.                     worker: "白居易",
    68.                     classic: "回眸一笑百媚生，六宫粉黛无颜色。"
    69.                 }, {
    70.                     id: 4,
    71.                     name: "《锦瑟》",
    72.                     worker: "李商隐",
    73.                     classic: "锦瑟无端五十弦，一弦一度思华年！"
    74.                 }]
    75.             },
    76.             components: {
    77.                 "fu-temp": {
    78.                     props: ["showlist"],
    79.                     data: function() {
    80.                         return {
    81.                             SelectKey: ""
    82.                         }
    83.                     },
    84.                     template: "#fu",
    85.                     components: {
    86.                         "zi-temp": {
    87.                             props: ["newlist"],
    88.                             template: "#zi"
    89.                         }
    90.                     },
    91.                     computed: {
    92.                         filterlist: function() {
    93.                             var _this = this;
    94.                             return _this.showlist.filter(function(o) {
    95.                                 return o.classic.indexOf(_this.SelectKey) != -1;
    96.                             });
    97.                         }
    98.                     }
    99.                 }
    100.             }
    101.  
    102.         });
    103.     </script>
    104. </body>
    105.  
    106. </html>

    25、slot插槽使用

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <h1>三好学生遍历</h1>
    14.         <!-- 声明自定义组件 -->
    15.         <showinfo :newlist="list">
    16.             <template slot="cache" slot-scope="props">
    17.                 <li>{{props.item}}</li>
    18.             </template>
    19.         </showinfo>
    20.     </div>
    21.     <template id="show">
    22.         <div>
    23.             <slot name="cache" v-for="item in newlist" :item="item"></slot>
    24.         </div>
    25.     </template>
    26.     <!-- 环境 -->
    27.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    28.     <script>
    29.         new Vue({
    30.             el: "#app",
    31.             data: {
    32.                 list: ["王佳乐", "张雄飞", "宋建飞"]
    33.             },
    34.             components: {
    35.                 "showinfo": {
    36.                     props: ["newlist"],
    37.                     template: "#show"
    38.                 }
    39.             }
    40.         })
    41.     </script>
    42. </body>
    43.  
    44. </html>
  • 相关阅读:
    （3）(3.5) 遥测无线电区域条例
    k8s实践总结
    多版本并发控制MVCC
    matlab习题 —— 符号运算相关练习
    【NLP】第6章 使用 Transformer 进行机器翻译
    项目管理小技能：计划的三个关键动作（对资源的取舍、共识计划、识别风险）
    QT中导出 Qt Tablewidget表格数据导出到 .csv文件
    在Redux Toolkit中使用redux-persist进行状态持久化
    全面解析缓存应用经典问题
    计算机主机名与用户名区别
  • 原文地址：https://blog.csdn.net/feng8403000/article/details/125383250