vue@1.0.28.md

   1 ---
   2 title: Vue.js v1.0.28
   3 category: JavaScript
   4 layout: 2017/sheet
   5 deprecated: true
   6 weight: -10
   7 intro: |
   8   **Deprecated:** this guide targets an old version of Vuej.js (v1.0.28). See the [updated Vue.js cheatsheet](vue) for new versions.
   9 ---
  10
  11 {% raw %}
  12
  13 ### Lists
  14
  15 ```html
  16 <li v-for="todo in todos">
  17   {{ todo.text }}
  18   {{ $index }}
  19 </li>
  20 ```
  21
  22 ### Events
  23
  24 ```html
  25 <button v-on:click='submit'>Go</button>
  26 ```
  27
  28 ### Components
  29
  30 ```js
  31 new Vue({
  32   components: { app: App }
  33 })
  34 ```
  35
  36 ## API
  37
  38 ```js
  39 Vue.extend({ ... })        // creating components
  40 Vue.nextTick(() => {...})
  41
  42 Vue.set(object, key, val)  // reactive
  43 Vue.delete(object, key)
  44
  45 Vue.directive('my-dir', { bind, update, unbind })
  46 // <div v-my-dir='...'></div>
  47
  48 Vue.elementDirective('my-dir', { bind, update, unbind })
  49 // <my-dir>...</my-dir>
  50
  51 Vue.component('my-component', Vue.extend({ .. }))
  52
  53 Vue.partial('my-partial', '<div>hi {{msg}}</div>')
  54 // <partial name='my-partial'></partial>
  55 ```
  56
  57 ```js
  58 new Vue({
  59   data: { ... }
  60   props: ['size'],
  61   props: { size: Number },
  62   computed: { fullname() { return this.name + ' ' + this.lastName } },
  63   methods: { go() { ... } },
  64   watch: { a (val, oldVal) { ... } },
  65   el: '#foo',
  66   template: '...',
  67   replace: true, // replace element (default true)
  68
  69   // lifecycle
  70   created () {},
  71   beforeCompile () {},
  72   compiled () {},
  73   ready () {}, // $el is inserted for the first time
  74   attached () {},
  75   detached () {},
  76   beforeDestroy () {},
  77   destroyed () {},
  78
  79   // options
  80   directives: {},
  81   elementDirectives: {},
  82   filters: {},
  83   components: {},
  84   transitions: {},
  85   partials: {}
  86 })
  87 ```
  88
  89 ## Vue templates
  90 Via [vueify](https://www.npmjs.com/package/vueify)
  91
  92 ```js
  93 // app.vue
  94 <template>
  95   <h1 class="red">{{msg}}</h1>
  96 </template>
  97
  98 <script>
  99   module.exports = {
 100     data () {
 101       return {
 102         msg: 'Hello world!'
 103       }
 104     }
 105   }
 106 </script>
 107 ```
 108
 109 Also
 110
 111 ```html
 112 <template lang='jade'>
 113 h1(class='red') {{msg}}
 114 </template>
 115 ```
 116
 117 {% endraw %}