什么是Vue?
vue是一个构建用户界面的javascript框架
特点:轻量,高效,简单易学,现阶段最盛行的前端三大框架(Vue,Angular,React)之一
特性:双向数据绑定,数据驱使视图
# 安装Vue 在bootvue上找到下载网址下载 ps:可以直接引用网址,也可以下载下来放在js文件中引用
如何使用?
1 引入vue.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", data:{ msg:"" } }) </script>
在元素中插入值:
# {{}},里面可以放表达式 <div id="app"> <p>{{msg}}</p> # 变量 <p>{{80+20}}</p> # 整数 <p>{{20>30}}</p> # 布尔值 </div> <script > new Vue({ el:"#app", data:{ msg:"我自狂歌空度日,飞扬跋扈为谁雄", } }) </script>
指令:是带有V-前缀的特殊属性,通过属性来操作元素
VUE指令1:v-text及v-html:
v-text: //插入一段文本 <div id="app"> <p v-text="message"></p> </div> <script> var vm = new Vue({ el:'#app', data:{ message:'hello world !' } }) </script>
v-html: //既可以插入一段文本也可以插入html标签 <div id="app"> <p v-html="message"></p> </div> <script> var vm = new Vue({ el:'#app', data:{ message:"<input type='button'>" } }) </script>
<!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> <input type="checkbox">苹果 </li> <li> <input type="checkbox">香蕉 </li> <li> <input type="checkbox">香梨 </li> <li> <input type="checkbox" v-on:click="create()">其它 </li> <li v-html="htmlstr" v-show="test"> </li> </ul> </div> <script> var vm = new Vue({ el: "app", //表示在当前这个元素内开始使用VUE data:{ htmlstr: "<textarea></textarea>", test: false }, methods: { create: function () { this.test = !this.test; } } }) </script> </body> </html>
VUE指令2:v-bind:
v-bind 指令可以更新 HTML 属性: <a v-bind:href="url">...</a> 在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 缩写:<a :href="url">...</a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> .bk_1{ background-color: cornflowerblue; 200px; height: 200px; } .bk_2{ background-color: red; 200px; height: 200px; } .bk_3{ border: 5px solid #000; } </style> </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}">fdjjdjdkdkkeedd</div> <div :class="[bk2,bk3]">8888888888</div> </div> <script > new Vue({ el:"#app", data:{ msg: "我想去腾讯公司上班", bk:"bk_1", bk2:"bk_2", bk3:"bk_3", temp: false } }) </script> </body> </html>
VUE指令3:v-if:
条件判断(v-ifv-else) v-if 指令将根据表达式的真假值(true 或 false )来决定是否插入 元素。
<div id="app"> <ul v-if="ok"> <li> 我是帅哥 </li> </ul> <ul v-else> <li> 我是酷哥 </li> </ul> </div> <script> new Vue({ el: '#app', data: { ok: true } }) </script>
VUE指令4:v-show:
根据表达式的真假值来渲染元素 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。 用法: <h1 v-show="ok">Hello!</h1>
<div id="app"> <p v-show="ds">hello,美女</p> <p v-show="ok">对面的女孩看过来</p> </div> <script > var vm = new Vue({ el:"#app", data:{ ds:false, ok:true }, }) window.setInterval(function(){ # 在页面上按固定时间闪烁 vm.ok = !vm.ok; },1000) </script>
VUE指令5:v-on:
# 监听事件 事件:clickkeydown 用法: <button v-on:click="greet"></button> 可以简写为 <button @click="greet"></button> v-on 可以接收一个定义的方法来调用。 ######对数组的操作###### push 数组最后添加元素 pop 删除 shift 最前边删除元素 unshift 最前边添加元素 splice 删除中间某一元素 reverse 反转
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> ul li{ list-style: none; display: inline-block; border: 1px solid cornflowerblue; height:40px; line-height: 40px; 120px; text-align: center; } </style> </head> <body> <div id="mybox"> <ul> <li> <span v-on:click="qh(true)">二唯码登录</span> </li> <li> <span v-on:click="qh(false)">邮箱登录</span> </li> </ul> <div v-show="temp"> <img src="erma.jpg"> </div> <div v-show="!temp"> <form action="http://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:"#mybox", data:{ temp: true }, methods: { qh: function (t) { this.temp = t } } }) </script> </body> </html>
VUE指令6:v-for:
# 列表渲染 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。 <ul id="app"> <li v-for="item in items"> {{ item.pk}} </li> </ul> var vm = new Vue({ el: '#app', data: { arr:[ {pk:'foo'}, {pk:'bar'} ] } })
# v-for
还支持一个可选的第二个参数为当前项的索引。
<div id="app"> <ul> <li v-for="(index,item) in arr"> {{item}}:{{index}} #index 索引 </li> </ul> </div> <script > new Vue({ el:"#app", data:{ arr: [11,22,33,44,55], } }) </script>
# 你也可以用 of
替代 in
作为分隔符,因为它是最接近 JavaScript 迭代器的语法:
<div v-for="item of items"></div>
一个对象的 v-for:
你也可以用 v-for
通过一个对象的属性来迭代:
<body> <div id="app"> <ul> <li v-for="(index,item) in arr"> {{item}}:{{index}} </li> </ul> <ul> <li v-for="(index1,item,key) in obj"> {{key}}:{{item}}:{{index1}} </li> </ul> <ul> <li v-for="item in obj2"> {{item.username}} {{item.age}} {{item.sex}} </li> </ul> </div> <script > new Vue({ el:"#app", data:{ arr:[11,22,33,44,55] obj: {a:"张三",b:"李四",c:"王大拿",d:"谢大脚"}, obj2:[ {username: "jason"}, {age: 20}, {sex: "male"} ] } }) </script>
VUE指令7:v-model:(重点)
v-model:实现数据和视图双向绑定 分成了3步: 1)把元素的值和数据相绑定 2)当输入内容时,数据同步发生变化,视图--->数据的驱动 3)当改变数据时,输入内容也会发生变化,数据--->视图的驱动
<!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"> <input v-model="msg"> <p>{{msg}}</p> <input type="button" value="变化" @click="change"> </div> <script > new Vue({ el:"#app", data:{ msg:"aaa" }, methods:{ change:function(){ this.msg = 8888; } } }) </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> <input type="text" placeholder="姓名" v-model="username"> <input type="text" placeholder="年龄" v-model="age"> <input type="button" value="增加" @click="add"> </div> <div> <table cellpadding="0" border="1"> <tr v-for="(item,index) in arr"> <td>{{index}}</td> <td><input type="text" class="txt" v-model="item.username"></td> <td><input type="text" class="txt" v-model="item.age"></td> <td><input type="button" value="编辑" @click="edit(index)"></td> <td><input type="button" value="删除" @click="del(index)"></td> </tr> </table> </div> </div> <script > new Vue({ el:"#app", 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); }, edit:function (index) { } } }) </script> </body> </html>
自定义指令:
自定义指令: new Vue({ el: "#app", //表示在当前这个元素内开始使用VUE data:{ }, directives: { // 是一个对象 focus: { //指令的名字 //当绑定的元素显示时 inserted: function (tt) { tt.focus(); # tt是一个自定义参数 } } } 应用场景:进入后光标自动定位在输入框里
<!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"> <input type="text" v-focus> </div> <script> new Vue({ el: "#app", //表示在当前这个元素内开始使用VUE data:{ }, directives: { focus: { //指令的名字 //当绑定的元素显示时 inserted: function (tt) { tt.focus(); tt.style.backgroundColor = "blue"; tt.style.color = "#fff" } } } }) </script> </body> </html>