本篇文章首发于 CodingTheSmartWay.com.

什么是 Vue.js

Vue 是一个专注于构建用户界面的渐进式 JavaScript 框架。它只在“视图层”工作，不对中间件和后端做任何假设，因此可以轻松地集成到其他项目和库中。Vue.js 提供了许多用于视图层的功能，并可用于构建强大的单页 Web 应用程序。以下是一些特点：

响应式接口
声明式渲染
数据绑定
指令
模板逻辑
组件
事件处理
计算属性
CSS 过渡和动画
过滤器

Vue.js 2 核心库的大小非常小（仅 17 kB）。这确保使用 Vue.js 添加到项目中的开销最小，因此网站加载速度快。Vue.js 网站可在此处找到：https://vuejs.org/

如何使用 Vue.js

有多种方式将 Vue.js 包含在 Web 项目中：

通过在 HTML 文件中包含 <script> 标记使用 CDN
使用 Node Package Manager（NPM）进行安装
使用 Bower 进行安装
使用 Vue-cli 设置项目

接下来，我们将使用 Vue-cli 设置新项目并安装 Vue.js 2 库。

使用 Vue-cli

首先，我们需要安装 Vue-cli。命令行界面可作为 NPM 包使用。确保在系统上可用 Node.js 和 npm 命令，并使用以下命令在本地系统上全局安装 Vue CLI：$ npm install -g vue-cli 客户端成功安装后，vue 命令可用。现在，我们可以使用以下方式使用此命令启动项目：$ vue init webpack vueapp01 我们告诉 vue 初始化一个新项目并使用 webpack 模板。我们还将项目命名为 vueapp01。执行命令会在命令行上显示一些问题，如下图所示：

该项目将创建在 vueapp01 文件夹中。使用以下命令更改到该目录：$ cd vueapp01 使用 npm 再次安装依赖项以开始安装：$ npm install 在完成安装包之后，你可以使用以下方式使用 npm 在开发模式下启动 Web 服务器：$ npm run dev 这将在端口 8080 上启动服务器，并在浏览器中自动显示应用程序输出：

稍后，如果你想要构建生产版本，则可以使用以下命令。在这种情况下，将创建一个包含用于生产部署的文件的 dist 文件夹。$ npm run build

项目结构

让我们看一下在文件夹 vueapp01 中可用的初始项目结构：

在项目根文件夹中，你可以找到文件和文件夹。让我们检查其中最重要的几个。package.json 文件包含项目的所有依赖项。通过在此之前使用 npm install 命令，我们已确保在项目的 node_modules 文件夹中安装了 package.json 中列出的依赖项。文件 index.html 包含以下 HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vueapp01</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

此文件是应用程序的起点。请注意，在 body 部分中，有一个 <div> 元素，其 id 属性设置为字符串 app。此元素用作 Vue.js 生成的输出的占位符。接下来，请查看 src 文件夹中的文件 main.js。那是初始化 Vue 应用程序的地方：

import Vue from 'vue'
import App from './App'new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

在文件顶部，你可以找到两个导入语句：

import Vue from 'vue';：Vue 是框架的主类
import App from './App';：App 是应用程序的根组件

使用 new 关键字创建了主框架类 Vue 的新实例。构造函数将对象作为参数，该对象包含三个属性：

el：通过将字符串 #app 分配给此属性，我们定义了 Vue 应用程序的输出应呈现到 index.html 中的 <div id='app'></div> 元素中。
template：模板包含用于生成 Vue.js 应用程序输出的 HTML 代码。
components：在模板中使用的 Vue.js 组件列表。

模板仅包含一个元素：<App/>。当然，这不是标准的 HTML 元素。这是分配给 App 组件的元素。为了能够在模板中使用 <App/>，App 组件也列在分配给 components 属性的对象中。接下来，让我们看一下文件 App.vue 中的 App 组件实现：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template><script>
import Hello from './components/Hello'export default {
  name: 'app',
  components: {
    Hello
  }
}
</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>

