¿Cuáles son VUE
VUE (pronunciación / VJU /, similar a la vista) es un cuadro progresivo para la construcción de interfaces de usuario. Vue enfoque librería base sólo en la capa de vista, no sólo es fácil de usar, pero también fácil de integrar las bibliotecas de terceros o proyecto existente.
Los componentes del sistema es otro concepto importante Vue, porque es una abstracción, nos permite utilizar componentes pequeños, independientes y reutilizables normalmente construir grandes aplicaciones. Piense en ello, casi cualquier tipo de interfaz de la aplicación puede ser abstraído como un árbol de componentes.
paquete
En el Vue, el Vue es una instancia tiene unas opciones predefinidas en un componente de la naturaleza.
componente de registro
Asamblea en el registro de ámbito mundial y local de registro , el registro es un registro global por debajo.
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
1. montaje, y los parámetros de paso al subconjunto a través del componente matriz.
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义特性。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
la reutilización de componentes
Tiene los siguientes componentes:
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
Uso de la forma componente como sigue:
<div id="components-demo">
<button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })
Dado que los componentes Vue ejemplos son multiplexadas, para que reciban las mismas nuevas nuevas opciones Vue como datos computados métodos de vigilancia y ciclo de vida como un gancho, una excepción especial como la única raíz opciones el ejemplo específicos, tales
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
Tenga en cuenta que al hacer clic en el botón, cada componente mantendrá su recuento independiente. Porque una vez que utilice todos los componentes, tendrá que se crea una nueva instancia
los datos debe ser una función
Un componente de opción de datos debe ser una función, por lo que cada instancia puede mantener se devuelve una copia separada del objeto, si no existe una regla Vue, haga clic en un botón que puede afectar a todos los demás casos
Transmitir datos a la sub-ensamblaje por Prop
Prop son propiedades personalizadas se pueden registrar en el componente. Cuando un valor se pasa a una característica de la hélice, que se convierte en un atributo de que instancia de componente . Con el fin de entregar un título para el componente blog, podemos utilizar una opción de accesorios para incluirlo en la lista de componente aceptable de puntal.
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
Un componente por defecto puede tener cualquier número de prop, cualquier valor se puede pasar a cualquier prop.
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
Los escenarios son los siguientes:
//真实的数据应该是一个数组
new Vue({
el: '#blog-post-demo',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
<blog-post v-for "post in posts"
v-bind:key="post.id" v-bind:title="post.title">
</blog-post>
Un solo elemento raíz
Las necesidades de cada componente tenga uno y sólo un elemento.
Y transferir datos necesidades lo más conveniente posible.
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
`
})
La transmisión de datos necesita tan fácil como sea posible:
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
而不是按照如下规则进行：
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
v-bind:content="post.content"
v-bind:publishedAt="post.publishedAt"
v-bind:comments="post.comments"
></blog-post>
La transmisión de datos al componente de los padres
<!--在父组件上声明布局-->
new Vue({
el:'enlarge-text-demo',
postFontSize:20
})
<div id='enlarge-text-demo'>
<blog-post style="{font-size: postFontSize + 'em'}" v-for:"post in posts" :key="post.id" :post="post" v-on:enlarge-text="postFontSize += 0.1">
</blog-post>
<div>
<!--子组件-->
<!--注册组件-->
Vue.component('blog-post',{
props:['post'],
templete:`
<div class='blog-post'>
<h3>{{ post.title }}</h3>
<button v-on:click="$emit('enlarge-text')">
Enlarge text
</button>
<div v-html="post.content"></div>
</div>
`
})
controles secundarios a los parámetros de control de paso de los padres
<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
<blog-post
...
v-on:enlarge-text="postFontSize += $event"
></blog-post>
或者，如果这个事件处理函数是一个方法：
<blog-post
...
v-on:enlarge-text="onEnlargeText"
></blog-post>
methods: {
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
}
Uso de la v-modelo
V-modelo se selecciona de un doble enlace, el contenido está por encima de manera vinculante
<input v-model="searchText"/>
等效于
<input :value="searchText"
@input="searchText=$event.target.value"/>
因此，要想使用v-model,必须按照如下方式使用：
<custom-input
v-bind:value="searchText" //自定义属性
v-on:input="searchText = $event" //自定义属性
></custom-input>
vue的子组件的写法如下：
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)" //回传属性
>
`
})
因此 可以使用v-model
<custom-input v-model="searchText"></custom-input>
Distribuir contenidos a través de las ranuras
Y los elementos HTML, que a menudo necesitan para entregar el contenido a un componente, como este:
<alert-box>
Something bad happened.
</alert-box>
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
salida:
¡Error! Algo malo sucedio.
T: volumen de suministro Slot
componentes dinámicos
A veces, para conmutar dinámicamente entre los diferentes componentes es muy útil, por ejemplo en una interfaz multi-etiqueta.
<component v-bind:is="currentTabComponent"></component>
