VueJs Tutorials
- VueJs
- VueJs Instance
- Templates
- Component
- Computed Properties
- Watch Property
- Binding
- Events
- Rendering
- Directives
- Mixins
- Reactive Interface
- String Length
- Onchange Events
- Ternery Operator
- Global variable
- Get data attribute value
- String to array
- How to Get Array Length
- call a function on Page load
- current Date and Time
- Replace String
- Open link on new tab
- setTimeout in Vue JS
- object or array empty or not
- get element by id
- Laravel Vue Flash Message
Vue templates
Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system.
Example
Text :
The most basic form of data binding is text interpolation using the double curly braces. {{ }} "mustache"
File name : index.php
Message: {{ msg }}
The mustache tag will be replaced with the value of the msg property on the corresponding data object. It will also be updated whenever the data object’s msg property changes.
Raw HTML
The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive:
File name : index.php
File name : index.php
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js
"></script>
</head>
<body>
<div id = "stud">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div v-html = "htmlcontent"></div>
</div>
<script>
var vm = new Vue({
el: '#stud',
data: {
firstname : "mahtab",
lastname : "NB",
htmlcontent : "<div><h1>Vue Js Template Example!</h1></div>"
}
})
</script>
</body>
</html>
V-Bind
To assign any attribute to HMTL tag, we need to use v-bind directive.
File name : index.php
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js
"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div v-html = "htmlcontent"></div>
<img v-bind:src = "imgsrc" width = "300" height = "250" />
</div>
<script>
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
htmlcontent : "<div><h1>Vue Js Template</h1></div>",
imgsrc : "images/computer_test.png"
}
})
</script>
</body>
</html>
File name : index.php
File name : index.php