Vue.js Tutorial => Empezando con Vue.js

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.

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

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í.

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

Vue.js Tutorial
Empezando con Vue.js

Buscar..