How can I initialize new Vue instance, mount it to existing dom element, and use this element's html as component's (or app's) content?
Here is an example project https://codesandbox.io/s/white-darkness-f3v80
<div id="app">
<p>This is slot text from index.html</p>
<template slot="foo">Also should be parsed as named slot</template>
</div>
Element div#app (index.html) may contain default slot, or other kind of slots (scoped etc). And App.vue should parse this html into relevant slots.
Try something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<any-component>
<p>This is slot text from index.html</p>
<template v-slot:foo>
Also should be parsed as named slot
</template>
</any-component>
</div>
</div>
<script>
Vue.component('any-component', {
template: `
<div>
<slot name="default"></slot>
<slot name="foo"></slot>
</div>`,
});
new Vue({
el: '#app',
data() {
return {};
},
});
</script>
</body>
</html>
Are you looking for it?
Related
I am using local vue.js These are my files.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="res/vue.js"></script>
<script src="res/vue-router.js"></script>
<title>Vue</title>
</head>
<body>
<div id="app" ></div>
<script type="module" src="App.js"></script>
</body>
</html>
App.js
import Vue from './res/vue.js'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div>
{{foo}}
</div>
</template>
<script>
export default {
name: 'App',
data: function(){
return{
foo:'Hello vue'
}
}
}
</script>
<style>
</style>
But my index.html shows nothing
You mount your vue instance at the div node which id is "app", but i can't find the "#app" node, so you can resolve that by insert the "#app" node .
index.html:
<body>
<div id="app"></div>
<script type="module" src="App.js"></script>
</body>
Like the Steven suggested you have to compile vue components.
If you dont want to do it that way, below is the the easiet way.
Vue.createApp({
data() {
return {
foo: 'Hello vue',
};
},
}).mount('#app');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/vue#next"></script>
<!-- <script src="res/vue-router.js"></script> -->
<title>Vue</title>
</head>
<body>
<div id="app">{{foo}}</div>
<script type="module" src="App.js"></script>
</body>
</html>
You probably need to build it with vue-cli to create a SPA(Single page Application) for your android application
Hi is your import correct? from node_modules it should be import Vue from 'vue' and not import Vue from './res/vue.js' try it
I have a minimal Vue app:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<meta http-equiv='x-ua-compatible' content='ie=edge'>
<!-- 1. Link Vue Javascript -->
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<!-- 2. Link VCalendar Javascript (Plugin automatically installed) -->
<script src='https://unpkg.com/v-calendar'></script>
<!--3. Create the Vue instance-->
<script>
window.onload = function(){
new Vue({
el: '#app',
data: {
},
template: ''
})
}
</script>
</head>
<body>
<div id='app'>
</div>
</body>
</html>
and I want to show the date picker from https://vcalendar.io/examples/datepickers.html#button-dropdown but is only specified as template.
What are the steps to display that date picker inside my application?
new Vue({
el: '#app',
data: () => ({
selectedDate: null
}),
template: `
<div>
<v-date-picker class="inline-block" v-model="selectedDate">
<template v-slot="{ inputValue, togglePopover }">
<div class="flex items-center">
<button #click="togglePopover()">
Pick date
</button>
<input
:value="inputValue"
readonly
/>
</div>
</template>
</v-date-picker>
</div>
`
})
<!-- 1. Link Vue Javascript -->
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<!-- 2. Link VCalendar Javascript (Plugin automatically installed) -->
<script src='https://unpkg.com/v-calendar'></script>
<div id='app'>
</div>
I'm just beginning to learn view and am practicing using it, but I keep getting the errors "vue was used before it was defined" and "Vue is not defined". Ive uploaded what I have in my html and my js file.
var app = new Vue();
app({
el: '#app',
data: {
product: 'Socks'
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue practice</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="product-image">
<img src="" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</body>
</html>
You just need to put those parameters into your Vue() constructor
var app = new Vue({
el: '#app',
data: {
product: 'Socks'
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue practice</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="product-image">
<img src="" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</body>
</html>
I need to change the {{message}} on the click of a button with a alert box. No alert box is showing and the message is also not changing.
I am new to vue world, the other examples are working but there is a problem with this file only.
I have used the directive "v-once" on the message tag inside the <h1> tag, the <h2> doesn't have "v-once".
Please reply me what I have done wrong in the code below.
<!DOCTYPE html>
<html lang="en">
<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>Vue.js Tutorial | Directives</title>
<script src="https://unpkg.com/vue#2.0.3/dist/vue.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<h1 v-once>{{message}}</h1>
<h2>{{message}}</h2>
<h5 v-show="viewed" v-html="intro"></h5>
</div>
<button #click="rewrite" type="button" name="button" >Change</button>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue World',
intro: 'Welcome to the Tutorial <small>It is all about Vue.js</small>',
viewed: true,
},
methods: {
rewrite: function () {
alert('Button Clicked!'),
this.message = 'Bye vue World!!!',
},
},
});
</script>
</html>
The problem with your code is that you put the button outside of div#app so the Vue instance doesn't affect it. Just move the button to be inside div#app and it'll work
<body>
<div id="app">
<h1 v-once>{{message}}</h1>
<h2>{{message}}</h2>
<h5 v-show="viewed" v-html="intro"></h5>
// move button into here
<button #click.prevent="rewrite" type="button" name="button">Change</button>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<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>Vue.js Tutorial | Directives</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<h1 v-once>{{message}}</h1>
<h2>{{message}}</h2>
<h5 v-show="viewed" v-html="intro"></h5>
<button #click.prevent="rewrite" type="button" name="button">Change</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue World',
intro: 'Welcome to the Tutorial <small>It is all about Vue.js</small>',
viewed: true,
},
methods: {
rewrite: function() {
alert('Button Clicked!')
this.message = 'Bye vue World!!!'
},
},
});
</script>
</html>
I am trying to get auto binding template to work with out success. This is what I have done so far. The page doesn't render with the value of "greeting" . It outputs {{greeting}}.
<!doctype html>
<html lang="">
<head>
<link rel="stylesheet" href="styles/main.css">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<template is="dom-bind" id="app" >
<span> {{greeting}} </span>
</template>
<script src="scripts/app.js"></script>
</body>
</html>
app.js
(function(document) {
'use strict';
var app = document.querySelector('#app');
app.greeting = "Hello";
})(document);
It works with Polymer 0.5.5 http://plnkr.co/edit/fmL9xQEXKwnINzdL3rBj?p=preview
Your {{greeting}} binding must be the only content of a tag (Polymer documentation: Binding to text content). You need to remove the surrounding whitespace:
<template is="dom-bind" id="app" >
<span>{{greeting}}</span>
</template>