Empezando con Vue.js

Download vue.js eBook

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.

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

Ejemplo simple

Plantilla HTML

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

JavaScript

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

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:

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

JS:

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

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:

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

y .babelrc a tu .babelrc así:

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

Código de muestra con VUE JSX:

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

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

Felicitaciones, has terminado :)

Stats

497 Contributors: 16
Wednesday, August 2, 2017
Licenciado bajo: CC-BY-SA

No afiliado a Stack Overflow
Rip Tutorial: info@zzzprojects.com

Descargar eBook