学习笔记《Vue2初体验》

用了一段时间的 Vue，基本熟悉了讨论，看到 Vue2.0 已经发布，而且文档已经比较齐全，刚好学习和迁移一下

Vue2 的一份详细修编记录

https://github.com/vuejs/vue/issues/2873

vue-migration-helper

Vue 官方提供了一个有意思的工具可以对代码进行扫描，并提醒哪里需要进行代码的修改：

安装：

sudo npm install --global git://github.com/vuejs/vue-migration-helper.git

package.json 中的这个配置项会创建一个 /usr/local/bin/vue-migration-helper 文件

"bin": {
    "vue-migration-helper": "index.js"
},

然后就可以直接调用：

# navigate to a Vue 1.x project directory
cd path/to/my-vue-project

# scan all files in the current directory
vue-migration-helper
# scan all files in specific sub-directories
vue-migration-helper src folder-a folder-b

具体修改：

这些是我在升级过程中遇到的点，显然 Vue2 并不兼容 Vue1，重构的比较全面

Vue1	Vue2
实例中的 ready 方法	使用 mounted 替代
ajax 的回调方法中支持 this 调用 Vue 实例	不再支持，请使用 var vm = this 在 ajax 之前
< img src="@{{imagePath}}"> 不再有效	请使用 < img v-bind:src="imagePath">
<a href="/path/to/@{{id}}"> 不再有效	请使用 <a v-bind:href="'/path/to' + id">
参数变化 vm.$set('products', objectData)	变为了 vm.$set(vm, 'products', objectData);
实例中的data如果是对象，需要初始化	可以不用

有趣的知识点

这些语法并非是 Vue2 新有的，只是在学习过程中发现到的，比较有意思，就记录在这里：

Shorthands

<!-- full syntax -->
<a v-bind:href="url"></a>
<!-- shorthand -->
<a :href="url"></a>

<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>

computed property
和 Vue 实例中的属性值绑定 getter 关系的方法集，在每次调用 getter 属性的时候都会自动响应到的方法

var vm = new Vue({
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

Watchers
在异步操作的情况下，需要使用 Watcher 去监控一个数据，并作出相应的显示：

<!-- Since there is already a rich ecosystem of ajax libraries    -->
<!-- and collections of general-purpose utility methods, Vue core -->
<!-- is able to remain small by not reinventing them. This also   -->
<!-- gives you the freedom to just use what you're familiar with. -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // whenever question changes, this function will run
    question: function (newQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  },
  methods: {
    // _.debounce is a function provided by lodash to limit how
    // often a particularly expensive operation can be run.
    // In this case, we want to limit how often we access
    // yesno.wtf/api, waiting until the user has completely
    // finished typing before making the ajax request. To learn
    // more about the _.debounce function (and its cousin
    // _.throttle), visit: https://lodash.com/docs#debounce
    getAnswer: _.debounce(
      function () {
        var vm = this
        if (this.question.indexOf('?') === -1) {
          vm.answer = 'Questions usually contain a question mark. ;-)'
          return
        }
        vm.answer = 'Thinking...'
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = 'Error! Could not reach the API. ' + error
          })
      },
      // This is the number of milliseconds we wait for the
      // user to stop typing.
      500
    )
  }
})
</script>

Event Modifiers

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- just the modifier -->
<form v-on:submit.prevent></form>
<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

Key Modifiers

<input v-on:keyup.enter="submit">

.trim

<input v-model.trim="msg">

DOM Template Parsing Caveats

This will lead to issues when using custom components with elements that have such restrictions, for example:

<table>
<my-row>...</my-row>
</table>

The custom component <my-row> will be hoisted out as invalid content, thus causing errors in the eventual rendered output. A workaround is to use the is special attribute:

<table>
<tr is="my-row"></tr>
</table>

scope
终于反应过来，这个单词的中文翻译是：作用域

Props
component 在 HTML 上以属性的形式来进行值传递的方式：Every component instance has its own isolated scope. This means you cannot (and should not) directly reference parent data in a child component’s template. Data can be passed down to child components using props.

Vue.component('child', {
  // declare the props
  props: ['message'],
  // just like data, the prop can be used inside templates
  // and is also made available in the vm as this.message
  template: '<span>{{ message }}</span>'
})

<child message="hello!"></child>

camelCase vs. kebab-case

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

Prop Validation

Vue.component('example', {
  props: {
    // basic type check (`null` means accept any type)
    propA: Number,
    // multiple possible types
    propB: [String, Number],
    // a required string
    propC: {
      type: String,
      required: true
    },
    // a number with default value
    propD: {
      type: Number,
      default: 100
    },
    // object/array defaults should be returned from a
    // factory function
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // custom validator function
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

Events interface

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// -> "hi"