Diferència entre revisions de la pàgina «VUEJS»

De wikiserver
Dreceres ràpides: navegació, cerca
Línia 431: Línia 431:
 
</script>
 
</script>
 
</source>
 
</source>
 +
 +
<script lang="javascript">
 +
<div class="container">
 +
<h1>Lets hear some stories!</h1>
 +
<div>
 +
<h3>Alex's stories</h3>
 +
<ul class="list-group">
 +
<li v-for="story in stories | filterBy 'Alex' in 'writer'"
 +
class="list-group-item"
 +
>
 +
{{ story.writer }} said "{{ story.plot }}"
 +
</li>
 +
</ul>
 +
<h3>John's stories</h3>
 +
<ul class="list-group">
 +
<li v-for="story in stories | filterBy 'John' in 'writer'"
 +
class="list-group-item"
 +
>
 +
{{ story.writer }} said "{{ story.plot }}"
 +
</li>
 +
</ul>
 +
<div class="form-group">
 +
<label for="query">
 +
What are you looking for?
 +
</label>
 +
<input v-model="query" class="form-control">
 +
</div>
 +
<h3>Search results:</h3>
 +
<ul class="list-group">
 +
<li v-for="story in stories | filterBy query in 'plot'"
 +
class="list-group-item"
 +
>
 +
{{ story.writer }} said "{{ story.plot }}"
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
</script>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
<script lang="javascript">
 +
 +
<body>
 +
    <div class="container">
 +
        <h1>veamos</h1>
 +
        <div>
 +
            <ul>
 +
              <!--  <li v-for="storie in stories"><button  @click="storie.votos++">Vote</button><pre v-text="storie.votos"></pre></li>-->
 +
                <li v-for="storie in stories"><button  @click="incrementar()">Vote</button><pre v-text="storie.votos"></pre></li>
 +
            </ul>
 +
        </div>
 +
        <pre>
 +
{{$data | json}}
 +
</pre>
 +
    </div>
 +
</body>
 +
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.js"></script>
 +
<script type="text/javascript">
 +
    new Vue({
 +
        el: '.container',
 +
        data: {
 +
            stories: [{
 +
                    politico: "julio",
 +
                    votos: 1
 +
                },
 +
                {
 +
                    politico: "paco",
 +
                    votos: 2
 +
                },
 +
                {
 +
                    politico: "raúl",
 +
                    votos: 3
 +
                },
 +
                {
 +
                    politico: "jorge",
 +
                    votos: 4
 +
                },
 +
            ]
 +
        }       
 +
    })
 +
</script>

Revisió del 14:31, 14 juny 2019

v-text: para mostrar texto y que no parpadee

v-show: para mostrar u ocultar el elemento en función de su valor. v-show="true" es igual v-show="mensaje"

v-if y v-else: 


<body>

        <div id="el">
                <h1> {{mensaje}}</h1>    //podemos ver 
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>  //CDN
    <script>
    
         new Vue({
            el: '#el',   //hace referencia al elemento id= el
            data: {
                mensaje: "resultado"   //datos, hace referencia dentro de elemento #el {{mensaje}} 
            }
        })
    
    
    </script>


<body>

    <div id="el">
            <h1 v-show="mensaje.length > 2">Ejemplo <span v-text="mensaje"> {{mensaje}}</span></h1>  //al recargar la pagina, se puede ver {{mensaje}} para evitar esto se usa la directiva v-text
            <input type="text" class="text" v-model="mensaje">
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

    var variable = new Vue({
        el: '#el',
        data: {
            mensaje: "resultado"
        }
    })


</script>



<body>
        <div id="el">
                <h1>Hola <span v-text="mensaje"> </span></h1>   //muestra "Hola" y luego en función del texto del input va rellenando
                <input type="text" class="text" v-model="mensaje">
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
    
        var variable = new Vue({
            el: '#el',
            data: {
                mensaje: "resultado"
            }
        })
    
     </script>


<body>
        <div id="el">
                <h1 v-show="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1>    //si el mensaje es mayor que 2 muestra en caso contrario hace un display:none en css
                <input type="text" class="text" v-model="mensaje">
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
    
        var variable = new Vue({
            el: '#el',
            data: {
                mensaje: "resultado"
            }
        })
    
     </script>


<body>
        <div id="el">
                <h1 v-if="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1>    //en vez de v-show podemos usar v-if
                <h1 v-else>otra</h1>
                <input type="text" class="text" v-model="mensaje">
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
    
        var variable = new Vue({
            el: '#el',
            data: {
                mensaje: "resultado"
            }
        })
    
     </script>


BUCLES 

<body>
    <div id="el">
        <ul>
            <!-- <li v-text="profesores[0]"></li>-->
            <li v-for="profesor in profesores" v-text="profesor"></li>
        </ul>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = new Vue({
        el: '#el',
        data: {
            profesores: [
                "Julio Noguera",
                "Albert Canela",
                "Alex Salinas"

            ]
        }
    })
</script>



<body>
    <div id="el">
        <ul>
            <!-- <li v-text="profesores[0]"></li>-->
            <li v-for="profesor in profesores" v-text="profesor.nombre"></li>
        </ul>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = new Vue({
        el: '#el',
        data: {
            profesores: [
                {nombre:"Julio Noguera"},
                {nombre: "Albert Canela"},
                {nombre: "Alex Salinas"}

            ]
        }
    })
