Vue.js开始使用Vue.js


备注

Vue.js是一个快速发展的JavaScript前端框架,受Angular.jsReactive.jsRivets.js ,提供简单的用户界面设计,操作和深度反应。

它被描述为MVVM图案化框架, Model-View View-Model ,它基于对组件和视图的双向绑定数据的概念。它速度极快,超出了其他顶级JS框架的速度,并且非常易于用户使用,易于集成和原型设计。

版本

发布日期
2.4.1 2017年7月13日
2.3.4 2017年6月8日
2.3.3 2017年5月9日
2.2.6 2017年3月26日
2.0.0 2016年10月2日
1.0.26 2016年6月28日
1.0.0 2015年10月26日
0.12.0 2015年6月12日
0.11.0 2014年11月6日

“你好,世界!”程序

要开始使用Vue.js ,请确保HTML中包含脚本文件。例如,将以下内容添加到HTML中。

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
 

简单的例子

HTML模板

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

JavaScript的

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

查看此示例的实时演示


您可能还想查看Vue.js制作的“Hello World”示例

处理用户输入

VueJS也可用于轻松处理用户输入,使用v-model进行双向绑定使得轻松更改数据变得非常容易。

HTML:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    {{message}}
<input v-model="message"> 
</div>
 

JS:

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

使用v-model 指令在VueJS中进行双向绑定非常容易。

在这里查看一个实例

Vue 2中的Hello World(JSX方式)

JSX并不打算由浏览器解释。它必须首先转换为标准的Javascript。要使用JSX,您需要安装babel babel-plugin-transform-vue-JSX

运行以下命令:

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev
 

并将其添加到.babelrc 如下所示:

{
  "presets": ["es2015"],
  "plugins": ["transform-vue-jsx"]
}
 

使用VUE JSX的示例代码:

import Vue from 'vue'  
import App from './App.vue'

new Vue({  
  el: '#app',
  methods: {
    handleClick () {
      alert('Hello!')
    }
  },
  render (h) {
    return (
      <div>
        <h1 on-click={this.handleClick}>Hello from JSX</h1>
        <p> Hello World </p>
      </div>
    )
  }
})
 

通过使用JSX,您可以在编写JavaScript代码的同一文件中编写简洁的HTML / XML结构。

恭喜你,你做完了:)