Vue的几个有趣之处

Fri 18 January 2019 / In categories Web

VueJS

Vue是一套Web前端框架,看了Vue的文档之后,觉得Vue有一些很有意思的地方,就把它记录下来。

Vue实例的data属性

看下面的例子:

// Our data object
var data = { a: 1 }

// The object is added to a Vue instance
var vm = new Vue({
  data: data
})

// Getting the property on the instance
// returns the one from the original data
vm.a == data.a // => true

// Setting the property on the instance
// also affects the original data
vm.a = 2
data.a // => 2

// ... and vice-versa
data.a = 3
vm.a // => 3

Vue的实例创建之后,会把入参对象中的data下面的所有属性拷到自己的户下,比如上面例子中data.a被拷贝到vm.a。不过更让人惊奇的是,data.a的值变化了之后,vm.a的值竟然也跟着变化。

然后Vue实例本身的属性和方法则是以$开头,例如:

vm.$data
vm.$el
vm.$watch(...)

Vue的Lifecycle钩子

Vue的Lifecycle钩子比React要多很多,每次执行一个操作之前和之后基本都会有一个钩子:

  • beforeCreated和created
  • beforeMount和mounted
  • beforeUpdate和updated
  • beforeDestroy和destroyed

Vue的模板语法

html内容需要使用rawHtml才能放到一个element里面

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

对于v-bind, <div v-bind:id="dynamicId"></div>可以缩写为<div :id="dynamicId"></div>

对于v-on<a v-on:click="doSomething"></a>可以缩写为<a @click="doSomething"></a>

在模板里面只能写一行JavaScript表达式

Okay的

{{ message.split('').reverse().join('') }}

不Okay的

{{ if (ok) { return message } }}

双向数据绑定很简单,可以使用v-model

    <input v-model="question">

v-if用来在模板中做条件控制。因为Vue的指令不能做元素使用,也就是说没有<v-if>这个标签,所以必须把v-if放在<template>标签上,也就是这样<template v-if="ok">。当然,<template>本身最终不会生成HTML代码。

Vue的Component

Vue的Component非常像Web的自定义元素(Custom Elements,在标准Web Components Spec中有说明)

不过对于Vue来说,Component就是一个提供预制选项和模板的Vue实例的类,并且Component的data属性必须是一个函数,这样由Component生成Vue实例的时候,每个实例能有自己的data拷贝:

Vue.component('todo-item', {
  // The todo-item component now accepts a
  // "prop", which is like a custom attribute.
  // This prop is called todo.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

可以在Vue实例的内部注册子Component

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

上面的做法叫做Local Registration, 在Component Registration有解释。

Component的Props可以是Object

props的Component的输入参数,不仅是一个数组,也可以是一个object:

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

扩展JS对象生成新的Component

可以通过Vue.extend来把一个普通JS对象转化成一个Component

var Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})

var vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})

这是一个很灵活生成Component的方法,可以随时随地操作,可以用来分解大型的Component。

Component的名字可以是驼峰状和骨肉相连状

HTML本身对标签的名字是大小写不敏感的。所以驼峰状的名字(例如: <MyComponentName>)有可能和HTML标签起冲突。 但是Vue支持另外一种命令方式,那就是骨肉相连状(Kebab),比如<my-component-name>

模板里面的CSS

Vue可以直接在模板里面绑定CSS,并且CSS可以是一个JavaScript对象:

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

Slot:联系子Component的脐带

<navigation-link>是一个Vue Component,它带的模板是下面这样的:

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

可以看到模板中有<slot></slot>这个槽。这个的作用是预留位置,然后在Component实例化的时候,把Component包含的内容放置到这个槽里面。

我们来实例化这个Component:

<navigation-link url="/profile">
  <font-awesome-icon name="user"></font-awesome-icon>
  Your Profile
</navigation-link>

上面的效果等同于:

<a
  v-bind:href="url"
  class="nav-link"
>
  <font-awesome-icon name="user"></font-awesome-icon>
  Your Profile
</a>

你还可以给Slot取名字,参考Named Slots

反刍的Scoped Slots

利用Scoped Slots,我们可以让一个Component把肚子的参数吐出来,供给Component的调用者使用,这个过程有点像反刍。

首先我们有一个叫<todo-list>的Component,里面包含若干条todo数据,并且使用以下模板:

<ul>
  <li
    v-for="todo in todos"
    v-bind:key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

如果我们在调用<todo-list>的时候想使用里面的todo数据,比如todo.text,可以这样操作:

<todo-list v-bind:todos="todos">
  <!-- Define `slotProps` as the name of our slot scope -->
  <template slot-scope="slotProps">
    <!-- Define a custom template for todo items, using -->
    <!-- `slotProps` to customize each todo.            -->
    <span v-if="slotProps.todo.isComplete"></span>
    {{ slotProps.todo.text }}
  </template>
</todo-list>

通过指定slot-scope="slotProps"slotProps属性就像<todo-list>张开的口,可以获取到其内部数据集合,比如slotProps.todo.text

如果不需要访问所有的内部数据,我们可以只取slotProps里面的部分属性:

<todo-list v-bind:todos="todos">
  <template slot-scope="{ todo }">
    <span v-if="todo.isComplete"></span>
    {{ todo.text }}
  </template>
</todo-list>

注意,上面的例子中slot-scope="{ todo }"只从之前的slotProps里面选取了todo属性,而不是之前slotProps那样获取所有的属性。

scoped slot可以用来制作Renderless Component

Load Disqus Comments