指令：v-xx组成的特殊指令，如果一个标签中有指令会默认替换原有的书
v-model:实现数据和视图的双向绑定
v-text：在元素中插入值
v-html：在元素中插入标签或者插入文本
v-if：根据表达式的真假值来动态的插入或者是移除元素
v-else：与if配套使用
v-show：根据表达式的真贱动态来显示或者隐藏
v-for：根据变量的值来循环渲染元素 v-for=“(item,index) in arr”
- for循环可以是数组，对象，数字，字符串等等。
v-on：监听元素事件，并执行响应的操作
- v-on:click=“func”=@click="func" this的操作
- 数组的操作：push,pop,shift,unshift,splice,reverse
v-bind：绑定元素的属性的执行响应的操作；
- v-bind:href=“URL”=:href="URL" 动态的东西使用v-bind绑定，
修饰符：以.开头的指令的特殊绑定方式吗，
.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
在表单操作中经常用到v-on.submit.prevent
常用指令示范：
v-bind的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <style> .btn{ background-color: cadetblue; width: 100px; height: 100px; } </style> <body> <div id="app"> <a v-bind:href="url">点我有惊喜</a> <input type="button" v-bind:value="but"> <div v-bind:class="{btn:isactive}"></div> <!--用对象的方式调用，key代表对象名字，value代表在什么时候调用--> <div v-bind:class="klass"></div> <!--直接调用--> </div> <script> var obj = new Vue({ //赋予它一个obj来接收主要是为了在终端中操作的方便 el:"#app", data:{ url:"https://www.baidu.com", but:"点我啊啊啊啊", klass:"btn", isactive:true } }) </script> </body> </html>
v-for的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <!--<ul>--> <!--<li v-for="food in foodlist">{{food}}</li>--> <!--</ul>--> <ul> <li v-for="food in foods">{{food.name}}: ￥{{food.discount ? food.price*food.discount : food.price}} <!--如果有discount的话就执行？后边的，如果没有就执行：后边--> </li> </ul> </div> <script> new Vue({ el:"#app", data:{ // foodlist:[ // "葱","姜","蒜" // ], foods:[ {"name":"葱","price":10,"discount":0.8}, {"name":"姜","price":8,"discount":0.6}, {"name":"蒜","price":6}, ] } }) </script> </body> </html>
v-model的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <div> <input type="text" v-model="msg"> <!--实时更新--> {{msg}} </div> <div> <input type="text" v-model.lazy="msg_s"> <!--失去焦点显示--> {{msg_s}} </div> <div> <input type="text" v-model.trim="msg_t"> <!--去掉空格--> {{msg_t}} <pre>{{msg_t}}</pre> <!--pre 标签显示原生的数据--> </div> <br> <hr> <label>男 <input v-model="sex" value="male" type="checkbox"> </label> <label>女 <input v-model="sex" value="female" type="checkbox"> </label> {{sex}} <br> <label> 男男 <input v-model="xb" type="radio" value="男"> </label> <label> 女女 <input v-model="xb" type="radio"value="女"> </label> <hr> {{xb}} <hr> <textarea v-model="text"></textarea> <hr> <div>where are you from？</div> <select v-model="sel"> <option value="1">红灯区</option> <option value="2">绿灯区</option> <option value="3">黄灯区</option> </select>{{sel}} <div>where are you from？</div> <select v-model="sels" multiple> <option value="1">红灯区</option> <option value="2">绿灯区</option> <option value="3">黄灯区</option> </select>{{sels}} </div> <script> new Vue({ el:"#app", data:{ msg:"", msg_s:"", msg_t:"", zhang:"我是你爸", sex:["male"], text:"草拟大爷", sel:null, hobby:null, xb:"", sels:[] } }) </script> </body> </html>
v-on的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <!--v-on:指令可以直接使用@符号代替--> <button v-on="{mouseenter:onEnter,mouseleave:outEnter}" v-on:click="OnClick">点我啊</button> <form v-on:submit="onSubmit($event)" v-on:keyup.enter="onEnter"> <input type="text"> <button type="submit">提交啊</button> </form> <form v-on:keyup="onUp"> <input type="text"> </form> </div> <script> new Vue({ el:"#app", methods:{ OnClick:function () { console.log("大爷，哪里不能点啊") }, onEnter:function () { console.log("进来了···") }, outEnter:function () { console.log("出去了·····") }, onSubmit:function (e) { e.preventDefault() console.log("提价你大爷") }, onEnter:function () { console.log("回车键在敲我") }, onUp:function () { console.log("键盘在敲") } } }) </script> </body> </html>
v-show，v-model的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <div> <input type="text" v-model="name" placeholder="请输入名字"> <span v-show="name">我的名字是：{{name}}</span> </div> <div> <input type="text" v-model="age" placeholder="请输入年龄"> <span v-show="age">我的年龄是：{{age}}</span> </div> <div> <input type="text" v-model="sex" placeholder="请输入性别"> <span v-show="sex">我的性别是：{{sex}}</span> </div> </div> <script> new Vue({ el:"#app", data:{ name:"", age:"", sex:"", } }) </script> </body> </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>
基本指令就这么点，还有一部分自定义的指令
//自定义指令 <div v-pin="true"></div> Vue.directive('pin',function(el,binding){ //var $el=$(el); var pinned=binding.value; if(pinned){ el.style.position='fixed'; }else{ el.style.position='static'; } })
<div id="app"> <ul> <li v-on:click="login(true)">二维码登录</li> <li v-on:click="login(false)">验证码登录</li> </ul> <div v-show="temp"> <h1>这里是二维码登录</h1> </div> <div v-show="!temp"> <h1>这里是验证码登录</h1> </div> </div> <script> var obj = new Vue({ el:"#app", data:{ temp:true }, methods:{ login:function (temp) { this.temp=temp } } }) </script>