Vue.jsEmpezando con Vue.js

Download Vue.js for free

Observaciones

Vue.js es un marco de front-end en rápido crecimiento para JavaScript , inspirado en Angular.js , Reactive.js y Rivets.js que ofrece un diseño simplificado de interfaz de usuario, manipulación y profunda reactividad.

Se describe como un marco modelado MVVM , Model-View View-Model , que se basa en el concepto de datos de enlace bidireccional a componentes y vistas. Es increíblemente rápido, supera las velocidades de otros marcos JS primer nivel y es muy fácil de usar para una fácil integración y creación de prototipos.

Versiones

Versión Fecha de lanzamiento
2.4.1 2017-07-13
2.3.4 2017-06-08
2.3.3 2017-05-09
2.2.6 2017-03-26
2.0.0 2016-10-02
1.0.26 2016-06-28
1.0.0 2015-10-26
0.12.0 2015-06-12
0.11.0 2014-11-06

"¡Hola Mundo!" Programa

Para comenzar a usar Vue.js , asegúrese de tener el archivo de script incluido en su HTML. Por ejemplo, agregue lo siguiente a su HTML.

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

Ejemplo simple

Plantilla HTML

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

JavaScript

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

Vea una demostración en vivo de este ejemplo.


También puede consultar el ejemplo de "Hello World" creado por Vue.js.

Manejo de entrada de usuario

VueJS también se puede usar para manejar fácilmente la entrada del usuario, y el enlace de dos vías con v-model hace que sea muy fácil cambiar los datos fácilmente.

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!'
  }
})
 

Es muy fácil realizar un enlace bidireccional en VueJS utilizando la directiva v-model .

Echa un vistazo a un ejemplo en vivo aquí.

Hola Mundo en Vue 2 (a la manera JSX)

JSX no debe interpretarse por el navegador. Primero debe ser transpilado a Javascript estándar. Para usar JSX necesitas instalar el plugin para babel babel-plugin-transform-vue-JSX

Ejecute el comando a continuación:

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

y .babelrc a tu .babelrc así:

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

Código de muestra con 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>
    )
  }
})
 

Al utilizar JSX, puede escribir estructuras HTML / XML concisas en el mismo archivo que escribe el código JavaScript.

Felicitaciones, has terminado :)

Accesorios