之前在网页里小范围的用了 vue, 感觉用起来非常爽，现在打算做自己的笔记应用。这次打算做成 SPA 的形式，前端全部用 vue 来写。需要 node 的一些东西，记录下学习过程。迈向全栈，哈哈

安装

首先，全局安装 vue:

npm install --global @vue/cli

data 属性

只有在创建时提供的 data 属性才是响应式的，在创建之后在添加新元素就不管用了。

当然还可以使用 app.$watch 方法显式创建一些监听器

// $watch 是一个实例方法
vm.$watch("a", function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

methods 和 computed

methods 定义了一些可以调用的方法，他的值也可以用来插值。但是最好使用 computed，因为 computed 是有缓存的。

computed 属性也可以设置 setter，所以实际上，computed 属性相当于对现有属性的一种映射和变化。

v-bind 和 v-model

• v-bind 用于单项绑定：在 HTML 属性中使用 v-bind 绑定，标签中使用 {{ }}。只能使用表达式，而不能使用语句。
• v-model 用于双向绑定：在 input 这类用户可以输入的组件中，需要双向绑定，使用 v-model.

v-bind 类似的指令还有 v-once 和 v-html

v-model 实际上等价于

<input v-model="searchText">

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

要想在自定义输入组件中支持 v-model 的话，就需要使用 v-bind 和 v-on 两个方法了，而不能直接使用 v-model。

v-if 和 v-for

这两个就和所有模板系统中的 if 和 for 一样。vue 中提供的额外方便之处是，可以使用 template 标签，这样就不会多一个标签了

vue 是懒渲染的，因此会尽可能地复用组件，可以使用 key 来区分

v-if 是真正的条件式渲染，v-show 则只是在切换 display 属性

vue 没有代理数组的赋值方法，所以需要使用 app.$set 方法

@

如果只是指定一个事件处理函数的话，那么参数就是 event。如果自己指定了参数的话，可以使用 $event 来代表 event

还可以使用 .prevent 和 .stop 等修饰符

component

vue 中最终要的概念就是组件了。使用组件来模块式得构建应用。需要通过 props 属性来定义组件中的属性

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

Vue.component("todo-item", {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ["todo"],
  template: "<li>{{ todo.text }}</li>"
})

props 是一个数组，用来声明组建的属性。然后通过属性来传递。

组件还可以通过 $emit 来发送事件，这些事件可以被所有的组件监听到，就像普通的 DOM 事件一样。

生命周期函数

在固定的周期，vue 会调用的一些函数 created, mounted 等。需要注意的是，不要使用胖箭头函数。

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log("a is: " + this.a)
  }
})
// => "a is: 1"

创建 vue 应用

因为我们会直接通过*.vue文件来编写 vue 的组件，因此需要使用 webpack 打包编译。另外我们需要使用官方的 vue-router 来

vue init webpack notelet

这条命令基于 webpack 这个模板创建了 notelet 这个应用，也就是我们的笔记应用。

打开 src/router/index.js 可以看到 vue 创建的 router 的代码，其中@是src目录的缩写。

import Vue from "vue"
import Router from "vue-router"
import Hello from "@/components/Hello"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: "/",
      name: "Hello",
      component: Hello
    }
  ]
})

然后打开 src/main.js, 可以看到在里面使用了 App 来作为我们的跟组件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue"
import App from "./App"
import router from "./router"

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  template: "<App/>",
  components: { App }
})

执行 npm run dev, 然后打开 http://localhost:8080/ 就可以看到我们的 vue 应用了。注意，在写这篇文章的时候 node 8.x 下似乎有 bug, 导致 app.js 加载不出来，安装 6.x 就好了。该死的 node.

打开 App.vue, 也就是我们的根组件，可以看到下面的内容

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "app"
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

注意其中的 router-view 便签，意思就是路由的内容都在 router-view 中显示。

添加一个新的组件和路由

接下来我们添加一个"关于"页面。打开src/router/index.js, 改成下面这样：

export default new Router({
  routes: [
    {
      path: "/",
      name: "Hello",
      component: Hello
    },
    {
      path: "/about",
      name: "About",
      component: About
    }
  ]
})

然后添加 src/components/About.vue 文件

<template>
  <div class="hello">
    <h1>About Notelet</h1>
    <p>This is a simple note app</p>
  </div>
</template>

<script>
export default {
  name: "About",
  data () {
    return {
      msg: "Hello Vue"
    }
  }
}
</script>

然后更改 App.vue 文件

<template>
  <div id="app">
    <router-link :to="{name: "Hello"}">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

注意，我们使用 about 指向了 About 这个组件，而使用 hello 指向了 Hello 这个组件，注意其中还动态传递了参数。

[1] https://scotch.io/tutorials/getting-started-with-vue-router