I'm moving my very first steps into VueJS but I'm already stuck.
I'm simply trying to display a variable, but even if the syntax look correct to me, I get
{{product}}
displayed instead of the actual product name. Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{product}}</h1>
</div>
<!-- Import App -->
<script src="./main.js"></script>
<!-- Mount App -->
<script>
const mountedApp = app.mount("#app");
</script>
</body>
</html>
And here's the JS:
const app = Vue.createApp({
data() {
return {
product: "socks",
};
},
});
Thank you!
You should use the CDN of version 3 since the syntax of Vue 3 :
<script src="https://unpkg.com/vue#3"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
<script src="https://unpkg.com/vue#3"></script>
</head>
<body>
<div id="app">
<h1>{{product}}</h1>
</div>
<!-- Import App -->
<script>
const app = Vue.createApp({
data() {
return {
product: "socks",
};
},
});
</script>
<!-- Mount App -->
<script>
const mountedApp = app.mount("#app");
</script>
</body>
</html>
Related
decided to make react project for the first time, noticed that it's not working, css is good, but not react code, checked a lot tutorials but haven't found any solution:(
P.s this is my first time using react,therefore sorry guys and thanks for feedback
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="restaurant"></div>
<script src="js.js" type="text/babel"></script>
</body>
</html>
js.js:
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
ReactDOM.render(<App />, document.getElementById("restaurant"))
ReactDOM.render(<h1>hiii</h1>, document.getElementById("restaurant"))
App.js:
import React from "react"
import Header from 'header'
export default function App() {
return(
<Header />
)
}
Header.js :
import React from 'react'
export default function Header(){
return (
<div className='container'>
<div className='head-part'>
<h1>HopeLake</h1>
<div className='icons'>
<span>i1</span>
<span>i2</span>
<span>i3</span>
</div>
<div className='list-pages'>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>MENU</li>
<li>ORDER</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
)
}
Here is my example to use React.JS by CDN.
No need to export default but need to import file in index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- Import new component before use here!!! -->
<script type="text/babel" src="./App.js"></script>
<script type="text/babel" src="./Header.js"></script>
<script type="text/babel" src="./index.js"></script>
</body>
</html>
App.js
const App = () => {
return <Header/>
}
Header.js
const Header = () => {
return <div>This is my header</div>
}
index.js
const container = document.querySelector("#root");
const root = ReactDOM.createRoot(container);
root.render(<App />);
Hope this will help you...
Hi I am currently learning Vue.js and I have an issue with it, I am calling Vue using a CDN.
I have followed instructions but it does not seem to be recognising that Vue exists.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#3"></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{coarseGoal}}</p>
</section>
</body>
</html>
This is the simple js file It does not output the code from the Vue object.
Would really appreciate any help on this.
const app = vue.createApp({
data () {
return {
coarseGoal: 'This is the best',
};
}
});
app.mount('#user-goal');
It should be Vue.createApp instead of vue.createApp.
Working Fiddle
const app = Vue.createApp({
data() {
return {
coarseGoal: 'This is the best',
};
}
});
app.mount('#user-goal');
<title>Vue Basics</title>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#3"></script>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{coarseGoal}}</p>
</section>
</body>
VScode is not importing my main.js file. I don't understand what I am doing wrong either. The index.html is right next to the main.js but it is not able to find it. I have imported many js files into html before so why is it breaking on me now? Does anyone have any idea's?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
<div id="app">
<h1>{{ product }}</h1>
</div>
<!-- Import Js -->
<script src="./main.js"></script>
<!--Mount App-->
<script>
const mountedApp = app.mount;
</script>
</body>
</html>
Here is the js file, I am not able to use it because it's not connecting to the html so there is it is just spiting out how Vue is not defined.
const app = Vue.createApp({
data() {
return{
product: 'Socks'
}
}
})
And the directory looks like this
Intro-to-Vue
-Assest
-Images
Socks.png
Index.html
main.js
Any help would be awesome. Thanks
You're using the vue 3 syntax with vue 2 CDN script :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
<div id="app">
<h1>{{ product }}</h1>
</div>
<!-- Import Js -->
<script src="./main.js"></script>
</body>
</html>
and main.js like :
new Vue({
el: '#app',
data() {
return {
product: 'Socks'
}
}
})
Why is my Vue and index.js import not working?
In my live server the text just shows up as {{ message }}
the html and js files are located in the same directory
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>Pomodoro Timer</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
<!-- Javascript -->
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
I am working on building some pages in polymer to use in android web view.
demo code below
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
</head>
<body>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="trail-app">
<template>
<style>
</style>
<div id="content"></div>
</template>
<script>
Polymer({
is: "trail-app",
loadDataOne:function(data){
document.getElementById("content").innerHTML = data;
},
});
</script>
<script type="text/javascript">
function loadDataTwo(data) {
document.getElementById("content").innerHTML = data;
}
</script>
</dom-module>
<trail-app></trail-app>
</body>
</html>
So my problem here is if the function loadDataTwo is called like this myWebView.loadUrl("javascript:loadDataTwo('Hello World!')"); it is working fine.
But if the function loadDataOne is called same way its not working.How to resolve.
I tried myWebView.loadUrl("javascript:var temp = document.querySelector('trail-app');temp.loadDataOne('Hello World!')"); it worked fine.