I have been learning VueJs through single file application at the first start.
It would consist in a single html page containing my javascript & CSS style within.
In order not to import the VueJs features from the web I have downloaded the Vue.JS file and linked it into the HTML file by inputing:
<head>
...
<script src="vue.js"
...
</head>
By doing this I was able to add a <script>...</script> into my HTML file, that consists in the JS code that would recognize Vue.
It worked just fine.
Now I want to split the code into their respective files:
HTML file
JS file
CSS file
Now I am confused to what should I import at the <head> section of my HTML file, as I need to import my file.js that contains my code + I will want to have my Vue.js file running so I don't need to import vue.js from the web.
What should I do?
I have tried the following but it did not work:
<head>
<title>First Vue playground</title>
<link rel="stylesheet" href="style.css">
<!-- Below is my JS code-->
<script src="appJS.js"></script>
<!-- below is my vue.js file so it runs Vue locally instead of importing it-->
<scrip src="vue.js"></scrip>
</head>
It's a basic question as it is my first time doing this.
Thanks to all in advance.
If you intend to use Vue in the file appJS.js, you will need to first import the vue.js before your file. here is how your files should look like :
App.js
window.onload = function () {
var app = new Vue({
el: '#app',
data: {
message: 'hello vue'
}
});
}
Index.html
<!DOCTYPE html>
<html>
<head>
<script src="./scripts/vue.js"></script>
<script src="./scripts/app.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>{{ message }}</p>
</div>
</body>
</html>
Related
Whenever I compile my C code with emcc main.c -o index.html emscripten generates an html file with their logo and some buttons and the console. But I don't want those. I only want the canvas where I can show my SDL rendered stuff.
I did a little bit of research and found this question in stack overflow. Apparently you have to enter emcc --shell-file and give it some template html as an argument.
So I made a template html file like so
<html>
<head>
<title>Some title</title>
</head>
<body>
</body>
</html>
But when I ran emcc main.c -o index.html --shell-file template.html it gave an error. Apparently emscripten looks for some think like - {{{ SCRIPT }}}.
So I added {{{ SCRIPT }}} inside my body. It compiled fine. But when I ran my index.html in localhost:3000 I got an error in the console which said cannot find addEventListener of undefined.
[N.B. I am running an SDL program. The one mentioned in their docs
What should I do? Thanks in advance
Here is a minimal example that you can use as your index.html, assuming your canvas code is in index.js:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<!-- Create the canvas that the C++ code will draw into -->
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<!-- Allow the C++ to access the canvas element -->
<script type='text/javascript'>
var Module = {
canvas: (function() { return document.getElementById('canvas'); })()
};
</script>
<!-- Add the javascript glue code (index.js) as generated by Emscripten -->
<script src="index.js"></script>
</body>
</html>
I'm using a CDN for VUEjs because I don't want to use webpack or render from the server.
index.html and test-component.vue are in the same folder
my index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>VUE</title>
<!-- vuejs -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>
</head>
<body>
<div id="app">
<!--HERE I WANT TO USE MY COMPONENT-->
<comp></comp>
</div>
<script>
//TRIED TO IMPORT MY COMPONENT
import comp from './test-component.vue';
const app = new Vue({
el: '#app',
});
</script>
</body>
</html>
my test-component.vue file:
<template>
<h1>im a component</h1>
</template>
<script>
console.log('testing component');
</script>
obviously .vue files are not natively supported by the browser
there are 2 possible solutions:
use a javascript bundler (like webpack or parcel)
use http-vue-loader
what I have done:
add a route with this HTML;
browser display a pure HTML page without the scripts and CSS being working;
I want to use a previous HTML page in nowadays vue project
<html>
<head>
<link href="...css"/>
</head>
<body>
<div></div>
<script src=""></script>
<script src=""></script>
</body>
</html>
route like this:
{path: "/example3", component: {template: Example3}},
I have a React JS file which renders the following:
React.render(
<TreeNode node={tree} />,
document.getElementById("tree")
);
I reference it from a HTML file in the following way:
<!doctype html>
<html lang="en">
<link rel="stylesheet" href="app/listTree/treenode.css">
<h3>It's <code>TreeNodes</code> all the way down</h3>
<p>Edit the <code>tree</code> variable to change the tree</p>
<div id="tree">
<script src="/listTree/TreeNode.js"></script>
</div>
</html>
However, the contents of the JS file are not displayed.
I don't have experience in working with JavaScript.
Why is this happening?
Your script is already selecting the tree div element. So, there is no need to put a script tag inside of the div tag.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="app/listTree/treenode.css">
</head>
<body>
<h3>It's <code>TreeNodes</code> all the way down</h3>
<p>Edit the <code>tree</code> variable to change the tree</p>
<div id="tree">
</div>
<script src="listTree/TreeNode.js" type="text/jsx"></script>
</body>
</html>
You are also missing the <head> and <body> html tags.
Further, if you want to render jsx in your React code, you need to add <script> tags for them as well (and type="text/jsx" as a tag attribute):
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="app/listTree/treenode.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<h3>It's <code>TreeNodes</code> all the way down</h3>
<p>Edit the <code>tree</code> variable to change the tree</p>
<div id="tree">
</div>
<script src="listTree/TreeNode.js" type="text/jsx"></script>
</body>
</html>
EDIT:
As a test to make sure your environment is working (and you don't just have a problem in your Component. Try to replace the code inside Treenode.js with this:
React.render(
<div>Testing...</div>,
document.getElementById("tree")
);
Then, you have no external dependencies. If you see Testing... rendered, you know that the environment is set up correctly.
Try to load your script after your div and not inside
<div id="tree">
</div>
<script src="/listTree/TreeNode.js"></script>
You need to load React also
Here is how I get it working add the following script
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
and change the type to 'text/babel'
<script type="text/babel" src="script.js"></script>
and the external js file should be with
.jsx
extension
please see working example here
You should not place a slash before "listTree".
So your script tag should look like this:
<script src="listTree/TreeNode.js"></script>
I am coding in ember.js have precompiled my Application.Handlebars file and it has resulted in a precompiled handlebars template.
Earlier when I was inserting the template in the Index.html page, all I had to do was write :
<script type="text/x-handlebars" data-template-name="whateverTemplate">
...
</script>
However, after I have precompiled my template, and I have included my template js file in the scripts section, I am not able to see the output in the screen. What am I doing wrong? How do you do this?
This is my index.html :
<!DOCTYPE html>
<html>
<head>
<title>Ember CRM Application</title>
</head>
<link rel="stylesheet" href="css/bootstrap.css"/>
<style>
.border{
border: 2px #666 solid;
border-radius: 10px;
}
</style>
<body>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/md5.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.4.0.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/libs/moment.min.js"></script>
<script src="js/crm.js"></script>
<!--Templates-->
<script src="js/templates/application.handlebars.js"></script>
<!-- to activate the test runner, add the "?test" query string parameter -->
<script src="tests/runner.js"></script>
</body>
</html>
And in the application.handlebars :
<h1>This is my template</h1>
This is my crm.js :
App = Ember.Application.create();
I don't want to insert a view, I directly want to insert the template. Please guide me.
I was having the same problem, you see if you use the Handlebars Precompilation, then it would not work. You need to use the Ember-Handlebars-Precompile.
Here is the npm link : https://github.com/gabrielgrant/node-ember-precompile
You can install it using : npm install -g node-ember-precompile
After that, you just need to compile it using the Ember Precompiler and it would add anything that is necessary for it to work with Ember. Now you just need to follow the same thing that you are doing. It should work for you.