开始使用Vue.js

Download vue.js eBook

备注

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模板

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

JavaScript的

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

查看此示例的实时演示


您可能还想查看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:

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

使用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 如下所示:

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

使用VUE JSX的示例代码:

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

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

恭喜你,你做完了:)

Stats

497 Contributors: 16
Wednesday, August 2, 2017
许可下: CC-BY-SA

不隶属于 Stack Overflow
Rip Tutorial: info@zzzprojects.com

下载电子书