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>
