Gramática básica de vue
1. Introducción
La gramática vue se basa básicamente en el sitio web oficial, y algunos han visto un video de cierto kuang en la estación by se inspiraron en él.
<div id="app">
// 取data 中show标签的值
<label>{
{ show }}</label>
</div>
new Vue({
// 根据id获取对应的元素
el: "#app1",
data: {
// 数据存放的地方，show为自定义标签
show: "bitQian adorable.."
}
})
2. Enlace de datos v-bind
Puede vincular datos dinámicamente a elementos de la página y los datos se escriben en la etiqueta personalizada de datos.
Los elementos de la página utilizan la sintaxis v-bind para vincular atributos html.
<!-- 给label标签设置标题 -->
<div id="app1">
<label v-bind:title="show">hello vue.js</label>
</div>
new Vue({
el: "#app1",
data: {
show: "bitQian adorable.."
}
})
En producción, también puede vincular valores en el ciclo del componente, vincular el atributo href de la etiqueta a, etc.
3. v-if || v-else-if || v-else juicio condicional
si-si no
<div id="app">
<span v-if="ok">ok</span>
<span v-else>bad</span>
</div>
new Vue({
el: "#app",
data: {
ok: 1==1
}
});
if else if else combinación, el bool de type se juzga por tres signos iguales
<div id="app1">
<span v-if="type==='A'">A</span>
<span v-else-if="type==='B'">B</span>
<span v-else>C</span>
</div>
new Vue({
el: "#app1",
data: {
type: "A"
}
});
4. bucle v-for
elemento es cada elemento, los elementos corresponden a los elementos en los datos
<div id="app3">
<span v-for="item in items">
item: {
{ item }}, id: {
{ item.id }}, name: {
{ item.name }} <br/>
</span>
</div>
let app3 = new Vue({
el: "#app3",
data: {
// items表示一个数组，里面装了两个人
items: [{
"id": 1, "name": "jack"},
{
'id': 2, "name": "rose"}]
}
});
5. El elemento v-on escucha eventos
En pocas palabras, es para vincular eventos js al elemento, como hacer clic, pasar el mouse, eventos de activación del teclado, etc.
Aquí usamos el enlace de eventos de clic para mostrar, invertir el mensaje
<!-- v-on 绑定方法 -->
<div id="app3">
<p>{
{ message }}</p>
<!-- click为点击事件，也可根据场景换成其它事件 -->
<input type="button" v-on:click="reverseMessage" value="reverse">
</div>
new Vue({
el: "#app3",
data: {
message: "hello world!"
},
methods: {
reverseMessage: function () {
// 当我点击按钮时，显示在p标签里面的hello world!反转
this.message = this.message.split("").reverse().join("")
}
}
});
