Vue.js Inicio

Cada aplicación de Vue requiere ser implementada mediante la instanciación de Vue.

El formato de sintaxis es el siguiente:

var vm = new Vue({
  // 选项
})

A continuación, veamos a través de un ejemplo qué contenido necesita el constructor de Vue:

Ejemplo

<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/javascript">var vm = new Vue({ el: '#vue_det', data: { site: "Tutorial de Novato", url: "www.example.com", alexa: "10000" }, methods: { details: function() { return this.site + " - ¡Lo que se aprende no es solo tecnología, sino también sueños!"; } } })</script>

Pruébalo »

Haz clic en el botón "Pruébalo" para ver el ejemplo en línea.

Podemos ver que en el constructor de Vue hay un parámetro `el`, que es el `id` del elemento DOM. En el ejemplo anterior, el `id` es `vue_det`, dentro del elemento `div`:

<div id = "vue_det"></div>

Esto significa que todos nuestros cambios posteriores se realizarán dentro del `div` especificado; el exterior del `div` no se verá afectado.

A continuación, veamos cómo definir el objeto de datos.

dataSe utiliza para definir propiedades. La instancia tiene tres propiedades: `site`, `url`, `alexa`.

methodsSe utiliza para definir funciones; el valor de la función se puede devolver mediante `return`.

{{ }}Se utiliza para mostrar las propiedades del objeto y los valores de retorno de las funciones.

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>

Cuando se crea una instancia de Vue, agrega al sistema reactivo de Vue todas las propiedades que puede encontrar en su objeto `data`. Cuando los valores de estas propiedades cambian, la vista HTML también cambiará en consecuencia.

Ejemplo

<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>Alexa : {{alexa}}</h1> </div> <script type="text/javascript">// Nuestro objeto de datos var data = { site: "Tutorial de Novato", url: "www.example.com", alexa: 10000} var vm = new Vue({ el: '#vue_det', data: data }) // ¡Se refieren al mismo objeto! document.write(vm.site === data.site) // true document.write("<br>") // Cambiar la propiedad también afecta a los datos originales vm.site = "Ejemplo" document.write(data.site + "<br>") // Ejemplo // ... y viceversa data.alexa = 1234 document.write(vm.alexa) // 1234</script>

Pruébalo »

Además de las propiedades de datos, la instancia de Vue también proporciona algunas propiedades y métodos de instancia útiles. Todos tienen el prefijo `$` para distinguirlos de las propiedades definidas por el usuario. Por ejemplo:

Ejemplo

<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>Alexa : {{alexa}}</h1> </div> <script type="text/javascript">// Nuestro objeto de datos var data = { site: "Tutorial de Novato", url: "www.example.com", alexa: 10000} var vm = new Vue({ el: '#vue_det', data: data }) document.write(vm.$data === data) // true document.write("<br>") document.write(vm.$el === document.getElementById('vue_det')) // true </script>

Pruébalo »
Otras extensiones