VUE初学习笔记

//指令
v-if="shown"
v-for="item in items"
v-bind:title="message"
v-pre 跳过没有指令的编译，加快编译速度
v-once 只渲染元素和组件一次，用于优化更新性能
v-bind简写冒号:
v-on简写 @

//使用
var app = new VUE({
    el: '#myapp',
    data: {
        message: 'Hello VUE!'  
    }
})   

//注册一个全局组件
VUE.component('to-item', {
    props: ['todo'],
    template: '<li>{{todo.message}}</li>'
})

//其他
//计算属性有缓存，method没有缓存，对于比较耗费性能的最好用计算属性

2018.09.27

new VUE({
    props: Array | Object,
    data(){}, // 使用箭头函数的话 this不再指向vue实例
    data: vm => {a: vm.someAttr}, // 但可以通过参数获取
    methods: {
        a: () => {this.xxx...} // 不应该使用箭头函数来定义method 因为this绑定的是父级作用域
    },
    watch: {
        name(){}, // 同样不应使用箭头函数
    },
    el: docElement, // 根实例
    render(){}, // render函数优先于template
    template: '',
})
1. 对于data属性中的 _ 或者 $开头的属性，不会代理，即通过this._xxx获取不到，但可以通过this.$data._xxx来获取
2. vue API中的函数一般不使用箭头函数


<template>
    {{ .../* 可以访问Date Math等内置全局变量 */ }}
<template>
在模板表达式中，不应该访问用户自定义的全局变量。

// 修饰符
<form v-on:submit.prevent="onSubmit"> ... </form>

// 绑定class
<div class="static"
 v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>



// v-show 只切换元素的display属性，元素始终保留在dom中
// v-if 在切换时有更高的性能开销，而 v-show 在初始渲染时有更高的性能开销。
// 因此，如果需要频繁切换，推荐使用 v-show，如果条件在运行时改变的可能性较少，推荐使用 v-if



// 数组操作 注意事项：https://vue.docschina.org/v2/guide/list.html
var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应的
vm.items.length = 2 // 不是响应的


// $event 可以获取子组件回传的数据
<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>