I can't understand should I create new instance of vue, or I can use one instance and put in it all needed components. If yes, how I can do it. Here is my code:
window.onload = function() {
var loginMenu = Vue.extend({
template: `
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="">
</a>
</div>
</div>
</nav>
`
})
var pageFooter = Vue.extend({
template: `
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
`
})
// register it with the tag <example>
Vue.component('loginmenu', loginMenu),
Vue.component('pagefooter', pageFooter)
new Vue({
el: '#loginmenu' //how pass another templates here??
})
}
In your main file, for example index.html, add a main js file, app.js in your app.js include all of your components. Something like this
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
</head>
<body>
<loginmenu></loginmenu>
<pagefooter></pagefooter>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
var loginMenu = Vue.extend({
template: `
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="">
</a>
</div>
</div>
</nav>
`
})
var pageFooter = Vue.extend({
template: `
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
`
})
// register it with the tag <example>
Vue.component('loginmenu', loginMenu),
Vue.component('pagefooter', pageFooter)
new Vue({
el: 'body',
components: {
'loginmenu': loginMenu,
'pagefooter', pageFooter
}
})
Related
I'm playing around with ejs and want to know how to have some todos appear in the html?
This is what i have to work with:
app.get("/", (req, res) => {
db.collection("todoejs")
.find()
.toArray((err, todoejs) => {
res.render("todo");
});
});
app.post("/create-item", (req, res) => {
console.log(req.body);
db.collection("todoejs").insertOne({todo: req.body.item});
res.redirect("/");
});
I have a todo.ejs in my views folder and would like to know how to get the todos to show.
This is what's in the ejs file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple To-Do App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="display-4 text-center py-1">To-Do App</h1>
<div class="jumbotron p-3 shadow-sm">
<form action="create-item" method="POST">
<div class="d-flex align-items-center">
<input name="item" autofocus autocomplete="off" class="form-control mr-3" type="text" style="flex: 1;">
<button class="btn btn-primary">Add New Item</button>
</div>
</form>
</div>
<ul class="list-group pb-5">
<li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
<span class="item-text"><%= todoejs %></span>
<div>
<button class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
<button class="delete-me btn btn-danger btn-sm">Delete</button>
</div>
</li>
</ul>
</div>
</body>
</html>
The second parameter of res.render takes in the variables you want to pass to the template.
In this example, you might want to do res.render("todo", { todoejs: todoejs });
Then todoejs is defined in the template and you can use it however you wish.
I am very new to using VueJS and was wondering if there is a way to only show a button (that contains a slot) to only show if there is a button value given to the slot.
I'm using BootstrapVue Modals and the code is as follows:
I was not able to successfully get the modal running in the snippet but a screenshot of the opened modal is below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
</head>
<body>
<div id="app">
<b-btn #click="showModal" class="modalBtn">
<slot name="modalOpenBtn">Open Me</slot>
</b-btn>
<b-modal ref="myModalRef" hide-header no-fade hide-backdrop>
<h1 class="font-18 text-black font-weight-bold mb-5">Merchant Closed</h1>
<p class="font-14 text-black mb-20">please be aware that the merchant that you are viewing is currently closed. Feel free to add items to your cart but you will not be able to place your order until they’re open.</p>
<div slot="modal-footer" class="w-100 d-flex align-items-center">
<b-btn class="btn btn-teal btn-block font-14 w-100" block #click="hideModal">
<slot name="modalCloseBtn">btn 1</slot>
</b-btn>
<b-btn class="btn btn-teal btn-block font-14 w-100" block #click="hideModal">
<slot name="modalOkBtn">btn 2</slot>
</b-btn>
</div>
</b-modal>
</div>
<script>
new Vue({
el: '#app',
components: { App },
methods: {
showModal () {
this.$refs.myModalRef.show()
},
hideModal () {
this.$refs.myModalRef.hide()
}
}
});
</script>
</body>
</html>
You can conditonally render any element with Vues v-if directive:
// generic
<button v-if="myBooleanCondition">...</button>
// exmaple
<button v-if="something == true">...</button>
https://v2.vuejs.org/v2/guide/conditional.html
I'm trying to make a simple form validation page work with vee-validate. Something appears to be broken though, and I am unsure what exactly I am doing wrong.
The span tag appears as raw html:
Markup:
<!DOCTYPE html>
<html>
<head>
<script type='text/JavaScript' src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type='text/JavaScript' src="https://cdn.jsdelivr.net/npm/vee-validate#latest/dist/vee-validate.js"></script>
</head>
<body>
<script type='text/JavaScript'>
Vue.use(VeeValidate); // good to go.
new Vue({
el: '#app',
data: {
email_primary: null
}
});
</script>
<div id="app">
<form action='#' method='POST'>
<input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
<span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
</body>
</html>
Fiddle.
What do I need to do to make vee-validate work as expected?
The issue(s)
It appears to have been a few things, but the main culprit was that the type attribute on all the script tags were set to text/JavaScript which is invalid. Its best to either not set the type, or if you do, set it to text/javascript.
Also, since you're utilizing div#app as a template rather than just the root element, I added in the proper attributes.
Finally, always load your javascript after your html.
Fixed Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<form action='#' method='POST'>
<input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
<span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate#latest/dist/vee-validate.js"></script>
<script>
Vue.use(VeeValidate); // good to go.
new Vue({
el: "#app",
template: '#app',
data() {
return {
email_primary: null
};
}
});
</script>
</body>
</html>
Also, a working jsfiddle.
I hope this helps!
I'm working on a project that reads a URL and then goes to the link and reads the data. Its a text hosting website (TextUploader.com) But when it downloads the site. I only want the data from the text that I have put there. When I download the Link and send it to the RichTextBox1 this is what i get
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>'HPTjNRgUfG' | TextUploader.com</title>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="icon" type="image/ico" href="http://textuploader.com/favicon.ico">
<meta property="og:title" content="HPTjNRgUfG" xmlns="http://www.w3.org/1999/html"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://textuploader.com/5jx4u"/>
<meta property="og:site_name" content="textuploader.com - HPTjNRgUfG"/>
<meta property="og:description" content="Please call back later <a href=" http://philadelphiaexplorers.org/about-the-explorers-club/#annual ">a..."/>
<link rel="canonical" href="http://textuploader.com/5jx4u"/>
<!-- bootstrap framework css -->
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap.min.css">
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap-responsive.min.css">
<!-- power tooltips -->
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-powertip/1.1.0/jquery.powertip.css">
<!-- main stylesheet -->
<link media="all" type="text/css" rel="stylesheet" href="http://textuploader.com/assets/css/beoro.css">
<link media="all" type="text/css" rel="stylesheet" href="http://textuploader.com/assets/css/tu_custom.css">
<!--[if lte IE 8]><link media="all" type="text/css" rel="stylesheet" href="http://textuploader.com/assets/css/ie8.css">
<![endif]-->
<!--[if IE 9]><link media="all" type="text/css" rel="stylesheet" href="http://textuploader.com/assets/css/ie9.css">
<![endif]-->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2pre/html5shiv.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.7/excanvas.min.js"></script>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36314765-1']);
_gaq.push(['_setDomainName', 'textuploader.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body class="bg_c">
<div id="fb-root"></div>
<script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=456470037742170";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- main wrapper (without footer) -->
<div class="main-wrapper">
<!-- top bar -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="pull-right top-search">
</div>
<div id="fade-menu" class="pull-left">
<ul class="clearfix" id="mobile-nav">
<li>Home</li>
<li>Discover</li>
<li>Help</li>
<li>Developers</li>
<li>Contact</li>
<li><a href='https://textuploader.com/profile'>My Account</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- header -->
<header>
<div class="container">
<div class="row">
<div class="span3">
<!-- <div class="main-logo"><a href="http://textuploader.com/"><img src="http://textuploader.com/assets/img/textuploader_logo.png" alt="TextUploader.com"></div> -->
<div class="main-logo"></div>
</div>
<div class="span5">
<nav class="nav-icons">
<!-- small icons navigation -->
</nav>
</div>
<div class="span4">
<div class="user-box">
<div class="user-box-inner">
<img src="//www.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?s=80&r=g&d=mm" class="user-avatar img-avatar" alt="Gravatar"/>
<div class="user-info">
Create an Account <ul class="unstyled">
<li>Login</li>
<li>·</li>
<li>Password</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- breadcrumbs -->
<div class="container">
<ul id="breadcrumbs">
<li>
<a href="http://textuploader.com/">
<i class="icon-home"></i>
</a></li>
<li>Home</li>
<li>textuploader.com/5jx4u</li>
<li><span>Posted on: 11/16/15 1:59:00 AM UTC</span></li>
</ul>
</div>
<!-- main content -->
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="w-box w-box-blue">
<div class="w-box-header"><h4>"HPTjNRgUfG" - Views: 2 · Hits: 2 - Type: Public</h4></div>
<div class="w-box-content cnt_a ">
<div class="toolbar clearfix">
<div class="pull-left">
<div class="toolbar-icons clearfix">
<div style="overflow:hidden;width:90px;float:left;">
<div class="fb-like" data-href="http://textuploader.com/5jx4u" data-send="false" data-layout="button_count"
data-width="450" data-show-faces="false"></div>
</div>
<div style="overflow:hidden;width:90px;float:left;">
Tweet
</div>
<div style="overflow:hidden;width:90px;float:left;">
<div class="g-plusone" data-size="medium" data-annotation="none"
data-href="http://textuploader.com/5jx4u"></div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="pull-right">
<div class="btn-group">
<button class="btn btn-mini" onClick="parent.location='http://textuploader.com/5jx4u/rev'; void(0);">Revisions (0)</button>
<button class="btn btn-mini" onClick="parent.location='http://textuploader.com/contact'; void(0);">Report Abuse</button>
</div>
</div>
</div>
<pre><code class='no-highlight'>Please call back later <a href=" http://philadelphiaexplorers.org/about-the-explorers-club/#annual ">accidently took 2 40 mg paxil</a> "We need that flexibility," Fox said. "When you pick your offensive line, not just for the season, but for game day, you have to pick them from the standpoint of having some flexibility. You've got to have a swing guard/center, you've got to have a swing tackle/guard, for the games."
</code></pre>
</div>
</div>
</div>
</div>
</div>
<div class="footer_space"></div>
</div>
<!-- footer -->
<footer>
<div class="container">
<div class="row">
<div class="span8">
<div>© 2016 Exsom Group, LLC. All Rights Reserved.</div>
</div>
<div class="span4">
<ul class="unstyled">
<!--
<li>TUArmor</li>
<li>·</li>
-->
<li>Terms of Service</li>
<li>·</li>
<li>Privacy Policy</li>
<li>·</li>
<li>DMCA</li>
<li>·</li>
<li>System Status</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Common JS -->
<!-- jQuery framework -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- bootstrap Framework plugins -->
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0//js/bootstrap.min.js"></script>
<!-- top menu -->
<script src="http://textuploader.com/assets/js/jquery.fademenu.js"></script>
<!-- top mobile menu -->
<script src="http://textuploader.com/assets/js/selectnav.min.js"></script>
<!-- actual width/height of hidden DOM elements -->
<script src="http://textuploader.com/assets/js/jquery.actual.min.js"></script>
<!-- jquery easing animations -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- power tooltips -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-powertip/1.1.0/jquery.powertip-1.1.0.min.js"></script>
<!-- date library -->
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/1.7.2/moment.min.js"></script>
<!-- common functions -->
<script src="http://textuploader.com/assets/js/beoro_common.js"></script>
<!-- twitter button code -->
<script>!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');</script>
<!-- +1 code -->
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = '//apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>
What I want is just the plaintext here:
<pre><code class='no-highlight'>Please call back later <a href=" http://philadelphiaexplorers.org/about-the-explorers-club/#annual ">accidently took 2 40 mg paxil</a> "We need that flexibility," Fox said. "When you pick your offensive line, not just for the season, but for game day, you have to pick them from the standpoint of having some flexibility. You've got to have a swing guard/center, you've got to have a swing tackle/guard, for the games."
</code></pre>
How would I write a simple code to parse only the data Between the " " and "" Above?
You can grab it using Regex if you want.
Tried & Tested
(?s)(<pre>.+?<\/pre>)
That above is the pattern that can be used. If you want to confirm please see that here.
I didn't show you how this can be done in .net as you did not provide us with what you have tried. I could break down the pattern, but the above link does that already.
I'm trying to fix a Bootstrap Navbar on my resume. The links work and it's fixed to the top of the resume. When viewing from a smaller screen the Navbar toggle button appears and the background color toggles open to close and vice versa...But the links aren't toggling with it. I've checked multiple sources but can't figure out what's off.
Any suggestions are appreciated.
Thanks.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>M.Gillespie Resume</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jQuery.js"></script>
<script src="js/helper.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top animated bounceInRight"> <!-- Fixed Nav Bar -->
<div class="navbar-header navbar-right">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Top</a> <!-- NavBar Brand -->
</div>
<div class="navbar-collapse collapse " id="navbar-collapse1"> <!-- Links to Resume Sections -->
<ul class="nav navbar-nav navbar-right">
<li class="active, hover">Experience</li>
<li class="active, hover">Projects</li>
<li class="active, hover">Education</li>
<li class="active, hover">Connect</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="container-fluid">
<div id="main">
<div id="header" class="center-content clearfix, animated bounceInDown">
<ul id="topContacts" class='flex-box'></ul>
</div>
<div style='clear: both;'></div>
<div id="workExperience" class='gray, animated bounceInDown'>
<h2>Experience</h2>
</div>
<div id="projects" class='gray, animated bounceInDown'>
<h2>Projects</h2>
</div>
<div id="education" class='gray, animated bounceInDown'>
<h2>Education</h2>
</div>
<div id="mapDiv" class=" animated bounceInDown">
<h2>Where I've Lived and Worked</h2>
</div>
<div id="letsConnect" class='dark-gray animated bounceInRight'>
<h2 class='orange center-text'>Let's Connect</h2>
<ul id="footerContacts" class="flex-box">
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/resumeBuilder.js"></script>
<script type="text/javascript">
if(document.getElementsByClassName('flex-item').length === 0) {
document.getElementById('topContacts').style.display = 'none';
}
if(document.getElementsByTagName('h1').length === 0) {
document.getElementById('header').style.display = 'none';
}
if(document.getElementsByClassName('work-entry').length === 0) {
document.getElementById('workExperience').style.display = 'none';
}
if(document.getElementsByClassName('project-entry').length === 0) {
document.getElementById('projects').style.display = 'none';
}
if(document.getElementsByClassName('education-entry').length === 0) {
document.getElementById('education').style.display = 'none';
}
if(document.getElementsByClassName('flex-item').length === 0) {
document.getElementById('letsConnect').style.display = 'none';
}
if(document.getElementById('map') === null) {
document.getElementById('mapDiv').style.display = 'none';
}
</script>
</body>
</html>
try to add to <a href="#IDNAME"> this code: data-toggle="collapse" data-target=".navbar-collapse"