Ah thank you very much.
What i want is something like TodoMVC but using HTML generated by Phoenix. Using Jquery i can use append to insert an element, but i don’t know how to do it using Vuejs.
herdibintang
0
acrolink
The site you mentioned already have such a thing written in VueJS.. There should be an object holding all the todos with a for each like rendering for every todo (e.g. li). You append new todo to the todos object and that’s it. Or post a new todo to the back-end and refresh the list by a subsequent api call (to index action).
VueJS supports also Server side rendering, yet I have not tried it yet.
0
herdibintang
But the HTML file is already written using Vuejs syntax in the first place. What i want is manipulate HTML file generated by Phoenix. Just like when you can manipulate it with Jquery but this time with Vuejs.
I’m sorry but what is the relation between the one i want to Server side rendering?
0
acrolink
You can do that. You can manipulate any html file with VueJS without using the template tag. Look at this: https://jsfiddle.net/pu8pp62v/3/
0
amnu3387
I think Vue works in a different way than what you’re trying to do, you define “templates” and “components” and vue only interacts with the contents of these components, it has no knowledge of the external or involving html, beyond the root mounting element.
If you just intend to bind a “value” you get from your controller into a vue component, then you can do something like this: https://jsfiddle.net/keL13yzk/1/
(you’ll probably need to render the value raw so it doesn’t get escaped by phoenix)
So that the “list” is started with the values you got from the controller.
You’ll still need to create your template interactions and so on in vue to have the interactivity, so you’ll need to extend that a bit more.
1
peerreynders
What do you find so compelling about this particular approach?
- You have to maintain two distinct implementations of how a list item is rendered that have to be kept in sync, one with EEx on the server side, another with jQuery in the browser.
- The jQuery functionality still only works if the JavaScript is enabled in the browser and jQuery appended elements are still “JavaScript rendered”.
- Because jQuery manipulates the browser’s DOM directly you have to carefully consider the approach you take when you manipulate the DOM - some approaches are quick and clean, while others are sluggish and glitchy. With Vue.js it’s VDOM’s job to figure out the best way to update the DOM so it’s one less thing to worry about.
Now if it’s progressive enhancement you’re after then it’s possible to delivery base HTML to the browser and have Vue.js components replace it if JavaScript is enabled. Unfortunately that would still mean that you have two ways of doing the same thing. Note that progressive enhancement is different from a progressive web app.
I personally like Vue.js 2 Single File Components - the markup and the code that manipulates it are in the same place (whether the styles belong there is a separate issue), keeping it nicely compartmentalized. Code organization and compartmentalization takes a lot more discipline in jQuery based projects; unfortunately in many cases things are often not as well separated (and therefore decoupled) as they should be.
0
herdibintang
Yeah but you can’t do this if the html file is generated by Phoenix right?
You’re right.
I read some articles that suggests to learn Vuejs after learning Jquery. Because of that i thought you can do things in Vuejs the same way you can do things in Jquery.[quote=“peerreynders, post:17, topic:9185”]
What do you find so compelling about this particular approach?
[/quote]
Hello. Thank you your reply is rich of references!
I just want to add interactivity to Phoenix. But splitting Vuejs and Phoenix (as API server) will do a lot of work.
0
acrolink
If you have experience with JS frameworks like Angular or React and if you have some general programming experience, believe me it will not take you more than 3 days to learn it all and create super interactive application with Phoenix in the back-end and VueJS on the front-end. 3 week ago I didn’t even know about VueJS at all 
0
peerreynders
You may be underestimating the work of the jQuery version. After you append that item to the list in the browser you still have to make an AJAX call to insert that item into the database. So most likely you are going to be building an API anyway. So in fact a separate Vue.js frontend with a Phoenix API could be a much cleaner solution.
I think the idea that was being conveyed is that Vue.js can be gradually introduced into an existing web site that already used jQuery - i.e. it isn’t necessary to switch to Vue.js all at once.
Have you had a look at Vue.js vs jQuery: Use Cases and Comparison with Examples yet?
Some other articles:
A Vue.js introduction for people who know just enough jQuery to get by
Vue.js Tutorial: From jQuery to Vue.js
Guide to Vue.js for jQuery developers
0
herdibintang
Didn’t you need to learn about routing and state management too? Did 3 days enough?
Ah sorry what i mean is when i add item to the list it doesn’t immediately saved to database. You can add 2 or more items to the list and then save to database in a single request.[quote=“peerreynders, post:22, topic:9185”]
I think the idea that was being conveyed is that Vue.js can be gradually introduced into an existing web site that already used jQuery - i.e. it isn’t necessary to switch to Vue.js all at once.
[/quote]
Yeah i misunderstood this part. Thank you for clearing it.[quote=“peerreynders, post:22, topic:9185”]
Have you had a look at Vue.js vs jQuery: Use Cases and Comparison with Examples yet?
[/quote]
Thank you. You give me a lots of good articles.
1