User:Saul/vue

This is the page for my notes related to Vue.js

Vue

Component Properties

data

The data property contains data that your component needs to access. The data property should be a function that returns an object - this so each component has individual data rather that changing all components at once.

export default {
	data () {
		return {
			pageId: this.$router.params.id,
			someVarible: "test",
			someOtherVarible: 123
		};
	}
};

props

The props property contains data that is handed down from the parent component or router.

export default {
	props: {
		someVarible: {
			required: true,
			type: String
		}
	}
};

methods

The methods property contains functions that modify the state of the component and will have side effects.

export default {
	methods: {
		someMethod () {
			// do something that has some side effects
			return "Result";
		}
	}
};

computed

The computed property contains functions that compute a result but has no other side effects.

export default {
	data(){
		return {
			search: '',
			items: words
		}
	},
	computed: {
		filteredItems () {
			return this.items.filter(item => {
				return item.toLowerCase().search(this.search) > -1;
			}).sort();
		}
	}
};

watch

The watch property contains watches - functions that execute when a varible changes.

export default {
	data(){
		return {
			someVarToWatch: "test"
		}
	},
	watch: {
		someVarToWatch: (val) => {
			Store.dispatch("setSomeVarToWatch", someVarToWatch);
			// run some method to update the page to reflect the change
		}
	}
};

created

The created property is a function that gets executed when the component is created - it is used to prepare the component.

export default {
	data(){
		return {
			image: new Image()
		}
	},
	created(){
		this.image.src = "image.jpg";

		this.image.onload = () => {
			document.getElementById("image").src = this.image.src;
		};
	}
};

= Vue Router =
== Router Links ==
Router links can be used much like the usual a elements:
<source lang="html">
<a href="/somePage">link</a>
<router-link :to="/somePage">link</router-link>

Or you can specify the router route name and params like so:

<router-link :to="{name: 'Page', params: { id: 123 }}">
	link
</router-link>

Where router routes contains something like:

{
	path: "/page/:id",
	name: "Page",
	component: componentName,
	props: true
}

History Mode

To set the router to html5 history mode you need to specify the mode parameter in your router.js file like so:

export default new Router({
	routes: [
		{
			path: "/",
			name: "Home",
			component: Home
		}
	],
	mode: "history"
});

Vue Config

Aliases

By default vue has an alias "@" to reference the src folder in the project

import Home from "@/pages/home";

You can add your own custom aliases by editing the build/webpack.base.config.js file like so:

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    'pages': resolve('src/pages')
  }
},

and you can use it like so:

import Home from "pages/home";