Vue之指令
什么是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; width: 200px; height: 200px; } .bk_2{ background-color: red; width: 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-if\v-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：
# 监听事件 事件:click\keydown 用法： <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; width: 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>
