Herramientas de usuario
wiki2:js_fw:vuejs2
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
wiki2:js_fw:vuejs2 [2018/04/13 21:44] alfred [Axios] |
wiki2:js_fw:vuejs2 [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| - | ====== Vue.js 2 ====== | + | ====== Vue.js ====== |
| - | ===== Create a project ===== | + | |
| - | <code> | + | |
| - | $ vue init webpack vueapp01 | + | |
| - | </code> | + | |
| - | ===== Controller example ===== | + | |
| - | <code> | + | |
| - | <template> | + | |
| - | <div class="hello"> | + | |
| - | <h1>{{ msg }}</h1> | + | |
| - | <hr /> | + | |
| - | <div> | + | |
| - | <ul> | + | |
| - | <li v-for="user in users" :key="user.name"> | + | |
| - | {{user.firstname}} {{user.lastname}} | + | |
| - | </li> | + | |
| - | </ul> | + | |
| - | </div> | + | |
| - | <hr /> | + | |
| - | <div> | + | |
| - | <input type="text" v-model="input_val"> | + | |
| - | </div> | + | |
| - | <div> | + | |
| - | Input Value: <span v-text="input_val"></span> | + | |
| - | </div> | + | |
| - | <hr /> | + | |
| - | <div> | + | |
| - | <button class="btn btn-primary" v-on:click="counter++">You've clicked this button {{counter}} times!</button> | + | |
| - | </div> | + | |
| - | </div> | + | |
| - | </template> | + | |
| - | <script> | + | ===== Elements ===== |
| - | export default { | + | |
| - | name: 'HelloWorld', | + | |
| - | data () { | + | |
| - | return { | + | |
| - | msg: 'Welcome to Your Vue.js App', | + | |
| - | users: [ | + | |
| - | {firstname: 'Sebastian', lastname: 'Eschweiler'}, | + | |
| - | {firstname: 'Bill', lastname: 'Smith'}, | + | |
| - | {firstname: 'John', lastname: 'Porter'} | + | |
| - | ], | + | |
| - | input_val: '', | + | |
| - | counter: 0 | + | |
| - | } | + | |
| - | } | + | |
| - | } | + | |
| - | </script> | + | |
| - | <!-- Add "scoped" attribute to limit CSS to this component only --> | + | [[wiki2:vue:basic]] |
| - | <style scoped> | + | |
| - | h1, h2 { | + | |
| - | font-weight: normal; | + | |
| - | } | + | |
| - | ul { | + | |
| - | list-style-type: none; | + | |
| - | padding: 0; | + | |
| - | } | + | |
| - | li { | + | |
| - | display: inline-block; | + | |
| - | margin: 0 10px; | + | |
| - | } | + | |
| - | a { | + | |
| - | color: #42b983; | + | |
| - | } | + | |
| - | </style> | + | |
| - | </code> | + | ==== Others ==== |
| - | ===== Little ===== | ||
| - | ==== V-For and V-Bind with : ==== | ||
| - | <code> | ||
| - | <li v-for="bk in bookmarks" :key="bk.id"> | ||
| - | <a :href="bk.url" v-text="bk.title"></a> | ||
| - | </li> | ||
| - | </code> | ||
| - | ==== Component constructor ==== | + | [[wiki2:vue:js]] |
| - | <code> | + | |
| - | import axios from 'axios' | + | |
| - | export default { | + | [[wiki2:vue:webcomponents]] |
| - | name: 'Bookmarks', | + | ===== Notes ===== |
| - | data () { | + | |
| - | return { | + | |
| - | msg: 'Welcome to Your Vue.js App', | + | |
| - | bookmarks: [], | + | |
| - | input_val: '', | + | |
| - | counter: 0 | + | |
| - | } | + | |
| - | }, | + | |
| - | methods: { | + | |
| - | }, | + | |
| - | created: function () { | + | |
| - | axios.get('http://localhost:3000/bookmarks') | + | |
| - | .then(response => { | + | |
| - | this.bookmarks = response.data | + | |
| - | }) | + | |
| - | } | + | |
| - | } | + | |
| - | </code> | + | |
| - | ===== Other ===== | + | |
| - | ==== Axios ==== | + | |
| - | * https://alligator.io/vuejs/rest-api-axios/ | + | |
| - | <code> | + | |
| - | import axios from 'axios' | + | |
| - | export default { | + | |
| - | name: 'Bookmarks', | + | [[wiki2:vue:old]] |
| - | data () { | + | |
| - | return { | + | |
| - | msg: 'Welcome to Your Vue.js App', | + | |
| - | bookmarks: [], | + | |
| - | input_val: '', | + | |
| - | counter: 0 | + | |
| - | } | + | |
| - | }, | + | |
| - | methods: { | + | |
| - | }, | + | |
| - | created: function () { | + | |
| - | axios.get('http://localhost:3000/bookmarks') | + | |
| - | .then(response => { | + | |
| - | this.bookmarks = response.data | + | |
| - | }) | + | |
| - | } | + | |
| - | } | + | |
| - | </code> | + | |
wiki2/js_fw/vuejs2.1523655888.txt.gz · Última modificación: 2020/05/09 09:24 (editor externo)
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
