最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

Vue第八节:实战前必须掌握的10个指令(下)

Vuejs rockyxia 2962浏览

写在前面

上一节我们学了5个重要的指令: v-textv-htmlv-showv-ifv-else

传送门:《 实战前必须掌握的10个指令(上)

这一节,我们继续学习剩下的5个指令。话不多说,撸起来!

6. v-for 指令

有时候,我们的data中的存放的数据不是个简单的数字或者字符串,而是数组Array类型,这个时候,我们要把数组的元素展示在视图上,就需要用到vue提供的 v-for 指令,来实现列表的渲染。

我们看看它的用法:

<div id="app">
  <p v-for="item in list">{{item}}</p>
</div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      list:['Tom','John','Lisa']
    }
  });
</script>

首先,我们的data中包含数组list,数组包含三个元素:“Tom”,“John”,“Lisa”,我们通过 v-for 指令把它渲染出来,其中item表示数组中的每个元素。我们看看渲染结果:

(效果图)

我们看到,我们解析渲染出三个div,其中包含的值分别是数组中的元素,表示我们解析渲染成功。

什么,怎么拿到索引?拿到每个元素的索引也很简单,我们稍微改动一下代码,把html部分的代码修改为:

<div id="app">
  <div v-for="(item,index) in list">
    {{index}}.{{item}}
  </div>
</div>

在循环解析的过程中,我们不但要拿到list数组的每个元素item,我们还获取每个元素的索引,写法如上,循环的时候加上(index,item)

我们来看效果图:

(效果图)

我们看到,索引分别是0,1,2都被成功地渲染出来了。这就是用 v-for 指令来渲染列表的用法。比起以前手动更新dom列表,简直就是方便得不要不要的。

提醒:v-for指令除了可以迭代数组,还可以迭代对象和整数。

7. v-bind 指令

在第六节我们也提过 v-bind 指令的作用和用法,它用于动态绑定DOM元素的属性,比较常见的比如:<a>标签的href属性,<img>标签的src属性。

<div id="app">
  <a v-bind:href="link">hello官网</a>
</div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      link:"http://hello.com"
    }
  });
</script>

v-bind 指令来修饰href属性,表明它的值是一个动态的值,对应的则是data中的link的值:http://hello.com.

来吧,看看渲染效果:

(效果图)

<a>标签的href的值成功地解析渲染成:http://hello.com。

第六节也说过, v-bind 指令可以简写成一个冒号“:”,也就是以下两种写法是等价的。

<a v-bind:href="link">hello官网</a>
<!--等价于-->
<a :href="link">hello官网</a>

它们的解析渲染效果是一样一样的。

8. v-on 指令

v-on 指令相当于绑定事件的监听器,绑定的事件触发了,可以指定事件的处理函数,记性好的同学应该记得我们在第四节介绍methods选项的时候,有用到 v-on 指令。(估计你也不记得了),这里我们还是配合methods来演示:

<div id="app">
  <button v-on:click="say">点击</button>
</div>
<script>
  let app = new Vue({
    el:"#app",
    methods:{
      say(){
        console.log('hello');
      }
    }
  });
</script>

methods选项的用法不再展开讲解,还不理解的同学可以翻看第四节《定义一个vue实例常用的4个选项

回到这个例子,我们通过 v-on 指令修饰click点击事件,指定事件响应后的处理函数为methods中的say( )方法,我们渲染看看效果:

(gif图,加载需要点时间)

点击按钮,可以成功触发click事件,并且调用say( ),一切都在我们的预期之中。

此外,如果你想给处理程序say( )传参数,也是可以的,用法跟普通的方法一致。

<div id="app">
  <button v-on:click="say('Tom')">点击</button>
</div>
<script>
  let app = new Vue({
    el:"#app",
    methods:{
      say(name){
        console.log('hello,'+name);
      }
    }
  });
</script>

我们再上一个案例的基础上稍微修改代码,say(name)接受一个参数name,并把name打印出来,在调用的时候传如实参“Tom”。再看看效果,是不是在我们的预期之内:

(gif图,加载需要点时间)

“hello,Tom”被打印出来了,一切尽在掌握之中,感觉真好。

9. v-model 指令

这是一个最重要最常用的指令,一般用在表单输入,它帮助我们轻易地实现表单控件和数据的双向绑定,相对以前的手动更新DOM,简直就是开发者的福音,迫不及待地来看看它的用法:

<div id="app">
  <input v-model="msg" type="text">
  <p>你输入:{{ msg }}</p>
</div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      msg:''
    }
  });
</script>

只要给input控件添加 v-model 指令,并指定关联的数据msg,我们就可以轻松把把用户输入的内容绑定在msg上。我们把msg的内容显示出来,看是不是跟用户输入的内容是同步更新的:

(gif图,加载需要点时间)

是不是比你手动更新DOM爽多了,是不是感受到了vue的MVVM带来的快感?

10. v-once 指令

最后,我们再来讲解一下v-once指令,它的特点是只渲染一次,后面元素中的数据再更新变化,都不会重新渲染。

我们再上面的案例代码中稍做修改,仔细看改了哪里:

<div id="app">
  <input v-model="msg" type="text">
  <p v-once>你输入:{{ msg }}</p>
</div>
<script>
  let app = new Vue({
    el:"#app",
    data:{
      msg:'hello,公众号的同学们'
    }
  });
</script>
  • 修改1:<p>标签增加了 v-once 指令;
  • 修改2:msg的初始值不再是空字符串。我们来看看效果:

(gif图,加载需要点时间)

由于msg有了初始值,第一次渲染的时候,input控件和<p>标签都有了内容,由于<p>标签我们添加了 v-once 指令,所以,后期我们更新msg的值的时候,<p>标签的内容不会发生改变,也是符合我们的预期。

本节小结

学完本节,你应该掌握了 v-forv-bindv-onv-modelv-once 这5个指令的用法,加上第七节的5个指令,可以满足你在开发中的需求了。

本系列教程来自 web前端教程 微信公众号。

转载请注明:Rockyxia Web技术博客 » Vue第八节:实战前必须掌握的10个指令(下)
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)