Vue学习

条件渲染
V-if使用时必须把它添加到一个元素上面
V-else使用时必须得跟在v-if或者v-else-if后面，否则不会被识别
V-else-if在v-if跟v-else之间使用，可以连续使用，多用于条件判断多时，也必须跟在v-if之后
Key具有唯一性，不会重复渲染
v-show不支持v-if跟v-else，会在dom中保留，只切换css中display属性none或block
v-show适合频繁切换场景时使用，v-if适合条件不经常切换时使用
列表渲染
v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

<script>
	var example1 = new Vue({
	  el: '#example-1',
	  data: {
	    items: [
	      { message: 'Foo' },
	      { message: 'Bar' }
	    ]
	  }
	})
</script>

在使用是我们可以把可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法

<div v-for="item of items"></div>

使用v-for遍历一个属性

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

new Vue({
  el: '#object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

在使用时我们还可以添加第二个的参数——键名

<div v-for="(value, name) in object">
	{{ name }}: {{ value }}
</div>

第三个参数作为索引

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

注意：建议尽可能在使用 v-for 时提供 key。不要使用对象或数组之类的非基本类型值作为 v-for 的 key。最好是使用字符串或数值类型的值

v-for 也可以接受整数

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

输出结果为：12345678910

变异方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
替换数组
会改变调用了这些方法的原始数组。不过，也有非变异 (non-mutating method) 方法，例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

在组件上使用 v-for
在自定义组建中v-for的使用方法跟平常元素没有区别，但必须得写key
任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop，不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

计算属性
任何复杂逻辑，你都应该使用计算属性，默认只有 getter ，不过也可以提供一个 setter

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

声明一个计算属性 reversedMessage

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

vm.reversedMessage 的值始终取决于 vm.message 的值。
侦听属性

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

相比较于计算属性侦听属性显得更为的简洁明了：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

**

组件

如何定义组件

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

引用组件

<div id="components-demo">
  <button-counter></button-counter>
</div>

**
组件可以重复引用，但是一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

组件的注册：
注册分为全局注册和局部注册
通过 Vue.component 进行全局注册

Vue.component('my-component-name', {
  // ... options ...
})