vue 快速学习、基础用法
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>
</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>
</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;}
</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>
</html14、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>
</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>
</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>
还未添加个人签名 2022.05.23 加入
区块链项目开发，咨询weixin：hkkf5566
评论