Here is the vue object I create in main.js with a value : myName
import Vue from "vue";
const vm = Vue.createApp({
data () {
return {
myName: 'su'
}
}
});
vm.mount('#app');
and I'd like to show 'su' in index.html
here is html code
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
123
<div id="app">
name : {{ myName }}
</div>
<script type="module" src="/src/main.js">
</script>
</body>
</html>
and it does't work and show
name : {{ myName }}
Can anyone help pls thanks!
The reason it doesn't work is because you're never actually importing Vue. Checking your browser console would have shown you that Vue is undefined.
import Vue from "vue";
needs a build tool like webpack and will resolve the import against your node_modules folder.
Since you are directly importing Vue in a module right in your page, you need to import from a path available to the browser:
123
<div id="app">
name : {{ myName }}
</div>
<script type="module">
import * as Vue from 'https://unpkg.com/vue#3.0.11/dist/vue.esm-browser.js';
const vm = Vue.createApp({
data () {
return {
myName: 'su'
}
}
});
vm.mount('#app');
</script>
Related
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>
I'm developing a vue3 project.
main.js;
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
import store from "./store";
app.use(store);
import router from "./router/index";
app.use(router);
...
//just try...
app.mount("#app");
and my public/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
body {
margin: 0px;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
And my App.vue;
<template>
<button #click=openNewPage()>create new page</button>
<span>{{message}}</span>
<router-view />
</template>
<script>
methods:{
openNewPage(){
var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
}
}
</script>
my store object;
export default createStore({
state: {
message:'Hello'
}
});
and my second.html;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title></title>
</head>
<body>
<div id="appSecond" style="height:100%">
<template>
<span>{{message}}</span>
</template>
</div>
</body>
</html>
When I open the second screen with the OpenNewPage method, I cannot access both the store object and the components I want to use do not work. I was try it;
second.js
const app2 = createApp({
});
export { app2 };
and my method
import { app2 } from "../second.js";
openNewPage(){
var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
if (t) {
t.onload = function () {
t.window.app = app2;
app2.mount("#appSecond");
}
}
}
Somehow I try to run in second.html but I get a warning like "[Vue warn]: Failed to mount app: mount target selector". The code didn't work anyway. Can you help me?
openNewPage() can't run a script for the newly opened page; only the new page could run its own scripts. When openNewPage() tries app2.mount(), it's running that code on its own page (not the new one), leading to the error you observed.
Solution
Remove the mounting code from openNewPage() so that it only opens the new page:
export default {
openNewPage() {
window.open('second.html', …);
}
}
Update second.html to load the script that mounts the app, and remove the unnecessary <template> within the <div id="appSecond">:
<body>
<div id="appSecond" style="height:100%">
<span>{{message}}</span>
</div>
<script src="./second.js"></script>
</body>
In second.js, add the code that mounts your app:
// second.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#appSecond')
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>
In React v15 I can easily do the following:
<html>
<head>
<meta charset="UTF-8">
<title>React v15</title>
</head>
<body>
<div id="divContainer"></div>
<script src="https://unpkg.com/react#15.6.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.6.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.min.js"></script>
<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return <h2>Hello World !</h2>;
}
});
ReactDOM.render(<HelloWorld />
, document.getElementById('divContainer')
)
</script>
</body>
</html>
Once I reference react#16, react-dom#16 it no longer works, I understand that React.createClass() has been deprecated and removed. So what is its replacement?
I need a minimalist way of doing the same without a build process e.g. browserify, webpack, require, import, etc. I just want to reference libraries via a CDN or locally as I have shown in the example.
After you include React 16 libs you can access the React instance directly and extend React.Component
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>React Hello World</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/jsx">
class MyApp extends React.Component {
render() {
return <span>Hello world</span>;
}
}
ReactDOM.render(<MyApp />, document.getElementById('app'));
</script>
</body>
</html>