2017-3-28 VUE

v-for

1、v-for 可以通过一个对象的属性来迭代数据

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

<script>
new Vue({
  el: '#main',
  data: {
    object: {
      name: '百度',
      url: 'http://www.baidu.com',
      slogan: '百度一下，你就知道'
    }
  }
})
</script>

2、也可以提供第二个的参数为键名

<div id="main">
        <ul>
            <li v-for="(value,key) in object">
                {{ key }}:{{ value }}
            </li>   
        </ul>
    </div>
    <script>
        new Vue ({
            el:"#main",
            data: {
                object: {
                    name: '百度',
                    url: 'www.baidu.com',
                    slogan: '百度一下，你就知道'
                }
            }
        })
    </script>

3、第三个参数为索引

<div id="main">
        <ul>
            <li v-for="(value,key,index) in object">
                {{index}}.{{key}}.{{value}}
            </li>
        </ul>
    </div>  
    <script>
        new Vue({
            el:"#main",
            data: {
                object: {
                    name: '百度',
                    url: 'www.baidu.com',
                    slogan: '百度一下，你就知道'
                }
            }
        })
    </script>

4、v-for 也可以循环整数

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app'
})
</script>

Vue.js 计算属性

{ 键：函数} { [key: string]: Function | { get: Function, set: Function } } ，可以省略setter,如果省略了setter，那么值就可以是普通函数，但是必须有返回值。

var vm = new Vue({
data: { a: 1 },
computed: {
  // 仅读取，值只须为函数
  aDouble: function () {
    return this.a * 2
  },
  // 读取和设置
  aPlus: {
    get: function () {
      return this.a + 1
    },
    set: function (v) {
      this.a = v - 1
    }
  }
}
})
vm.aPlus   // -> 2
vm.aPlus = 3
vm.a       // -> 2
vm.aDouble // -> 4

1、计算属性关键词: computed。

<div id="main">
  {{ message.split('').reverse().join('') }}
</div>

<script>
new Vue({
  el: '#main',
  data: {
    message: 'ABC!'
  }
})
</script>

2、声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

<div id="main">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
  el: '#main',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // this 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

3、可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

类型: { [key: string]: Function }

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

<div id="main">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
  <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div>

<script>
var vm = new Vue({
  el: '#main',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // this 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

4、computed setter

<div id="app">
  <p>{{ site }}</p>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = 'baidu http://www.baidu.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

key的使用

一般情况下，vue在渲染完成后，如果数据发生变化，只会重新渲染数据，不会重新渲染整个元素，但是有时候我们需要元素被重新渲染，此时就需要使用key关键字，使用v-bind绑定key关键字，可以实现在数据发生变化时候重新渲染整个元素。注：同一父级元素下所有子元素如果都要在数据变化后重新渲染元素，则需要被绑定的key

v-move的使用

在使用<transition-group>时候，不仅可以定义进入离开动画，还可以使用新增的v-move特性，与过渡一样，默认为v-move，可以用name进行自定义前缀，也可以用move-class属性手动设定。用了这个之后就可以实现移动过程中的动画。