vue-basic(二)

v-bind

传对象 
<div v-bind:class="{active:isActive}"></div>
data: {
  isActive: true
}

可以把对象放到computed里面 computed一定要返回对象
<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法
<div v-bind:class="[activeClass,errorClass]"></div>
data:{
  activeClass:'active',
  errorClass:'text-danger'
}

三目运算符
<div v-bind:class="[isActive ? activeClass : '' ,errorClass]"></div>
会直接添加errorClass 只有在isActive为true时,才会添加activeClass

数组对象
<div v-bind:class="[{active:isActive},errorClass]"></div>

v-else-if
<div v-if="type == 'A'">A</div>
<div v-else-if="type == 'B'">B</div>
<div v-else>非A,B</div>

用template来包含代码块 控制一块的显示 ok为false时 template也不会显示
<template v-if="ok">
  <h1>标题</h1>
  <p>段落 1</p>
  <p>段落 2</p>
</template>
注意在切换页面
<template v-if="loginType === 'username'">
        <label>用户名</label>
        <input placeholder="请输入用户名" key="username-input">
    </template>
    <template v-else>
        <label>邮箱</label>
        <input placeholder="请输入邮箱" key="email-input">
    </template>
切换不加key的部分不会重新渲染 也就是说不加key 输入框有值 在切换后,值会依然有 优点:渲染速度快。

v-show 
<h1 v-show="ok">hello</h1> 
他的元素会始终渲染并保留你在DOM中。v-show只会切换元素的dispolay的css属性

v-if 和 v-show
都能实现控制元素隐藏与否
v-if 是'真实'的条件渲染,每一次切换 它都会销毁和重新创建条件块内的事件监听器和子组件
v-if只有在为true时才会渲染条件块
v-show它都会渲染 只是样式隐藏

v-for
<ul>
  <li v-for="item of items">{{item.message}}</li>
</ul>

<ul>
  <li v-for="(item,index) in items">{{item.message}}</li>
</ul>

v-for也可以在整数值范围内迭代,这种情况,会把模板重复多次.
<div>
   <span v-for="n in 10">{{n}}</span>
</div> 

在<template>上使用v-for
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

带有v-if的v-for
<li v-for="todo in todos" v-if="!todo.isComplete">{{todo}}</li>
它们都在同一节点上,v-for的优先级高于v-if.这意味着v-if将分布在循环中的每次迭代上运行。当你只想渲染某些节点时.这个非常有用。

 注意:在迭代的时候最好提供一个key.因为数组顺序在操作时可能会变.变了之后视图也会相应的改变.
 提供key使排序速度快.
 <div v-for="item in items" :key="item.id"></div>
 
 vue将观察数组的变化包裹起来,方便在调用这些方法时.能够触发视图更新
  push() pop() shift() unshift() splice() sort() reverse()
 
 注意事项 由于js的限制 Vue无法检测到已下数组的变化
    1:直接设置某一项 vm.items[indexOfItem] = newValue;
    2:修改数组长度 vm.items.length = newLength
 必须通过响应式系统触发状态更新.
Vue.set(example1.items, indexOfItem, newValue)
example1.items.splice(indexOfItem, 1, newValue)
example1.items.splice(newLength)

关于对对象的监控 实时更新
var vm = new Vue({
  data:{ a : 1}
})
//vm.a是响应的
vm.b =2 //vm.b 不是响应的
vue 不允许在已经创建的实例上,动态的添加新的根级响应式属性。然而,可以通过使用Vue.set(Obj,key,value)方法.将响应式属性添加到嵌套的对象上。
如 添加新的age属性
var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})
Vue.set(vm.userProfile,'age',27);
也可以
vm.$set(this.userProfile,'age',27)

向已经存在的对象上添加一些新的属性。例如使用Object.assign() 或 _.extend()方法。
这种情况,应该创建一个新的对象.这个对象同时具有对象的所有属性.可以通过如下方式.添加新的响应式属性
this.userProfile = Object.assign({}, this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})