Menu
A beginner of vue.js and I followed this link: https://www.sitepoint.com/getting-started-with-vue-js/
Almost copy the code into my html.However it just not working.Can someone help me find what is going wrong?
Here are all the codes:
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js">
</script>
<script>
var myModel = {
name: "Ashley",
age: 24
};
var myViewModel = new Vue({
el: '#my_view',
data: myModel
});
</script>
<div id="my_view">
{{ name }}
</div>
</body>
</html>
The result is just:{{name}}
616
The simplest way to get started with Vue is to grab the development version script for it and add it to the head tag of your HTML file. Then you can start Vue code inside the HTML file inside of script tags. And have the Vue code connect up with an existing element on your HTML page.
Embedded Web ComponentsYou can use Vue to build standard Web Components that can be embedded in any HTML page, regardless of how they are rendered.
Vue. js is going popular day by day because it is very easy to integrate with other projects and libraries. It is very simple to install and use. Even beginners can understand it easily and start building their own user interfaces.
We can use querySelector to select an HTML element that returns the first element within the document that matches a specified selector. It can be used to set, obtain, modify, or delete properties of the selected element in Vue.
You need to add the <head> tag and add the script at the end of the file like this:
<html>
<head>
<title></title>
</head>
<body>
<div id="my_view">
{{ name }} {{ age }}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script>
var myModel = {
name: "Ashley",
age: 24
};
var myViewModel = new Vue({
el: '#my_view',
data: myModel
});
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