</script>
<div id="el">
        <ul>
            <!-- <li v-text="profesores[0]"></li>-->
            <li v-for="profesor in profesores">
                <span v-text="profesor.nombre"></span>
                <small v-if="profesor.activo">-Activo</small>
                <small v-else>-NO está</small>
               
            </li>
        </ul>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = new Vue({
        el: '#el',
        data: {
            profesores: [{
                    nombre: "Julio Noguera",
                    activo: true
                },
                {
                    nombre: "Albert Canela",
                    activo: true
                },
                {
                    nombre: "Alex Salinas",
                    activo: false
                }

            ]
        }
    })
</script>

//en Consola del navegador->
// variable.profesores[0].nombre ="Pepe"
// variable.profesores.push({nombre:"Joan Comas,"activo:true"})

EVENTOS y FUNCIONES 

<body>
    <div id="el">

        <input type="text" v-model="mensaje">
        <h1 v-text="mensaje"></h1>
        <!--  <button @click="mensaje=mensaje.split('').reverse('').join('')">BOTON</button> <!-- @click es abreviación de v-on:click -->

        <button @click="invertir">INVERTIR</button>

    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = new Vue({
        el: '#el',
        data: {

            mensaje: " ",

            profesores: [{
                    nombre: "Julio Noguera",
                    activo: true
                },
                {
                    nombre: "Albert Canela",
                    activo: true
                },
                {
                    nombre: "Alex Salinas",
                    activo: false
                }

            ]
        },
        methods: {
            invertir: function () {
                this.mensaje = this.mensaje.split('').reverse('').join('');
            }
        }
    })
</script>

BOTÓN- AÑADIR LISTA 

<body>
    <div id="el">


        <ul>
            <!-- <li v-text="profesores[0]"></li>-->
            <li v-for="profesor in profesores">
                <span v-text="profesor.nombre"></span>
                <small v-if="profesor.activo">-Activo</small>
                <small v-else>-NO está</small>
            </li>

             <input v-on:keyup.13="anadir" type="text" v-model="profe" >   //el 13 es enter en ascii
             <!-- <input v-on:keyup.enter="anadir" type="text" v-model="profe" >  -->
           <!-- <input type="text" v-model="profe"> -->
           <!-- <button @click="anadir">+ añadir</button>-->
        </ul>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = new Vue({
        el: '#el',
        data: {

            profe: "",

            profesores: [{
                    nombre: "Julio Noguera",
                    activo: true
                },
                {
                    nombre: "Albert Canela",
                    activo: true
                },
                {
                    nombre: "Alex Salinas",
                    activo: false
                }

            ]
        },
        methods: {
            anadir: function () {

                this.profesores.push({
                    nombre: this.profe,
                    activo: false
                });

            }
        }
    })
</script>


<body>
    <div class="container">
        <div id="elemento">
            <ul>
                <li v-for="profe in profesores">
                    <span v-text="profe.nombre"></span>
                    <span @click="profe.activo=false" v-if="profe.activo" class="glyphicon glyphicon-check"></span>
                    <span @click="profe.activo=true" v-else class="glyphicon glyphicon-unchecked"></span>

                </li>
            </ul>
            <pre>
                    {{$data}}
            </pre>


        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = new Vue({
        el: '#elemento',
        data: {

            profe: "",

            profesores: [{
                    nombre: "Julio Noguera",
                    activo: true
                },
                {
                    nombre: "Albert Canela",
                    activo: true
                },
                {
                    nombre: "Alex Salinas",
                    activo: false
                }

            ]

        }
    })
</script>

DIRECTIVA COMPUTED.

DIRECTIVA V-BIND -> PARA ACTIVAR CLASES 

<body>
    <div class="container">
        <div id="elemento">
            <ul>

 <!--v-bind:class="['glyphicon',tarea.completo ? 'glyphicon-check': 'glyphicon-unchecked']"  //en el caso de querer añadir varias clases-->

                <li v-for="tarea in tareas"> 
                    <span v-text="tarea.nombre" @click="tarea.completo=!tarea.completo"     // cambia de true a false y viceversa
                    v-bind:class="{  //activas la clases
                                 'glyphicon': true,   
                                 'glyphicon-check':tarea.completo,
                                 'glyphicon-unchecked': ! tarea.completo
                                  }"></span>
                </li>
            </ul>
            <pre>
                    {{$data}}
                 
            </pre>
        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var variable = new Vue({
        el: '#elemento',
        data: {

            tareas: [{
                nombre: "Estudiar",
                completo: true
            },
            {
                nombre: "Repasar",
                completo: true
            },
            {
                nombre: "Examinar",
                completo: false
            }

            ]

        }
    })
</script>

<script lang="javascript">

Lets hear some stories!

Alex's stories

John's stories

<label for="query"> What are you looking for? </label> <input v-model="query" class="form-control">

Search results:

</script>







<script lang="javascript">

<body>

veamos

  • <button @click="incrementar()">Vote</button>
    • 
            

        

        
{{$data | json}}


    


</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.js"></script>
<script type="text/javascript">



   new Vue({
       el: '.container',
       data: {
           stories: [{
                   politico: "julio",
                   votos: 1
               },
               {
                   politico: "paco",
                   votos: 2
               },
               {
                   politico: "raúl",
                   votos: 3
               },
               {
                   politico: "jorge",
                   votos: 4
               },
           ]
       }        
   })



</script>






					

						Obtingut de «http://wikiserver.infomerce.es/index.php?title=VUEJS&oldid=11921»