I have been playing around with Vue Js a bit and want to create a dummy Java EE Web application using it on the front end inside of Eclipse. From what I can discern, Vue single file components are compiled into a single JavaScript file using some build engine like Webpack et alia. I don't want to do that right now. So I've tried to create JavaScript files that emulate .vue files. But for some reason, Vue directives are being stripped out of the generated HTML. Here's illustrative code:
/** vuetest.js
* Javascript file that emulates a .vue file, to facilitate easy prototyping within an
* Eclipse Dynamic Web Application without having to compile single file Vue components
* outside of the IDE.
*/
var appTemplate = `
<div style="width:100%">
<div class="div-style"><a v-on:click ="alert('Working...');">Test</a></div>
<div class="div-style-two"><a onclick ="alert('Working...');">Test 2</a></div>
</div>
`;
var style = `<style type='text/css'>
.div-style {
float:left;
width: 50%;
background-color: orange;
}
.div-style-two {
float:right;
width: 50%;
background-color: blue;
}
</style>`;
$(style).appendTo("head");
Vue.component('app-content', {
template: appTemplate
});
var app = new Vue({
el: '#app'
});
And:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Vue Directives Test</title>
<script src="lib/vue.js"></script>
<script src="lib/jquery-3.3.1.js"></script>
</head>
<body>
<div id="app">
<app-content></app-content>
</div>
<script src="js/vuetest.js"></script>
</body>
</html>
All works fine except the v-on directive; it is stripped out of the compiled template. What am I missing?
Thanks in advance for the help!
Why the v-on is not there
The v-on directive; it is stripped out of the compiled template. What am I missing?
Vue.js removes all directive attributes after compiling them, so you rendered markup is clean and tidy. (source)
So, the v-on is just not in the HTML, but it was taken into account.
Making it work
In your case, you will also get an error like:
VM5894 vue.js:584 [Vue warn]: Property or method "alert" is not
defined on the instance but referenced during render. Make sure that
this property is reactive, either in the data option, or for
class-based components, by initializing the property. See:
https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <AppContent>
<Root>
VM5906:2 Uncaught TypeError: alert is not a function
This happens because Vue will expect the alert to be a method on the component. Try adding methods: { alert: alert.bind(window) } to your component declaration:
Vue.component('app-content', {
template: appTemplate,
methods: { alert: alert.bind(window) }
});
The code above will make the component's alert() method be the window.alert() method.
Check here a plunker demo of this code.
Related
i'm integrating Vue into a website, however when I use a component it's styles are added just before the closing </body> tag, which is not ideal, as I need to add styles below these to over-ride colors etc, this is per client of course.
Is there a way I can add an id to my client styles, and have my component styles appended above here?
So at my document needs to look like so:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Vue Styles -->
<style type="text/css">
</style>
<!-- END Vue Styles -->
<!-- Client Styles -->
<style type="text/css">
</style>
<!-- END Client Styles -->
</head>
<body>
</body>
</html>
I don't think you can order the way styles are included. But there are a couple of things you can do.
If you add styles via import in App.js they will be added first.
You can use !important to your css definitions. Ofc this will only work if the initial definitions don't already have !important set.
I have yet to try it out, but it seems that CSS Extraction provided by the vue-loader Webpack loader allows extracting the css to an external bundle. Once you have that, you can include it wherever you want on your webpage.
I don't know your application structure but in Vue you can add style for each component in that corresponding component.
TestComponent.vue
<template src='./Test.html'>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
Just paid for a commercial licence and trying to follow the docs but can't get the animation to work
I am using Laravel 5.4 and Vue 2
<head>
<link rel="stylesheet" href="/css/animate.min.css" />
</head>
<body>
<div id="app">
#yield('content')
</div>
<script src="/js/app.js"></script> // vue file
<script src="/js/wow.js"></script>
<script>
var wow = new WOW();
wow.init();
console.log(wow); // works fine
</script>
</body>
// content
#extends('layouts.app')
#section('content')
<div class="wow slideInLeft"> // not working
<p>Test</p> // not working when applied here either
</div>
#stop
Where am I going wrong?
update, wow is being applied to my Vue components but not native html tags.
it seems that style="visibility: hidden;" is not being overwritten.
// Vue component with working wow animation
// this component is on the same page where I want to apply wow to native html
<template name="test">
<p class="wow bounceIn>Test</p> // works
</template>
wow.js happens on page load and not on scroll
I was applying height and width constraints with CSS
Removing these made it work
I am new to javascript and dojo, and am trying to write code to navigate to
another URL dynamically. This seems easy to do with javascript, but I can't
get it to work with dojo/on.
Here is my example code. The trivial callback works fine. The dojo/on callback
invokes the callback, but the new page never appears. I have to do this
dynamically and with dojo because, well just because my project requires it.
Anyone know why this is failing and how to make it work?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js">
</script>
<script type="text/javascript">
callback = function() {
window.location.href = "about:blank";
console.debug("callback invoked");
}
function init() {
var node = dojo.byId("test");
var childNode = dojo.create("a", { href : "" }, node);
childNode.innerText = "dojo callback click here";
require(["dojo/on"], function(on){
on(childNode, "click", callback);
});
}
dojo.ready(init);
</script>
<div id="test">
<p>
trivial callback click here
</div>
Starting with Dojo 1.7, the AMD loader is the preferred way of using Dojo modules.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>
<script type="text/javascript">
require(['dojo/on', 'dojo/dom', 'dojo/domReady!'], function(on, dom){
on(dom.byId('theDiv'), 'click', function(){
alert("Click!") // replace this line with location changes
})
})
</script>
</head>
<body>
<div id="test">
Click Me
</div>
</body>
</html>
In this example, the core Dojo.js is loaded (as you requested), but the difference is I used the require method, attaching the click method of dojo/on to the div. Ideally, you would use separate javascript files to dictate the behavior of your page, but for this example, embedding the js into the index page is sufficient.
Using the parser, you can use declarative <script type="dojo/on" data-dojo-event="click">...</script>, but for a variety of reasons you should use programmatic parsing and use javascript files for maximum efficiency.
In addition, defining functions/methods/variables in the global scope:
<script type="text/javascript">
callback = function() {
window.location.href = "about:blank";
console.debug("callback invoked");
}
</script>
... isn't recommended and there are better alternatives.
I want to display basic portlet on mozilla browser in dojo 1.7, but the following is displaying data as simple text without actually creating any portlet using dojo API. Could anyone please tell me what wrong I'm doing?
<!Doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../lib/dijit/themes/claro/claro.css"/>
<style type = "text/css">
#import "../lib/dojox/widget/Portlet/Portlet.css"</style>
<script src = "../lib/dojo/dojo.js" data-dojo-config = "async: true, parseOnLoad:true" >
dojo.require("..lib/dojox/widget/Portlet");
dojo.require("..lib/dijit/dijit");
</script>
</head>
<body class="claro">
<div data-dojo-type="dojox.widget.Portlet" title="A Simple Portlet">
<div data-dojo-type="dojox.widget.PortletSettings">
This is a simple setting widget.
Put Whatever you like in here
</div>
<div style="height: 100px;">
The contents of the portlet go in here.
</div>
</div>
</body>
</html>
Take a look at dojox.widget.Portlet source code. It's not rewritten to AMD format and therefore you are not able to resolve dependencies. Even the test dojox/widget/tests/test_Portlet.html does not work.
To workaround this switch the loader into sync mode defining async: false or completely omit the definition as in Dojo 1.7 the synchronous mode is default.
There is also another unresolved dependency, which I resolved by explicitly requiring AMD module dijit._Container before requiring dojox.widget.Portlet:
dojo.require("dijit._Container");
dojo.require("dojox.widget.Portlet");
See the working example at jsFiddle: http://jsfiddle.net/phusick/MWnYZ/
I am trying to get dijits to render using the dojo.NodeList.instantiate method, which takes existing HTML elements and turns them into dijits when the DOM has loaded.
The API reference for the instantiate method can be found here.
The following example, which calls the instantiate method in the dojo.addOnLoad method, should create a BorderContainer with two ContentPane instances, but the DIVs remain as they start out, and do not become dijits:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dijit Test</title>
<style type="text/css">
#import "dojoroot/dijit/themes/tundra/tundra.css";
#import "dojoroot/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.addOnLoad(
function() {
dojo.query("#divOuter").instantiate(
dijit.layout.BorderContainer, {
design : 'sidebar',
gutters : false
}
);
dojo.query("#divMiddle").instantiate(
dijit.layout.ContentPane, {
region : 'center'
}
);
dojo.query("#divRight").instantiate(
dijit.layout.ContentPane, {
region : 'right',
splitter : true
}
);
}
);
</script>
</head>
<body>
<div id="divOuter" style="width:400px;height:300px">
<div id="divMiddle">Middle box</div>
<div id="divRight">Right box</div>
</div>
</body>
</html>
I have tried the above code in both Firefox 3.5 and Internet Explorer 7 and both fail to render the dijits. If I specify a standard HTML attribute in a property object (such as the style attribute), this style change appears correctly, indicating that the object is being read:
// The red border appears when using this example
dojo.query("#divRight").instantiate(
dijit.layout.ContentPane, {
region : 'right',
splitter : true,
style : 'border:1px solid red'
}
);
The following HTML (using dojoType and other property attributes) works fine - the BorderContainer and ContentPanes appear correctly in both browsers:
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="false"
style="width:400px;height:300px">
<div dojoType="dijit.layout.ContentPane" region="center">Middle box</div>
<div dojoType="dijit.layout.ContentPane" region="right" splitter="true"
style="width:200px;">Right box</div>
</div>
Please can anyone tell me why the instantiate example does not work?
I have done a lot of searching, but cannot seem to find anyone else with this issue, which may mean that I'm not using the instantiate method correctly!
Thanks.
You need to call startup on those dijits after they are instantiated. dojo.query.instantiate doesn't do it for you since it just creates the objects.
At the bottom of your onLoad function, add these:
dijit.byId('divOuter').startup();
dijit.byId('divMiddle').startup();
dijit.byId('divRight').startup();