vue学习简要概括1

https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B%E5%B1%9E%E6%80%A7
https://cn.vuejs.org/v2/guide/instance.html

1、v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

2、v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

3、可以使用event.target.value获取input监听后输入值的变化。

<input type="text" v-on:input="changeInput" v-bind:value="msg">

methods: {
      changeInput(event) {
        this.msg = event.target.value
      }
}

或者用

<input type="text" v-on:input="changeInput(msg)" v-bind:value="msg">

或者使用v-modle.lazy来实现上述功能，但是只能在输入完毕后点击其他地方后才能触发。

<input v-model.lazy="msg2">

4、 v-if v-else-if v-else

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

5、v-model 是一个语法糖，专门用于双向数据绑定

6.v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
v-if，是设置元素是否真正的消失。

7、数据的内容改变，可能不是响应式的，因此需要使用Vue.set()方法进行强制更新。

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})

//直接使用vue的对象进行修改数组不是响应式的
vm.items[1] = ‘x’ // 不是响应性的
vm.items.length = 2 // 不是响应性的

以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

8、Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

9、//全局注册一个组件

Vue.component('button-counter', {

  //自定义属性，可用于对组件内部传值
  props:["name"],

  //data必须是一个函数
  data: function () {
    return {
      count: 0
    }
  },
//注意只有一个根元素，然后里面包裹其他的元素
  template: '<div>' +
    '<p>{{name}}</p>' +
    '<button v-on:click="count++">You clicked me {{ count }} times.</button>' +
    '</div>'
})