从 Angular 到 Vue.js - 快速上手指南-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，我们也有了越来越多的选择。Angular 和 Vue.js 是这个领域比较成熟的框架之一。学习一门新的框架并不容易，本篇文章将提供一个从 Angular 到 Vue.js 的快速上手指南，旨在为大家快速入门 Vue.js 提供帮助。

Angular 和 Vue.js 的区别

Angular 是由 Google 团队开发的一款全面的前端框架，专为单页面应用设计，底层使用了 rxjs 作为数据处理的基础库。Vue.js 是来自中国开发者尤雨溪，它采用了双向数据绑定和组件化的思想，并且易于集成到其他项目中。

相对于 Angular，Vue.js 更加轻量级且易学易用，适合快速 prototyping 和小型项目，但是在大型项目中也有很好的表现。可以看出，两个框架的适用场景不完全重叠，我们可以根据实际情况做出选择。

Vue.js 入门指南

安装

安装 Vue.js 最简单的方式是使用 CDN。将下面这行代码放入 HTML 中即可使用最新版本的 Vue.js：

<script src="https://unpkg.com/vue"></script>

当然，我们也可以使用 NPM 或者 Yarn 在项目中安装 Vue.js：

npm install vue

# or

yarn add vue

第一个 Vue.js 应用

创建一个 Vue.js 应用非常简单，我们只需要创建一个 Vue 实例即可。在 HTML 中添加下面这段代码：

<div id="app">
  {{ message }}
</div>

在 JavaScript 中添加下面这段代码：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

访问页面，你会看到页面上显示 "Hello, Vue!"，这就是 Vue.js 事情做的全部工作。

构建一个组件

在 Vue.js 中，我们可以以组件化的方式构建应用程序。下面是一个简单的组件，我们将它注册为全局组件。

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

在 HTML 中使用 my-component 组件：

<my-component></my-component>

这会在页面中呈现出 "A custom component!"。

数据绑定

在 Vue.js 中，我们使用双花括号的方式绑定数据到 HTML 中，这样数据就可以自动更新，这也是 Vue.js 中非常方便的一个特性。下面这个例子中，我们将一个变量绑定到了一个输入框中：

<div id="app">
  <input v-model="message" />
  {{ message }}
</div>

在 JavaScript 中添加下面这段代码：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

打开页面，你会看到输入框中的内容和下方的文本是同步变化的。

组件传值

组件之间的传值非常常见，在 Vue.js 中也非常方便。下面这个例子中，我们通过 props 和事件将一个值传到子组件中：

// www.javascriptcn.com code example
Vue.component('child-component', {
  props: ['myMessage'],
  template: '<div @click="clickHandler">{{ myMessage }}</div>',
  methods: {
    clickHandler: function() {
      this.$emit('event-child-click', 'Some message from child.')
    }
  }
})

Vue.component('parent-component', {
  template: '<div>Parent component <child-component v-bind:my-message="parentMessage" @event-child-click="eventHandler"></child-component></div>',
  data: function() {
    return {
      parentMessage: 'Hello from parent'
    }
  },
  methods: {
    eventHandler: function(messageFromChild) {
      console.log(messageFromChild)
    }
  }
})

在 HTML 中添加下面这段代码：

<div id="app">
  <parent-component></parent-component>
</div>

可以看到，child-component 接收 my-message 属性，点击后触发 event-child-click 事件，然后我们可以在 parent-component 中监听事件，并接收来自子组件的消息。

结语

本文简单介绍了从 Angular 到 Vue.js 的快速上手指南，并展示了一些 Vue.js 的基本概念和用法。Vue.js 的风格与 Angular 差别还是比较大的，但是使用它可以有效提高项目的可维护性和开发效率。如果你正在寻找一款轻量级的前端框架，Vue.js 绝对值得一试。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d79699a941bf7134d93446

从 Angular 到 Vue.js - 快速上手指南