初始化

安装vue-cli

# install
npm install -g @vue/cli
# OR
yarn global add @vue/cli
# test
vue --version
# upgrade
npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli

文档： https://cli.vuejs.org/guide/installation.html

在 Windows 中，有时候会出现命令行输入 vue --version 显示命令找不到的错误。这个时候只需要在环境变量 Path 中加入

C:\Users\<username>\AppData\Roaming\npm

创建项目

vue create shopping

然后选择默认生成项目即可。

安装依赖

npm install sass sass-loader --save-dev

这样，一个基本的 Vue 项目就完成了。
安装vscode 插件 vetur
关闭 eslint

Vue 文件

一个典型的 Vue 文件包含三个部分

<template>
  ...
</template>
<script>
...
</script>
<style lang=scss scoped>
...
</style>

<template> 包含的是 HTML 的结构
<script> 暴露出组件对象的结构，并且包含了这个组件的业务逻辑
<style> 指的是当前页面的 css， lang="scss" 表示使用的是 sass ， scoped 表示的是只在当前页面有效。
项目主要的结构如下

public 放置一些静态文件
components 放置 vue 公共组件
App.vue 是项目的主要入口
main.js 主要是挂载一些 vue 的插件并声明了 App 为主要入口。

Vue 基础语法

我们可以通过一个简单的应用来学习 Vue 的基础语法

这是一个简单的投票系统，点击右上角，其数值会不断累加。接下来我们就来实现这样一个应用。

安装bulma/font-awesome

npm  install @fortawesome/fontawesome-free --save
npm install bulma --save

然后在 main.js 中加入

import "bulma/css/bulma.css"
import  "@fortawesome/fontawesome-free/css/all.css"

这样我们就成功引入了 bulma 和 fontawesome 两个框架, 它直接引入到了页面中

分解组件

我们的页面效果如下所示：

按上图所示，我们的组件可以分为两部分，一部分是 App 一部分是 submission-component
接下来实现 submission component

submission component

其代码骨架为:

<template>
    <div>
        <figure class="media-left">
        </figure>
        <div class="media-content">
        </div>
        <div class="media-right">
        </div>
    </div>
</template>
<script>
export default {
    name: "Submission"
}
</script>
<style>
</style>

在 App 中引入其他组件

template

<template>
  <div id="app">
      ...
        <Submission :submission="submission" />
        ...
  </div>
</template>

script

<script>
import Submission from "./components/Submission.vue"
export default {
  name: 'App',
  ...
  components: {
    Submission
  }
}
</script>

声明变量

Vue 在 HTML标签中声明变量使用的是 v-bind ，也可以使用 :src=xxx 类似的语法。

<a :href="submission.url">{{ submission.title}}</a>

属性中的变量可以直接写，文本中需要加大括号。
如果属性中，出现表达式则需要加大括号

<article :class="{'blue-border': submission.votes >=20 }">
</article>

for 循环

<article v-for="submission in submissions" :key="submission.id" class="media">
</article>

上面的代码会输出多个 article 标签，并且需要带上 :key=index 值，这个是必须的。在有了key属性之后，Vue会记住元素们的顺序，并根据这个顺序在适当的位置插入/删除元素来完成更新，这种方法比没有key属性时的就地复用策略效率更高。总体来说，当使用列表渲染时，永远添加key属性，这样可以提高列表渲染的效率，提高了页面的性能。

if 语句

<div v-if='loading' class='ui active inline loader'></div>
<button v-if="saveStatus === 'SAVING'" disabled class="ui button">

If 语句里面，可以是 boolean 变量或者是表达式，或者是一个函数。

事件处理

事件处理，我们一般会使用 @ 来表示，如下

<span class="icon is-smaill" @click="vote"></span>

如果有参数可以直接放进去

<span class="icon is-smaill" @click="vote(submission.id)"></span>

在 form 表单中，我们可以看到更多的事件处理。

技术文档

Vue 学习

初始化