does anyone know how i would use vue3-sfc-loader, which lets me use vue without build tools, while still being able to use scss styling?
The following example is taken from here:
Index.html
<!DOCTYPE html>
<html>
<head>
<script type="importmap">
{
"imports": {
"vue": "https://jspm.dev/vue/dist/vue.js"
}
}
</script>
</head>
<body style=margin:0>
<div id="container"></div>
<script type="module">
import Vue from 'vue';
container.innerHTML = '<p>{{ message }}</p>';
new Vue({
el: '#container',
data() {
return {
message: 'Hello Vue.js!'
}
}
});
</script>
</body>
</html>
myComponent.vue
<template>
<span class="example">{{ msg }}</span>
</template>
<script>
export default {
data () {
return {
msg: 'world!',
color: 'blue',
}
}
}
</script>
<style scoped>
.example {
color: v-bind('color');
}
</style>
I want to use this for a small project. Thank you very much in advance!
Related
I have 3 files.
Connections.js
Main.html.
ScriptFile.js
I am copying only small part of the code here.
Connection.js has a class
import {net} from 'net';
export class connect {
Testfunction() {return "something"}
}
main.html has a function
<html>
<head>
<script src= 'Connections.js'></script>
<script src= 'ScriptFile.js'></script>
</head>
<body>
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
</body>
</html>
ScriptFile.js
import { connect } from "./Connections.js";
const ObjConnect = new connect()
function myFunction() {
document.getElementById("demo").innerHTML = ObjConnect.Testfunction();
}
How do I make "text" in my html file to change to "something" when I click on it?
First you have a typo at file name.
It's Connection, not Connections in main.js
Case1. using module
main.html
<html>
<head>
<script type="module" src="Connection.js"></script>
<script type="module" src="ScriptFile.js"></script>
</head>
<body>
<p id="demo">Click me to change my text color.</p>
</body>
</html>
ScriptFile.js
import { connect } from './Connection.js';
const ObjConnect = new connect();
function myFunction() {
document.getElementById('demo').innerHTML = ObjConnect.Testfunction();
}
document.getElementById('demo').addEventListener('click', myFunction);
Case2. using script
main.html
<html>
<head>
<script src="Connection.js"></script>
<script src="ScriptFile.js"></script>
</head>
<body>
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
</body>
</html>
Connection.js
class connect {
Testfunction() {
return 'something';
}
}
ScripFile.js
const ObjConnect = new connect();
function myFunction() {
document.getElementById('demo').innerHTML = ObjConnect.Testfunction();
}
when i try to export a variable in my HTML file and import in my main.js file it it throws an error:
SyntaxError: Unexpected token '<' that refeers to the <!DOCTYPE html> at the start of my index.html and i don't know why require doesn't grab the script with the module tag?
I just want the variable to show up in the main.js
I tried it with global.foo but that didn't work either
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Minecraft Launcher</title>
<link href="https://fonts.googleapis.com/css2?family=Open Sans" rel="stylesheet">
<style>
body {
background-color: rgb(0, 0, 0);
background-position: center;
color: white;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<input type="button" value="Try me" id="startbutton">
<input type="text" name="input" id="input">
<script>
require('./renderer.js')
</script>
<script type="module">
module.exports.foo = 5;
</script>
</body>
</html>
main.js:
const { app, BrowserWindow } = require('electron')
// Variables
let startbutton;
app.on('ready', () => {
createWindow();
})
function startvariables() {
console.log("jup")
startbutton = window.document.getElementById("input")
console.log(startbutton.value)
}
function createWindow() {
var mainWindow = new BrowserWindow({
width: 950,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadFile('./index.html')
mainWindow.webContents.openDevTools()
}
setInterval(() => {
var foo1 = require('./index.html')
console.log(foo1)
}, 200)
That will definitely not work: node and electron's implementations of require expect a JS file, whether from the main or a renderer process. It is unable to extract the content of a <script> tag within an HTML file.
It looks like you may be trying to communicate some data from your renderer to your main process: electron offers IPC system for this very purpose.
I am trying to use an image hover effect library in React. Here is the library. The library uses Three.js and GSAP to animate images. I've built a small example project with this library in a vanilla JS file.
I was able to build it easily like this. Here is my HTML file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./styles.css"/>
<title></title>
</head>
<body>
<div class="container">
<div class="distortion">
</div>
<div class="distortion2">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha256-lPE3wjN2a7ABWHbGz7+MKBJaykyzqCbU96BJWjio86U=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js" integrity="sha256-3mBEX8I0uMLF7+AUjJeTCelosuorzYpqwBMBPDTyQqY=" crossorigin="anonymous"></script>
<script src="./hover.js"></script>
<script src="./app.js"></script>
</body>
</html>
And here is my JS file:
new hoverEffect({
parent: document.querySelector(".distortion"),
intensity: 1,
image1: "./images/kaapo.jpg",
image2: "./images/kakko-rangers.jpg",
displacementImage: "./images/ladyliberty3.png"
});
new hoverEffect({
parent: document.querySelector(".distortion2"),
intensity: 1,
image1: "./images/jack.jpg",
image2: "./images/hughes-card.jpg",
displacementImage: "./images/devils-40.png"
});
Everything works, but now I'm trying to do something similar in a React project and I'm having trouble using this library in React.
Here is what I've tried:
import React, { Component } from 'react';
import hoverEffect from 'hover-effect';
import kakko from '../assets/kaapo.jpg';
import {kakkoRangers} from '../assets/kakko-rangers.jpg';
import {ladyLiberty} from '../assets/ladyliberty3.png';
import styled, { css } from 'styled-components';
const STYLES = styled.div`
height: 100vh;
width: 100%;
.my-div {
height: 20em;
width: 30em;
}
`;
class Test extends Component {
constructor(props) {
super(props);
this.state = {
}
}
componentDidMount = () => {
}
render() {
const animation = new hoverEffect({
parent: document.querySelector('.my-div'),
intensity: 0.3,
image1: {kakko},
image2: {kakkoRangers},
displacementImage: {ladyLiberty}
});
return (
<STYLES>
<div>
<h1>Test</h1>
<div className="my-div">
</div>
</div>
</STYLES>
);
}
}
export default Test;
I don't think document.querySelector('.my-div') is working in my animation variable. Do querySelectors not work in React? How can I properly select the div?
How could I implement this in React? I tried nesting the animation variable in componentDidMount but that didn't work either.
Usually when you want to directly access DOM elements in React you use the ref keyword:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}
More at the React documentation.
I'm starting with Polymer 3 and I'm facing an issue I cannot solv.
I have a custom element which will show a play card; its only property is an object with its suit and number. The element is more or less like this:
import {html, PolymerElement} from '#polymer/polymer/polymer-element.js';
class CardElement extends PolymerElement {
static get template() {
return html`
<style>
:host {
display: block;
}
</style>
`;
}
static get properties() {
return {
card: {
type: Object,
value: () => {
return {
suit: 'hearts',
figure: 'king'
}
}
},
};
}
ready() {
super.ready();
console.log(this.card.figure);
}
}
window.customElements.define('card-element', CardElement);
Next I want to check that every thing is working with and HTML file.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>card-element demo</title>
<script src="../node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module">
import '#polymer/iron-demo-helpers/demo-pages-shared-styles';
import '#polymer/iron-demo-helpers/demo-snippet';
</script>
<script type="module" src="../card-element.js"></script>
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
</style>
</custom-style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic card-element demo</h3>
<demo-snippet>
<template>
<card-element card='{"suit" "hearts", "figure" "1"}'></card-element>
</template>
</demo-snippet>
</div>
</body>
</html>
Console.log in ready method shows that data is binded but, whenever I try to pass a json data returned from a function, the console.log show "undefined".
<body>
<div class="vertical-section-container centered">
<h3>Basic card-element demo</h3>
<demo-snippet>
<template>
<card-element card="{{_getCard}}"></card-element>
</template>
</demo-snippet>
</div>
<script>
function _getCard() {
return JSON.stringify({
"suit": "clubs",
"figure":"1"
});
}
</script>
</body>
I checked loading data returned into a variable and binding the variable to the custom element but still didn't work.
How should I pass the data to the custom element?
Thanks for your answers.
Try this:
<script>
function _getCard() {
let data = {
"suit": "clubs",
"figure":"1"
};
return data;
}
</script>
Recently, i have been writing a single page app using backbone. When i try to create a animation like throwing a card but i can't use jquery to do this. I found that after backbone view call this render(). I try to select DOM element by jquery and modify it. It didn't change anything? Does anybody know this?
<!DOCTYPE html>
<head>
<style type="text/css">
#logo {
position: relative;
}
</style>
</head>
<body>
<div id="container"></div>
<script id="template" type="text/template">
<image id="card" src='10.png'/>
<br/>
<input type="button" id="btn" value="di chuyển"/>
</script>
<script src="move.js"></script>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="app.js"></script>
</body>
</html>
(function($){
var aniView = Backbone.View.extend({
template: _.template($('#template').html()),
events:{
"mouseover input[type=button]":"moveCard"
},
moveCard:function () {
alert('di chuyển');
move('#card')
.add('margin-left', 100)
.end();
},
render:function () {
$('#container').html(this.template());
}
});
var a = new aniView();
a.render();
})(jQuery);
Thanks!