Vue 实战------指令详解 part 1

v-text:

1. 某些情况下 和 {{}}是等价的
2. 还有一种情况是

   <h1 id="app1" v-text="'今天是'+year+'年'+month+'月'"></h1>
   var app1 = new Vue({
       el : "#app1",
       data : {
           year : new Date().getFullYear(),
           month : new Date().getMonth()+1
       }
   })

    

v-html: 

可以把html标签渲染出来，用于富文本的展示

v-pre:

加上这个属性，就不再编译这个标签和它的子标签了

v-cloak:

有一个很有意思的作用，就是 {{}}有时候会显示在页面上，然后一阵闪烁后才会变成值，有了这个东西后，就避免了这种

情况的出现了

<style>
   [v-cloak]{
           display:none;
   }


</style>


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



</div>


<script type="text/javascript">

      new Vue({
            el:'#app',
            data:{
            message:'hello world' 
     }



      })

</script>

v-once:

v-once 关联的实例只会被渲染一次，即使实例发生改变也不会再次被渲染，这可以用于优化性能

v-if:

if 判断语句，为true 就显示

<a v-if="OK">Yes</a>

Tips:

可以用到 <template>中就可以通过判断来决定是否显示template下面的子标签元素

并且 template 标签不显示

v-else:

跟在 v-if 元素后面

v-else-if:

用于多条件选择的情况

v-show:

也是根据条件判断是否进行渲染

如果需要非常频繁的切换条件，就使用 v-show,

但是如果条件变化比较稳定，就使用v-if

 

v-for:

根据遍历数组来进行渲染

v-for="item in items"

还可以添加索引了

v-for="(item,index) in items"

还可以取整数了

v-for="n in 10"

v-for 也可以应用在 template 中

还可以遍历对象的属性了

<ul id="app" class="demo">

     <li v-for="value in object">
            {{value}}
     </li>
</ul>

<script type="text/javascript">

      new Vue({
            el: '#app',
          data: {
              object:{
                 text:'text1',
                 number:1
              }
          }
      })

</script>

也可以添加第二个参数为键名：

<ul id="app" class="demo">

     <li v-for="(key,value) in object">
            {{key}}: {{value}}
     </li>
</ul>

<script type="text/javascript">

      new Vue({
            el: '#app',
          data: {
              object:{
                 text:'text1',
                 number:1
              }
          }
      })

</script>

 

还能添加索引:

添加上第三个参数就可以了。

 

key:

管理可复用的元素

元素上没有 key 的时候，就不会重新渲染，只会替换这个元素的部分内容

当元素上有 key 的时候，就会重新渲染

 

数组更新方法：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

确定索引上的数值可以用如下方法:

Vue.set(arr1,indexOfItem,newValue)

arr1.splice(indexOfItem,1,newValue)

更改数组长度

arr1.splice(newLength)

 

 

往对象里面添加属性

Vue.set(vm.message,'text2','world')

添加多个属性可以使用 Object.assign()或_.extend()

this.message = Object.assign({},this.message,{

    text2: 'world',

   text3:'!'

})

 在 v-for 里面添加 v-if

可以在每次遍历的时候来一次判断