VUE学习总结(一)

2016-12-30 本文已影响3402人 61ae56c48fc6

构造器

每一个Vue.js的应用都是通过够构造函数Vue创建的一个Vue的根实例。例如：

var vm = new Vue({
  // 选项  
})

上述代码中在实例化vue的时候需要传入一个对象，它可以包涵数据、模板、挂载元素、方法、生命周期钩子等。

当然为了创建可复用的组件构造器，我们可以通过扩展vue构造器的方法实现来实现预定义选项，通过扩展的预定义选项来创建更多可复用的组件。例如：

var MyComponent = Vue.extend({
  // 所扩展的预定义选项
})

var myComponentTnstance = new MyComponent()

vue中的data

在vue中每个实例都会去代理其data对象里面的所有属性，这些被代理的属性是响应的，如果属性改变就会触发视图的更新，但是如果属性是在实例创建之后添加的新属性那么久不会触发视图的更新。

vue生命周期

lifecycle.png

vue的计算属性computed

往往在模板中绑定表达式是非常方便的，但是这一方法值适合简单的操作，在模板中放入太多的逻辑会让模板过重并且难以维护，所以任何复杂的逻辑计算我们都需要用计算属性。

简单的例子：

<div id="test">
  <p>{{message}}</p>
  <p>{{myMessage}}</p>      
</div>

var vm = new Vue({
  el: '#test', // 将实例挂载到id位test的元素上去
  data: function () {
    return {
      message: 'hello'
    }
  },
  computed: {
    myMessage: function () {
      return this.message.split('').revers().join('')
    }
  }
})

在上述实例中myMessage的值是依赖于message的，所以message的值发生改变时候，myMessage的值相应的也会发生改变。

计算属性默认的只有getter,不过我们也可以通过需要提供一个setter:

computed: {
  fullName: {
    get: function () {
    }
    set: function () {
    }
  }
}

当fullName被赋值时，setter会被调用。

计算属性 vs methods

我们还可以通过vue实例中的methods来实现模拟计算属性的功能，在methods来定义一个函数来替代myMessage，该函数返回计算过后的值。不同的是计算属性是依赖缓存的。只有依赖的值发生改变的时候才会执行函数。而通过methods的方法则每次重新渲染的时候都会调用methods中的方法。用法根据实际使用。

代码示例：

<p>{{ myMessage() }}</p>

methods: {
  // 每次重新渲染的时候都会执行
  myMessage: function () {
    return this.message.split('').revers().join('')
  }
}

计算属性 vs watch

在vue中给我提供了一个$watch，用于观察vue实例上数据的变动，每当数据变动时会调用。通常如果是为了计算属性的话那么更好的办法还是使用computed。

v-if VS v-show

v-if
是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if
也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下， v-show
简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说， v-if
有更高的切换消耗而 v-show
有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show
较好，如果在运行时条件不大可能改变则使用 v-if
较好。

vue组件

组件是vue一个强大的功能，组件是可以扩展html元素，封装可以重用的代码。

全局注册组件：

<div id="id">
  <my-component></my-component>
</div>

Vue.component('my-component', {
  template: '<p>我是一个组件</p>'
})

new Vue({
  el: '#id'
})

局部注册组件：

var child = {
  template: '<p>我是一个组件</p>'
}

new Vue({
  ...
  component: {
    'my-component': child
  }
})

在使用组件的时候代理数据data必须是一个函数，函数返回的是代理的数据。

组件之间的通信

父组件可以通过Prop来给子组件传递数据

prop是父组件用来传递数据的一个自定义属性。子组件需要显示的用props选项声明prop:

Vue.component('child', {
  // 子组件显示的声明props
  props: ['message'],
  // prop就像data一样可以再模板中使用也可以通过this来调用
  template: '<span> {{ message }} </spam>'
})

我么可以通过v-bind动态的绑定props的值到父组件的数据中，每次当绑定的数据在父组件中发生改变的时候，该组件也会相应的传递给子组件。

<child v-bind:child-message='message'></child>

如果要给prop传递一个字面的时候必须要使用v-bind这样传递下去的才是正真的字面量，否则都会当做字符串。

<child v-bind:number="1"></child>

prop是单向绑定的：当父组件的属性变化时，将传递给子组件，但是在子组件中改变数据的时候并不会传递给父组件，为了防止子组件无意间修改父组件的状态，所以不应该在子组件中改变prop的数据。

如果想在子组件中想改变prop的值通常有二种情况：

prop 作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用。

props: ['initialCounter'],
data: function () {
  return {
    couter: this.initialCounter
  }
}

prop 作为需要被转变的原始值传入。

  props: ['size'],
  computed: {
    childSize: function () {
      return this.size.trim().toLowerCase()
    }
  }