与 Vue.js 2 单文件组件一样，App 实现分为三个部分：```

<template></template>: 组件的模板代码
<script></script>: 组件的脚本代码
<style></style>: 组件的 CSS 代码

我们重点关注前两个部分——模板和脚本。脚本部分默认导出了一个声明组件名为 app 的对象。同样，组件属性用于声明 App 需要使用另一个组件 (Hello)。该子组件在 app 的模板代码中使用，并在 components 文件夹下的 hello.vue 文件中实现。为了能够在 App 中使用 Hello 组件，还需要在脚本部分的顶部包含相应的导入语句。Hello 组件的实现如下所示:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template><script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}ul {
  list-style-type: none;
  padding: 0;
}li {
  display: inline-block;
  margin: 0 10px;
}a {
  color: #42b983;
}
</style>

该组件配置对象被默认导出。这次，组件配置对象包含一个 data 方法。该方法返回一个表示组件模型的对象。在模型对象中定义的属性可以使用插值语法在组件的模板中使用。在上面的示例中，模型对象只有一个属性: msg。将分配给该属性的字符串包含在组件的模板中，方法是使用: <h1>{{ msg }}</h1>。插值语法需要双花括号来将模型数据包含在模板中。

使用标准指令

让我们调整 Hello 组件实现，以了解有关使用 Vue.js 标准指令的更多信息。

v-for

v-for 指令使得基于源数据多次呈现一个元素成为可能。你可以使用此指令遍历数组并将数组数据添加到输出中。首先向 data 方法返回的对象添加一个数组：

users: [
        {firstname: 'Sebastian', lastname: 'Eschweiler'},
        {firstname: 'Bill', lastname: 'Smith'},
        {firstname: 'John', lastname: 'Porter'}
      ],

然后使用 v-for 指令在输出中包含一个列表，打印每个数组元素的 firstname 和 lastname 值：

<div>
      <ul>
        <li v-for="user in users">
          {{user.firstname}} {{user.lastname}}
        </li>
      </ul>
    </div>

v-model

v-model 指令在输入元素或组件上创建双向绑定。请确保在你的数据对象中定义应用作绑定目标的属性：

input_val: ''

然后使用指令将输入元素的值绑定到该属性：

<div>
      <input type="text" v-model="input_val">
</div>

建立了这种绑定后，我们获得了两个效果：

每当用户在输入字段中输入值时，input_val 的值相应更新。
如果在我们的程序中更改 input_val 的值，则显示在输入元素中的值也会相应更新。

v-text

通过使用 v-text 指令，可以设置元素的文本内容。如果要设置完整的文本内容，我们可以使用它作为 {{...}} 语法的替代方案。例如，我们可以使用该指令将 input_val 值输出给用户：

Input Value: <span v-text="input_val">

总结

调整后的 Hello 组件实现的完整代码应如下所示：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr />
    <div>
      <ul>
        <li v-for="user in users">
          {{user.firstname}} {{user.lastname}}
        </li>
      </ul>
    </div>
    <hr />
    <div>
      <input type="text" v-model="input_val">
    </div>
    <div>
      Input Value: <span v-text="input_val">
    </div>
    <hr />
    <div>
      <button class="btn btn-primary" v-on:click="counter++">You've clicked this button {{counter}} times!</button>
    </div>
  </div>
</template><script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      users: [
        {firstname: 'Sebastian', lastname: 'Eschweiler'},
        {firstname: 'Bill', lastname: 'Smith'},
        {firstname: 'John', lastname: 'Porter'}
      ],
      input_val: '',
      counter: 0
    }
  }
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
    list-style-position: inside;
}
a {
  color: #42b983;
}
</style>

结果可以在以下截图中看到:

本文首次发布于 CodingTheSmartWay.com 。

译自：https://medium.com/codingthesmartway-com-blog/vue-js-2-quickstart-tutorial-2017-246195cfbdd2

Vue.js 2 快速入门教程 2017

什么是 Vue.js

如何使用 Vue.js

使用 Vue-cli

项目结构

使用标准指令

v-for

v-model

v-text

总结

一个人玩

评论(0)

后端架构师技术图谱

Java线程池实现原理及其在美团业务中的实践

新一代垃圾回收器ZGC的探索与实践

Vue.js 2 快速入门教程 2017

什么是 Vue.js

如何使用 Vue.js

使用 Vue-cli

项目结构

使用标准指令

v-for

v-model

v-text

总结

一个人玩

评论(0)

相关阅读

ICLR 2021 | 美团AutoML论文：鲁棒的神经网络架构搜索 DARTS-

CSS 实现优惠券的技巧

美团外卖美食知识图谱的迭代及应用

外卖套餐搭配的探索和应用

美团民宿跨端复用框架设计与实践

常识性概念图谱建设以及在美团场景中的应用

多业务建模在美团搜索排序中的实践

后端架构师技术图谱

Java线程池实现原理及其在美团业务中的实践

新一代垃圾回收器ZGC的探索与实践