vue的简单用法

1.Attribute绑定

        双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind

const objectOfAttrs = ["sdfsd","dsfsd"]

<div v-bind:class="objectOfAttrs">dfgd</div> //<div class="sdfsd dsfsd">dfgd</div>

            //简写                               
 <div :class="objectOfAttrs">dfgd</div>   

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}
<div v-bind="objectOfAttrs">dfg</div> //<div id="container" class="wrapper">dfg</div>

2.动态参数

               eventName 是click mouseover change 等事件名称。

<a v-on:[eventName]="doSomething"> ... </a>

 //简写 
<a @[eventName]="doSomething"> ... </a>

3.条件渲染   ---   v-if

        v-if 是一个指令，他必须依附于某个元素。如果我们想要切换多个元素，我们需要在一个 <template> 元素上使用 v-if，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素。

<template v-if="ok">
  <h1>李白</h1>
  <p>杜甫</p>
  <p>独孤求败</p>
</template>

4.列表渲染  ---  v-for

        可以用来遍历数组和对象 

const arr = ref([{bookname:"yiinghong"},{bookname:"dadiao"}])
const obj = ref({name: "yuechu" , age: 18 , work: "daxia"})

<div v-for="(item,index) in arr">
  {{ item.bookname }} - bookid - {{ index }} //     yiinghong - bookid - 0
                                                    dadiao - bookid - 1
</div>
<div v-for="(value, key , index) in obj">
  {{ value }} - {{ key }} - {{ index }}   //     yuechu - name -0
                                          //       18 - age -1
                                          //      daxia - work -2
</div>                                    

注意：当 v-if , v-for   同时存在于一个节点上时，v-if 比 v-for 的优先级更高,使得 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。

当 v-if , v-for 同时存在时可以参照下面的实例

<template v-for=" item in arr">
  <li v-if="!item.isNeed">
    {{ todo.name }}
  </li>
</template>