Vue.hx

Tutorials

Follow these instructions from the original Vue.js website: https://vuejs.org/v2/guide/

The walk you through the basics from Vue.js, that why there is no styling (focus on the code!).. :D

Then some tutorials from: http://tutorialzine.com/2016/03/5-practical-examples-for-learning-vue-js/

More complex example showing the power of Vue.js, and doing that with style :P

The next examples show the vue-router:

Vue-resource assets loader example

More complex templating with vue-resource assets loader:

Another router example:

Keep in mind that the tutorial is written in an older version of vue-router so it’s a little rewritten (https://vuejs.org/v2/guide/migration-vue-router.html)

(1)

Use @:expose to make sure you can use the console instructions And public static var to make sure you have access.

The only difference is you start console command with Main.

Difference

We try to stay as close a possible to the original lib, but their are some differences I will explain here.

Context / namespace

In Vue.js, the this keyword has a different context and properties in callbacks like methods

In vue this points to the vm instance

var vm = new Vue({
  el: "#app-5",
  data: {
    message: "Hello Vue.js!",
  },
  methods: {
    reverseMessage: function () {
      // this.message
      console.log(this.message);
    },
  },
});

That will not work in Haxe, because it has a different context. We need to have the code transpiled to this.xxx. There are currently 3 ways to do this:

var vm = new Vue({
	el: '#app-5',
	data: {
		message: 'Hello Vue.js!'
	},
	methods: {
		reverseMessage: function ()
			// this.message
			trace(untyped this.message);
			trace(untyped __js__('this.message'));
			trace(js.Lib.nativeThis.message);
		}
	}
});

CheatSheet / copy_paste

Most of the time you can just copy paste JS into Haxe documents… And sometimes you need to make a little adjustmen. Check out this document: copy&paste

But here are the stuff I ran into with these examples:

Date

Most copy&paste stuff is easy fixed, so it this one. But this is a different language decision

In Haxe you will create a date with new Date(year, month, day, hour, min, sec) In JS it will return the current date

new Date();

So use this in Haxe

Date.now();

Shorthand

The short-hand van Vue doesn’t work… Something like this is possible in Vue, but not in Haxe

var router = new VueRouter({
  routes, // short for routes: routes
});

To fix this just don’t use the shorthand

var router = new VueRouter({
	routes:routes
});

const

Constants are block-scoped, much like variables defined using the let statement. The value of a constant cannot change through re-assignment, and it can’t be redeclared.

Just changed to var because Haxe is a strictly typed language we don’t have that problem.

Which brings us to the variable name with all caps or starting with a Capital letter… not necessary but it will work.

const User = {
  template: "<div>User</div>",
};

You can use the var name User with a cap, but in this case but nicer would be user

var user = {
  template: '<div>User</div>'
}

' vs " and $

Haxe lets you have variables in string with $, but only with single quotes!

var temp = 3;
trace('$temp'); // 3
trace("$temp"); // $temp

Vue uses it for a different reason.

const Bar = {
  template: "<div>This is Bar </div>",
};

But because its done in a single quote string Haxe will expect a variable name route. To fix this one just use double quotes

var bar = {
	template: "<div>This is Bar </div>"
};

Or change $ into $$ (which escapes it)

var bar = {
  template: "<div>This is Bar </div>",
};

;

Okay …. Stupid but JavaScript is more flexible with this. Just follow the instructions from the Haxe compiler.