关于 Vue.js(1)

下面记录一些vue中的skill.

 

1、如何获取vuejs powered plain data?

有时候我们可能需要一个未经vuejs define propery(get/set)处理过的原始js数据，一个workaround方案:

JSON.parse(JSON.stringify($vm.action.roles))

2、所有Vue实例本身暴露的属性和方法，都以$为头来区别，对应Vue.set global API

例如:vm.$data,vm.$elvm.$watch，这个有利于和data属性对象的数据来区分；

3、v-for列表数据渲染（注意在v-for子块内可以访问父组件作用域内的属性，还有一个$index）

4、v-on内联语句访问event参数:如果是一个函数作为v-on绑定的表达式的话，该函数自动带有(event参数），这个和普通的js事件处理函数是一样的。

<button v-on:click="say('hello!', $event)">Submit</button>
// ...
methods: {
  say: function (msg, event) {
    // 现在我们可以访问原生事件对象
    event.preventDefault()
  }
}

 

5、在vuejs2.0中初次mount的组件并不会调用watch,而只有数据变化后才会调用

6、chrome下vue dev-tool无法显示问题

 

Vue.config.devtools = true; //在new Vue()之前执行
//Vue.config.debug = true;
//window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = Vue;

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

Vue.set(vm.someObject, 'b', 2)

 

您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

this.$set(this.someObject,'b',2)

有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

7、Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

Vue.set(vm.someObject, 'b', 2)

您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

this.$set(this.someObject,'b',2)

有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

8、vm.$nextTick() vs Vue.nextTick(callback)

 

到底nextTick是干什么的：

看一个牛人的回答： it's a way to execute a callback function after the data is set.

To add an example to that, lets say you have a jQuery plugin that creates a pie chart. The data on those charts are fetched and set by vuejs. You can't initialize the charts until after the data is set / until the "next tick". Here's a quick example...

https://jsfiddle.net/kr9b4o8f/

If you try to initialize the charts without nextTick(), it won't work because the data has not been changed yet.

<div id="example">{{msg}}</div>
var vm = new Vue({
  el: '#example',
  data: {
    msg: '123'
  }
})
vm.msg = 'new message' // change data
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

// 对于component下面的调用方法
Vue.component('example', {
  template: '<span>{{msg}}</span>',
  data: function () {
    return {
      msg: 'not updated'
    }
  },
  methods: {
    updateMessage: function () {
      this.msg = 'updated'
      console.log(this.$el.textContent) // => 'not updated'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => 'updated'
      })
    }
  }
})

9、什么是抽象组件以(transition组件为例)？

 

抽象组件具有以下特点：

1. 它是以引入功能而不是构建视图为目的而存在的

2. 它不会在DOM中有任何节点

3. 它也不会在inspect component hierarchy中显示出来

抽象组件和无template的组件有什么区别？？

非常典型的例子是vuejs2.0中引入的transition组件:

<transition>
  <div v-if="ok">toggled content</div>
</transition>

10、路由嵌套

路由嵌套会将其他组件渲染到该组件内，而不是进行整个页面跳转router-view本身就是将组件渲染到该位置，想要进行页面跳转，就要将页面渲染到根组件，在起始配置路由时候写到：

 

var App = Vue.extend({ root });  
router.start(App,'#app');

这里首先将根组件注册进来，用于将路由中配置好的各个页面渲染出来，然后将根组件挂载到与#app匹配的元素上。