Vue学习笔记:常用指令
2018/10/12 15:12:23


首先讲一下在学习vue之前我们一定要掌握一些常用的指令,因为这样在后面学起来才不会吃力,这次总结当然也是让自己对这些指令的使用更加熟悉,印象也会更深刻一点

NO.1 v-text和v-html指令


他们的区别是: v-text在浏览器只渲染出内容,不会对标签进行渲染 v-html在浏览器会把标签渲染出来

<div id="app"> <div v-text="text"></div> <div v-html="html"></div> </div>
new Vue({ el:"#app", data:{ text:"<div>v-text绑定的内容</div>", html:"<div>v-html绑定的内容</div>" } });

screenshot_20190110_121427.png

NO.2 v-model指令,主要用于表单上的双向数据绑定
<div id="app"> <div><input type="text" v-model="msg"></div> <!-- 这里的{{}}是v-text的简写形式 --> <div>{{msg}}</div> </div>
new Vue({ el:"#app", data:{ msg:'v-model指令的使用' } });

22.gif

NO.3 v-bind的使用


v-bind指令 主要用于动态的绑定一个或多个属性,也可以绑定数组对象,在 绑定class与style样式 这篇文章我们已经讲得很清楚了,这里就不再多讲了

<div id="app"> <a :href="url">v-bind的使用</a> </div>
new Vue({ el:"#app", data:{ url:'http://www.leileiqq.com/' } });
NO.4 v-on指令的使用


v-on指令,简写方法直接使用一个@符号就可以,用于绑定事件,触发事件后执行对应的事件方法,方法名称要在methods中使用 v-on:事件名称="方法名称"


@click                  单击


@dblclick             双击


@mouseenter      鼠标移入


@mousleave        鼠标移出


@keydown.xxx     按下键盘触发事件  xxx代表的是键盘的keycode键值


@keyup.xxx          松开键盘触发事件   xxx代表的是键盘的keycode键值


<div id="app"> <button @click="btnClick">v-on的使用</button> </div>
new Vue({ el:"#app", data:{ }, methods:{ btnClick(){ console.log("v-on指令的使用") } } });

aaaaaaaa.gif

NO.5 v-if v-else-if v-else 条件渲染指令的使用方法
<div id="app">  <button @click="btnClick">按钮</button>  <div v-if="isShow">显示或隐藏的内容</div>  <hr>  <div v-if="type==='A'">A的内容</div>  <div v-else-if="type==='B'">B的内容</div>  <div v-else-if="type==='C'">C的内容</div>  <div v-else>这里是其他的内容</div>  <hr>  <div>使用if和单独设置key的值解决表单值混乱问题</div>  <br>  <div v-if="regType=='mail'">    邮箱:<input type="text" name="username" key="mail-register" placeholder="请输入邮箱">  </div>  <div v-else>    手机:<input type="text" name="username" key="phone-register" placeholder="请输入手机号码">  </div>  <br>  <input type="radio" value="mail" v-model="regType">邮箱注册  <input type="radio" value="phone" v-model="regType">手机注册 </div>
   new Vue({        el: '#app',        data: {         isShow:true,       type:'C',  //C的内容       regType:"mail"        },        methods: {              btnClick() {                  // this指向的是vm对象                  this.isShow = !this.isShow;              }        }    });

w.gif


如果input中的key值是一样的则placeholder的值会错乱,不会且切换placeholder的值,结果如下:

t.gif

NO.6 v-show的使用
   new Vue({        el: '#app',        data: {          isShow:false        },        methods: {        }    });

Snipaste_2019-01-10_15-44-11.png

我们可以看到v-if的dom树直接在浏览器移除了,v-show的虽然隐藏了,但是他的dom树还在,css样式设置了一个display:none

v-if就是添加或移除dom元素

v-show就是设置css样式为display为none

NO.7 v-for指令的使用
 <div id="app">      <div>普通数组的循环~</div>      <ul v-for="v in Text">        <li>{{v}}</li>      </ul>      <hr>      <div>循环数组对象~</div>      <ul v-for="v in List">        <li>{{v.id}}--{{v.title}}</li>      </ul>      <ul v-for="(v,index) in List">        <!-- 这里的索引值是从0开始的  如果要从1开始就在index上面加1 {{index+1}} -->        <li>{{index}}--{{v.id}}--{{v.title}}</li>      </ul>      <hr>     <div>循环对象~</div>      <ul v-for="v in Object">        <li>{{v}}</li>      </ul>      <ul v-for="(value,key) in Object">        <li>{{key}}--{{value}}</li>      </ul>      <ul v-for="(value,key,index) in Object">        <li>{{index}}--{{key}}--{{value}}</li>      </ul>      <hr>      <div>我们也可以直接循环纯数字~</div>      <ul>        <li v-for="v in 6">          {{v}}        </li>      </ul>  </div>
   new Vue({        el: '#app',        data: {          Text:[1,2,3,4,5,6],          List:[            {id:1,title:"吃饭"},            {id:2,title:"睡觉"},            {id:3,title:"打豆豆"}          ],          Object:{"name":"豆豆","age":"18","sex":"男"}        },        methods: {                  }    });

1.png

NO.8 v-once 指令的使用
<div id="app"> <input type="text" v-model="msg"> <!-- 数据只绑定一次 再次输入不会双向绑定 --> <div v-once>{{msg}}</div> </div>
   new Vue({        el: '#app',        data: {         msg:"v-once指令的使用",         num:0        },        methods: {        }    });

猜你喜欢

全部评论: 151930

加载中...

    发表评论

    标签云
    返回顶部图片