组件可以给props指定一个验证要求，验证数据是否是某一个类型的数据，例如：

Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组／对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

子组件与父组件的通信

父组件使用props可以传递数据给子组件，但是如果子组件要把数据传递给父组件那么我们就要通过自定义事件的方法将数据传递给父组件。

使用v-on绑定自定义事件

每个vue实例都实现了事件接口（Events interface），即：

使用$on(eventName) 监听事件
使用$emit(eventName) 触发事件

父组件可以再使用子组件的地方直接使用v-on来监听子组件的触发：

<div id="counter-event-example">
  <p>{{ total }}</p>
  <!-- 使用v-on来监听子组件，如果$emit触发那么则该事件也会触发 -->
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      // 子组件中通过$emit触发事件往父组件传递数据
      this.$emit('increment')
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    // 父组件监听到子组件的$emit触发后才调用的方法
    incrementTotal: function () {
      this.total += 1
    }
  }
})

非父子组件的通信

非父子组件的通信我们一般往往用vuex

vue中的slot分发内容

当我们在使用vue组件的时候，我们常常要像如下代码一样组合它们：

<app>
  <app-header></app-header>
  <app-footer></app-footer>
</app>

为了让组件可以组合，我们需要一种方式来来混合父组件的内容和子组件的模板，这个过程被叫做内容分发，我们通过<slot>元素作为原始内容的插槽的方式来实现。

注意：父组件模板的内容应该就要在父组件作用域内编译，子组件模板的内容应该在子组件作用域内编译。

<!-- 无效，应为someChildProperty是子组件的属性 -->
<child-component v-show="someChildProperty"></child-component>

Vue.component('child-component', {
   // 有效，因为是在正确的作用域内
  template: '<div v-          show="someChildProperty">Child</div>',
  data: function () {
    return {
      someChildProperty: true
    }
  }
})

在进行内容分发的时候子组件至少要有一个slot插槽，否则父组件中的内容将被丢弃。当子组件只有一个slot插槽的时候父组件的所有内容片断都将要插入子组件的slot插槽s所在DOM位子上，并替换掉slot插槽标签本身。

假设子组件模板my-component如下：

<div>
  <h2>我是子组件的标题</h2>
  <slot>
    只有在父组件没有要分发的内容时才会显示。
  </slot>
</div>

父组件模板如下：

<div>
  <h1>我是父组件的标题</h1>
  <my-component>
    <!-- 以下内容会进行分发到子组件模板上，如果子组件的模板没有slot插槽，那么内容会被抛弃，如果有一个slot插槽那么以下内容会替换掉slot插槽所在的DOM位子 -->
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </my-component>

</div>

最终渲染的结果为：

<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </div>
</div>

如果子组件有多个slot插槽的情况下我们可以通过具名slot将父组件的内容分别分发到子组件的对应名称的slot插槽上面。

在子组件的slot插槽标签上可以通过一个name属性来进行配置如何分发内容，同时父组件可以通过标签的slot属性来明确要分发到子组件中的某一个插槽中。

子组件：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件：

<app-layout>
  <h1 slot="header">这里可能是一个页面标题</h1>

  <p>主要内容的一个段落。</p>
  <p>另一个主要段落。</p>

  <p slot="footer">这里有一些联系信息</p>
</app-layout>

最终渲染的结果：

<div class="container">
  <header>
    <h1>这里可能是一个页面标题</h1>
  </header>
  <main>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
  </main>
  <footer>
    <p>这里有一些联系信息</p>
  </footer>
</div>

在子组件插槽中可以通过slot插槽标签的text属性将数据传递到父组件要分发的内容当中，父组件要通过<template scopr=""></template>等模板来接受子组件插槽传递上来的数据。

子组件：

<div class="child">
  <slot text="hello from child"></slot>
</div>

父组件：

<div class="parent">
  <child>
    <template scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
    </template>
  </child>
</div>

最终渲染结果为：

<div class="parent">
  <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
  </div>
</div>

作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项：

父组件：

<my-awesome-list :items="items">
  <!-- 作用域插槽也可以在这里命名 -->
  <template slot="item" scope="props">
    <li class="my-fancy-item">{{ props.text }}</li>
  </template>
</my-awesome-list>

子组件：

<ul>
  <slot name="item" v-for="item in items" :text="item.text">
    <!-- 这里是备用内容 -->
  </slot>
</ul>

VUE学习总结(一)

构造器

vue中的data

vue生命周期

vue的计算属性computed

计算属性 vs methods

计算属性 vs watch

v-if VS v-show

vue组件

组件之间的通信

子组件与父组件的通信

使用v-on绑定自定义事件

非父子组件的通信

vue中的slot分发内容

猜你喜欢

热点阅读