The vue text directive
1 - Basic vue text example
The basic idea of the vue text directive is that I just type v-text=\”mess\” in an element where mess is a value in my data object, or something that will evaluate to text that I want to be the inner text of an element. So for a very basic hello word style example of the vue text directive there is just having a simple one element template, and a value in a data object that I want to be the inner text of that element.
That is about it when it comes to the very basics, but there is more than one way to go about doing this, and not just with vuejs. Also the v-text directive is just for text nodes, it can not be used to set the text of element attributes for that another directive is needed such as the v-bind directive. However when it comes to this post at least I am mainly just going to be going over some other examples of updating text nodes, and maybe other things that might be touch of as such at least.
2 - Mustache syntax and expressions in templates
On top of the v-text directive there is also the mustache syntax in vuejs, this is also a way to go about setting the value for text content in an element of a template. When it comes to this mustache syntax A nested set of curly brackets is placed between the opening and closing tag of the element where I want text content to be. I can then pass a property name of the data object, or work out an expression consisting of strings, numbers, and methods that will then evaluate to the text content that I want.
3.1 - Using the $ref prop of a vue instance
One way to get a reference to a template element would be to use the ref attribute to tag an element in the template. Once that is one then a reference to the element can be obtained by the $refs instance property of a vue instance inside the body of a mounted life cycle hook for example.
3.2 - The $el prop of a vue instance
4 - HTML rather than plain text
4.1 - The html directive
The html directive is one way to go about making an html string part of a vue template. It works more or less the same way as the v-text directive only the value will be treaded as HTML rather than plain text.
5 - Conclusion
So that is it for now when it comes to the v-text directive as well as other alternatives when it comes to updating text content of elements in vuejs. I have been neglecting my content of vuejs for much to long, and in the coming days I intend to try to focus on this subject a little more when it comes to writing new vuejs content, as well as editing some of the older stuff I have wrote thus far.
The best way to get up to speed with vuejs, and get used to how to go about addressing some of the more less trivial aspects of the framework would be to just start working on some basic projects, or application examples using vuejs. I only have a few vuejs project examples posts, and I would like to see abound expanding that soon.