vue.js开发入门(三)

Vue.js的指令

指令(Directives)是vue.js模板中最常用的一项功能,它带有前缀v-,指令的主要职责就是当其表达式的值改变时,相应的将某些行为应用到DOM上,他主要包括13种系统指令分别为:v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-pre、v-cloak、v-once。

1.v-model:

<div id="app">
     <input type="text" v-model="name" placeholder="your name">
      <h3>hellow, {{ name }}</h3>
 </div>   
 <script>
    var app = new Vue({
          el:'#app',
          data:{
             name:''
                }
  })
            </script>

v-model就是双向数据绑定

2.v-if:

<div id="app">
  <p v-if="show">显示</p>
</div>

<script>
   var app = new Vue({
      el:'#app',
      data:{
        show:true
            }
})
</script>

当数据show为true时,p元素会被插入,为false时就会被移除。数据驱动DOM是vue.js的核心理念,所以不到万不得已,
不要主动操作DOM,只需要维护好数据,DOM的事vue会自己处理好的

3.v-bind:

<div id="app">
    <a v-bind:href="url">链接</a>
    <img v-bind:src="imgUrl">
</div>

<script>
   var app = new Vue({
       el:'#app',
       data:{
        url:'https://www.github.com',
        imgUrl:'http://xxx.xxx.xx/img.png'//本地图片路径或者网页图片路径
            }
})  
</script>

v-bind的基本用途是动态更新HTML元素上的属性,比如id,class等

4.v-on

<div id="app">
   <p v-if="show">点击隐藏,我就消失咯~点击出现,我就出现咯~</p>
   <button v-on:click="close">隐藏</button>
   <button v-on:click="textShow">出现</button>
</div>

<script>
   var app = new Vue({
     el:'#app',
     data:{
       show:true
          },
     methods:{
        close:function(){
           this.show = false;
         },
         textShow:function(){
            this.show = true;
         }
         }
  })
 </script>  

在button按钮上,使用v-on:click给该元素绑定了一个点击事件,在普通元素上,v-on可以监听原生的DOM事件
,除了click外,还有dblclick,keyup,mousemove等。表达式可以是一个方法名,这些方法都写在Vue实例的methods
属性内,并且是函数的形式,函数内的this指向的是当前Vue实例本身,所以可以直接使用this.xxx的形式来访问或者修改
数据,如上例中的this.show=false和this.show=true,把数据show修改为了false,点击隐藏按钮,文本p元素就被隐藏了
吧数据修改为true,点击出现按钮,文本p元素就被展示出来了。

5.v-cloak:

<div id="app" v-cloak>
     {{message}}
</div>

 <script>
    var app = new Vue({
        el:'#app',
        data:{
          message:'随便一段话'
             }
})
</script>   

v-cloak其实是不需要表达式的,在这里我们添加了指令v-cloak,但是并没有起到作用,当网速比较慢,vue.js
文件还没有加载完成时,在页面会显示{{message}}的字样,直到Vue创建实例,编译模板时,DOM才会被替换
所以这个过程屏幕是有闪动的,只需要加一句css就可以解决.
    [v-cloak]{
        display:none;
    }

6.v-once:

<div id="app">
   <span v-once>{{message}}</span>
   <div v-once>
   <span>{{message}}</span>
   </div>
</div>

<script>
   var app = new Vue({
      el: '#app',
      data: {
          message:'随便一段话' 
            }
})
</script>   

v-once也是一个不需要表达式的命令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点
。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容,v-once在业务中也很少用到,当你需要进一步优化
性能时,可能会用到。

7. v-if,v-else-if,v-else

<div id="app">
      <p v-if="status===1">当status为1显示</p>
      <p v-else-if="status===2">当status为2显示</p>
      <p v-else>否则显示这行</p>
         //注意,vue.js中判断相等是===而不是==也不是=
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            status:1//这里可以根据上面条件来写
              }
    })
</script>

需要注意的是:v-else-if要紧跟v-if,v-else要紧跟c-else-if或v-if
    Vue在渲染元素时,出于效率考虑,会尽可能的复用已有的元素而不是重新渲染,比如:

<div id="app">
    <template v-if="type==='name'">
       <label>用户名:</label>
       <input placeholder="请输入用户名" key="name-input">
    </template>
    <template v-else>
        <label>邮箱:</label>
        <input placeholder="请输入邮箱" key="mail-input">
    </template>         
      <button @click="change">切换</button>
</div>

<script>
    var app = new Vue({
         el: '#app',
         data: {
            type:'name' 
         },
          methods:{
             change:function(){
               this.type = this.type==='name'?'mail':'name';
              }
          }
  })
</script>

切换前的图:

切换后的图:

如图所示,输入内容后,点击切换时输入的内容也会被删除,不过label的元素仍然是被复用的,因为没有添加key属性

8.v-show:

<div id="app">
     <p v-show="status===1">当status为1时显示</p>
</div>

<script>
    var app = new Vue({
       el: '#app',
       data: {
           status:1
             }
       })
</script>

需要注意的是:v-show不能在<template>上使用!!!
v-show的用法与v-if基本一致,只不过v-show是改变元素的css属性display。当v-show表达式的
值为dalse时,元素会被隐藏,查看DOM结构会看到元素上加载了内联样式display:none。

扩展(v-if与v-show的选择):

v-if和v-show具有类似的功能,不过v-if才是真正的条件渲染,他会根据表达式适当的销毁或重建元素及绑定事件或子组件。
若表达式的初始值为false,则一开始元素/组件并不会被渲染,只有当条件第一次变为真时才开始编译。而v-show只是简单的
css属性切换,无论条件真与否,都会被编译。相比之下,v-if更适合条件不经常改变的场景,因为他切换开销相对较大,而
v-show适用于频繁的切换条件。

9.v-for

<div id="app">
   <ul>
     <li v-for="text in texts">{{text.name}}</li>
   </ul>
</div>

<script>
   var app = new Vue({
      el: '#app',
      data: {
         texts:[
            {name:'Hello word!'},
            {name:'java'},
            {name:'vue.js'}
              ]
            }
      })
</script>

当需要将一个数组遍历或枚举一个对象循环实现时,就会用到列表渲染指令 v-for。它的表达式需结合in来
使用,类似 item in items的形式。

10.v-text:

<div id="app">
   <p>{{message}}</p>
   <p v-text="message"></p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
     var app = new Vue({
       el: '#app',
        data: {
          message:'Hello word!'  
             }
     })
</script>

从上面代码不难看出,v-text和{{}}是一个等价的,即这俩种方法都可以实现获取到data里面的数据。
唯一的区别就是{{}}叫模板,而v-text叫做指令。

11.v-html:

<div id="app">
    <div v-html='html'></div>
</div>

<script>
   var app = new Vue({
       el: '#app',
       data: {
        html:'<p style="color:#ff6666;">Hello Word!</p>'
             }
      })
</script>

v-html插入的是html代码,如上面代码p标签中,用style定义了颜色,显示的文本就是Hello word!所带
的颜色,说白了就是可以添加一些样式。

12.v-pre:

<div id="app">
    <p v-bind:align="message" v-pre>v-pre指令</p>
</div>

<script>
     app = new Vue({
        el: '#app',
        data: {
            message:'center',
              }
        })
</script>

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有
指令的节点会加快编译。

以上就是我差不多见到过的指令了,有不足的地方希望大家可以补充。