2017 Vue.js 2快速入门指南

时间 2021-02-14

标签 html 前端 vue webpack git github web vue-router vuex vue-cli 栏目 JavaScript 繁體版

原文原文链接

2017 Vue.js 2快速入门指南翻译自Vue.js 2 Quickstart Tutorial 2017从属于Web 前端入门与工程实践。Vue与React都是很是优秀的前端界面辅助库，笔者在工做中使用React会多一点，不过在学习Vue的过程当中也获得了不少启发。Vue和React在功能的完备、社区的活跃与性能的比较上笔者以为毋庸多言，不过从笔者我的来看以为两者的某些优点也是其劣势。Vue是渐进式的JavaScript库，能够在项目扩展的过程当中逐步添加所须要的模块，可是相对约束就较弱，而且强耦合于基于DOM的Web平台。React则是更多的关注于跨平台与大型Web应用的工程实践，可是学习曲线比较曲折，入门门槛相对较高，对于活动页、移动Mobile也有点太重。详细讨论参考笔者的2016-个人前端之路:工具化与工程化。html

Vue.js 概述

Vue是专一于构建用户界面层的渐进式JavaScript框架，它能够很方便地与各类中间件或者后端应用程序集成使用。Vue为咱们构建界面层提供了大量有用的工具，助咱们构建复杂的单页应用。Vue的特性包括但不限于：前端

响应式界面vue
声明式路由webpack
数据绑定git
指令github
模板逻辑web
组件vue-router
事件处理vuex
属性推断vue-cli
CSS 变换与动画
过滤

Vue.js 2核心库大概只有17KB，很是小，这就保证了引入Vue.js并不会对你的编译后的版本添加过多的代码，加速网站的加载。Vue.js的官方代码位于：https://vuejs.org/。

如何引入Vue.js

Vue.js为咱们提供了多种引入方式，能够根据咱们项目的实际需求自由选择：

在HTML中添加script标签从CDN引入
使用NPM安装
使用Bower安装
使用Vue-cli初始化项目

本文是选择了最后一种初始化的方式来建立新的项目。

使用 Vue-cli

首先，咱们可使用NPM安装Vue-cli。你必需要检查下系统中是否已经安装好了NodeJS而且npm命令行工具能够正常使用，而后使用以下命令在本地系统进行全局安装：

$ npm install -g vue-cli

安装完毕以后，咱们可使用以下方式来初始化新的项目:

$ vue init webpack vueapp01

这里咱们让Vue-cli以Webpack模板建立新的项目，而且个新项目取名为vueapp01，运行该命令以后它会向你咨询基本的项目信息，截图以下：

到这里项目的模板文件被添加到了vueapp01目录下，进入该目录便可以启动开发服务器：

$ npm run dev

该命令会启动一个监听8080端口的开发服务器，在浏览器中打开该端口能够看到以下界面：

若是你但愿将项目打包出开发版本，可使用build命令，它会将项目打包编译以后的文件放置在dist目录下：

$ npm run build

项目结构

该部分的代码参考vue-boilerplate。首先咱们来看下Vue-cli构建的项目目录结构：

进入项目根目录以后咱们使用npm intsall命令安装全部依赖，全部的依赖被声明在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>

该文件是整个应用的入口点，注意，不管你把<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:设定Vue应用的DOM挂载点
template:包含HTML代码的模板
components:用于模板中的Vue.js组件

该模板仅包含一个元素：<App />，固然这并非HTML标准元素，整个App组件的的定义在App.vue文件中：

<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单文件组件，其会包含三部分：

<template></template>: Component's template code
<script></script>: Component's script code
<style></style>: Component' CSS code

咱们先看看template与script这两块。script块导出了某个声明为app的组件，该组件中的属性声明了对于Hello组件的引用。Hello组件则是被定义在hello.vue文件中，为了使用其余组件咱们一样须要在script首部引入该组件。整个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>

使用标准指令

咱们可使用基本的Vue.js指令来为Hello组件添加更多的功能与数据逻辑。

v-for

v-fot指令容许咱们遍历某个数组而且将每个元素渲染到模板中，咱们能够先建立以下的数组：

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: ''

而后使用v-model将变量绑定到元素上：

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

这种双向绑定会有两个效果：

每次用户输入值时都会同步更新到input_val变量
若是咱们在程序中手动修改input_val变量的值，元素中的展现值也会被相应更新

v-text

v-text指令被用于设置文本内容，其做用等效于{{...}}，咱们能够用其来展现部分文本：

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

总结

完整的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"></span>
    </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>

最后的结果以下所示：

1. SmartFusion 2 Maker-Board快速入门指南
2. WeeChat 快速入门指南
3. C#快速入门指南
4. Markdown 快速入门指南
5. MariaDB快速入门指南
6. Electron指南 - 快速入门
7. GForms 快速入门指南
8. Fuego快速入门指南
9. ExtJS快速入门指南
10. Idea快速入门指南
更多相关文章...
• SQL 指南 - 网站建设指南
• HTML 指南 - 网站建设指南
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用