一 什么是VUE
它是一个构建用户界面的JavaScript框架，自动生成(js,css,HTML文件)
二 如何使用VUE
1. 应用vues.js
<script src="vue.js"></script>
2. 展示html
<div id="app"> <input type="text" v-model="msg"> <p>{{msg}}</p> </div>
3. 建立vue对象
<script> new Vue({ el:"#app", // 表示在当前这个元素内开始使用VUE data:{ msg:'' } }) </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="msg"> <p>{{msg}}</p> </div> <script> new Vue({ el:"#app", // 表示在当前这个元素内开始使用VUE data:{ msg:'' } }) </script> </body> </html>
三 在元素当中插入值
1. {{}}：里面可以放表达式 2. 指令：是带有V-前缀(v-model="msg")的特殊属性,通过属性来操作元素 v-model: 把input的值事件绑定了,实现了数据和视图的双向绑定 分成三步： 1. 把元素的值和数据想绑定 2. 当输入内容时,数据同步发生变化,实现了视图----->到数据的驱动 3. 当改变数据时,输入内容也会发送变化,数据----->视图的驱动 v-text: 在元素当插入值 v-html: 在元素不中不仅可以插入文本,还可以插入标签:使用 <h2 v-html="hd"></h2> hd:'<input type="button" value="叫爸爸">', v-if: 根据表达式的真假值来动态插入或移除元素(注释掉<!------>,不存在DOM元素中) v-show: 根据表达式的真假值来隐藏(通过css隐藏dispaly:none,存在DOM元素中)和显示元素 v-for: 根据变量的值来循环渲染元素 v-on: 监听元素事件,并执行相应的操作 v-on:click='show()' 等用于 @click='show()' @只能做事件的绑定 v-bind: 绑定元素的属性来执行相应的操作 v-bind:href="url" 等同于 :href="url" 3. 对数组的操作： push pop shift 删除第一个值 unshif 删除最后一个值 splice 删除中间一个值,splice(index,1) reverse 给数组进行反转
四 在元素当中插入值
new Vue({ el: "#app", // 表示在当前这个元素内开始使用VUE data: { }, directives:{ focus:{ // 指令的名字 /** 当绑定的元素显示时 **/ inserted:function (tt) { tt.focus(); } } } });
五 指令示例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="vue.js"></script> 7 <style> 8 ul li { 9 list-style: none; 10 } 11 </style> 12 </head> 13 <body> 14 15 <div id="app"> 16 <input type="text" v-model="msg" value="this is test"> 17 <p>{{msg}}</p> 18 <input type="button" value="变化" @click="change"> 19 </div> 20 21 22 <script> 23 var vm = new Vue({ 24 el: "#app", // 表示在当前这个元素内开始使用VUE 25 data: { 26 msg:'aaaa' 27 }, 28 methods:{ 29 change:function () { 30 this.msg=888888 31 } 32 } 33 34 }); 35 36 </script> 37 38 39 </body> 40 </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bk_1 { background-color: dodgerblue; width: 200px; height: 200px; } .bk_2 { background-color: red; width: 200px; height: 200px; } .bk_3 { border: 2px solid black; } </style> <script src="vue.js"></script> </head> <body> <div id="app"> <a href="http://www.qq.com" v-bind:title="msg">腾讯</a> <div :class="bk"></div> <div :class="bk2"></div> <div :class="{bk_2:temp}">bk2</div> <div :class="[bk2,bk3]">1111111111</div> </div> <script> var vm = new Vue({ el: "#app", // 表示在当前这个元素内开始使用VUE data: { msg: '点击进入腾讯副本', bk:'bk_1', bk2:'bk_2', bk3:'bk_3', temp:true } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> ul li { list-style: none; } </style> </head> <body> <div id="app"> <ul> <li v-for="item in arr">{{item}}</li> </ul> <ul> <li v-for="(index,item) in arr">{{index}} {{item}}</li> </ul> <ul> <li v-for="(index,item) in obj">{{index}} {{item}}</li> </ul> <ul> <li v-for="item in obj2">{{item.username}}{{item.age}}{{item.sex}}</li> </ul> <div v-for="i in 8"> {{i}} </div> </div> <script> var vm = new Vue({ el: "#app", // 表示在当前这个元素内开始使用VUE data: { arr: [11, 22, 33, 44, 55], obj: { a: '张三', b: 'GPD', c: 'UDP', d: 'TCP', e: 'VRP' }, obj2:[{username:'alex'},{age:'20'},{sex:'male'}] } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="msg"> <p v-if="pick">我是刘德华</p> <p v-else>我是张学友</p> <p v-show="temp">我是张渣辉</p> <p v-if="ok">我是古天落</p> </div> <script> var vm=new Vue({ el:"#app", // 表示在当前这个元素内开始使用VUE data:{ pick:false, //不显示 temp:true, ok:true } }); window.setInterval(function () { vm.ok= !vm.ok; },1000) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> ul li { list-style: none; } </style> </head> <body> <div id="app"> <ul> <li v-for="item in arr">{{item}}</li> </ul> <ul> <li v-for="(index,item) in arr">{{index}} {{item}}</li> </ul> <ul> <li v-for="(index,item) in obj">{{index}} {{item}}</li> </ul> <ul> <li v-for="item in obj2">{{item.username}}{{item.age}}{{item.sex}}</li> </ul> <!--<input type="button" value="点我" v-on:click='show()'>--> <input type="button" value="点我" @click='show()'> <!--<a v-bind:href="url">点击进百度</a>--> <a :href="url">点击进百度</a> </div> <script> var vm = new Vue({ el: "#app", // 表示在当前这个元素内开始使用VUE data: { arr: [11, 22, 33, 44, 55], obj: { a: '张三', b: 'GPD', c: 'UDP', d: 'TCP', e: 'VRP' }, obj2:[{username:'alex'},{age:'20'},{sex:'male'}], str:'I comming', url:"http://www.qq.com" }, methods:{ show:function () { /**<!---如果没有定义vm --->**/ /* alert(vm.str) **/ // alert(this.str); // 对数组进行操作 this.arr.pop() } } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> ul li { list-style: none; } </style> </head> <body> <div class="app2"> <h3>调查问卷</h3> <p>苹果<input type="checkbox"></p> <p>香蕉<input type="checkbox"></p> <p>白菜<input type="checkbox"></p> <p>番茄<input type="checkbox"></p> <p>葡萄<input type="checkbox"></p> <p>其他<input type="checkbox" @click="add()"></p> <p v-show="qh" v-html="hd"></p> </div> <script> var vm = new Vue({ el: ".app2", // 表示在当前这个元素内开始使用VUE,element：el 必须这样写 data: { hd:'<input type="text" >', qh:false }, methods: { add: function (t) { this.qh = !this.qh } } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> ul li { list-style: none; } </style> </head> <body> <div id="app"> <div> <p><input type="text" placeholder="姓名" v-model="username"></p> <p><input type="text" placeholder="年龄" v-model="age"></p> <input type="button" value="增加" @click="add"> </div> <div> <table cellspacing="0"> <tbody> <tr v-for="(index,item) in arr"> <td>{{item.username}}</td> <td>{{item.age}}</td> <td>{{index}}</td> <td> <button @click="del(index)">删除</button> </td> </tr> </tbody> </table> </div> </div> <script> var vm = new Vue({ el: "#app", // 表示在当前这个元素内开始使用VUE data: { username:'', age:'', arr:[] }, methods:{ add:function () { this.arr.push({username:this.username,age:this.age}); console.log(this.arr) }, del:function (index) { this.arr.splice(index,1) } } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul li { list-style: none; display: inline-block; border: 1px solid dodgerblue; height: 30px; line-height: 30px; width: 120px; text-align: center; } </style> <script src="vue.js"></script> </head> <body> <div id="box"> <ul> <li v-on:click="qh(true)"> <span >二维码登录</span> </li> <li v-on:click="qh(false)"> <span >邮箱登录</span> </li> </ul> <div style="margin-left:80px" v-if="temp"> <img src="getUrlQrcode.jpg" alt=""> </div> <div style="margin-left:80px" v-if="!temp"> <form action="https://mail.163.com/" method="post"> <p><input type="email"></p> <p><input type="password"></p> <p><input type="submit" value="登录"></p> </form> </div> </div> <script> new Vue({ el: '#box', data: { temp:true }, methods:{ qh:function (t) { console.log(t); this.temp=t } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> ul li { list-style: none; } .tipbox{ width: 200px; height: 250px; border: 1px solid dodgerblue; text-align: center; } </style> </head> <body> <div id="app"> <div> <p><input type="text" placeholder="姓名" v-model="username"></p> <p><input type="text" placeholder="年龄" v-model="age"></p> <input type="button" value="增加" @click="add"> </div> <div> <table cellspacing="0" border="1px solid"> <tbody> <tr v-for="(index,item) in arr"> <td>{{item.username}}</td> <td>{{item.age}}</td> <td>{{index}}</td> <td><button @click="del(index)">删除</button></td> <td><button @click="showBox(index)">编辑</button></td> </tr> </tbody> </table> </div> <div class="tipbox" v-show="isShow"> <h3>修改信息</h3> <p><input type="text" placeholder="姓名" v-model="m_username"></p> <p><input type="text" placeholder="年龄" v-model="m_age"></p> <p> <input type="button" value="确定" @click="save()"> <input type="button" value="取消" @click="cancel()"> </p> </div> </div> <script> var vm = new Vue({ el: "#app", // 表示在当前这个元素内开始使用VUE data: { username:'', age:'', arr:[], isShow:false, m_username:'', m_age:'', n:0 }, methods:{ add:function () { this.arr.push({username:this.username,age:this.age}); console.log(this.arr) }, del:function (index) { this.arr.splice(index,1) }, showBox:function (index) { this.isShow=true; this.m_username = this.arr[index].username; this.m_age = this.arr[index].age; this.n=index }, cancel:function () { this.isShow=false; }, save:function () { this.arr[this.n].username=this.m_username; this.arr[this.n].age=this.m_age; this.isShow=false; } } }); </script> </body> </html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
