Some notes taken while learning vue.
to start using vue can include this file.
<script src=”https://unpkg.com/vue”></script>
Vue object
- el: “#id – define the element
- data – define data
- methods – define method/functions
Vue Directives
- v-bind – can bind to any attribute in element. e.g. class, title, type, style, href
- v-bind is use to control the html element attribute where “moustache {{ }}” cannot be used
- example <div v-bind:class=“{ active: isActive }”></div>
- v-if=”status”
- v-for=“item in items” – normally use with <li> elements
- v-on – example <button v-on:click=”callAFunction”>click me</button>
- v-model (2 way data binding). example <input v-model=“message”>. message can be displayed as {{ message }} and can be data inside vue script
- guide/tutorial on directive
- full list of directives
Vue Components
Vue.component (‘name’, {
})
- first argument – name of the component
- props
- template