i'm learning Vue, and in first lesson this code not working, whats wrong? Vue update?
new Vue({
el: '#app',
data: {
name: 'Vue!'
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
</head>
<body>
<div id="app">
<h1>Hello {{ name }}</h1>
</div>
</body>
</html>
There are two ways to use the data property in vue
This is used when you are using vue in a root Vue instance
new Vue({
el: "#app",
data: {
name: 'Vue !'
}
});
This is used when you are using vue components
new Vue({
el: "#app",
data() {
return {
name: 'Vue !'
}
}
});
Are you using components?
Related
I'm trying to get data from parent component and use them in child component v-bind:style.
Here's my code.
<body>
<div id="parentComponent">
<child-component v-bind:propsdata="parentBackground" v-bind:propsdata2="parentFontstyle"></child-component>
</div>
<script>
Vue.component('child-component', {
props: ['propsdata', 'propsdata2'],
data: function() {
return {
childBackground: this.propsdata,
childFontStyle: this.propsdata2
},
template: '<p v-bind:style="childBackgroundColor, childFontStyle">Child componnent Area</p>'
});
new Vue ({
el: '#parentComponent',
data: function() {
return {
parentBackground: 'background-color:yellow;',
parentFontStyle: 'font-style: italic;'
},
})
</body>
When I run this code, only second style(childFontStyle) is applied to Child componnent template.
I also tried v-bind:style="[childBackgroundColor, childFontStyle]" and doesn't work.
Is there any way to apply both style?
You need to pass the props property as an object and can able to bind the props directly to the child. You have some typo mistakes that need to be fixed as well. Here is the working snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="parentComponent">
<child-component v-bind:propsdata="parentBackground" v-bind:propsdata2="parentFontStyle"></child-component>
</div>
<script>
Vue.component("child-component", {
template: `<p v-bind:style="[propsdata, propsdata2]">Child componnent Area</p>`,
props: ["propsdata", "propsdata2"]
});
new Vue({
el: "#parentComponent",
data: function() {
return {
parentBackground: {
"background-color": "yellow"
},
parentFontStyle: {
"font-style": "italic"
}
};
}
});
</script>
</body>
</html>
I don't know how to transpile with TypeScript just yet. I am trying to build a basic Vue application and it is not running in IE11.
Vue.use(VeeValidate);
var vm = new Vue({
el: "#app",
store,
data: {
error: "",
isBusy: false
}
})
So I understand I need a polyfill. I have added some CDN hosted scripts for that before the Vue and Vuex script tags.
<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise-polyfill%2CPromise.prototype.finally-polyfill%2CObject.assign-polyfill%2CObject.defineProperty-polyfill%2CObject.entries-polyfill%2CObject.freeze-polyfill%2CObject.create-polyfill%2CObject.defineProperties-polyfill"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.auto.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
</script>
<script src="https://unpkg.com/axios#0.18.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash#4.17.11/lodash.min.js"></script>
<script src="https://unpkg.com/vee-validate#2.0.0-rc.21/dist/vee-validate.min.js"></script>
<script src="https://unpkg.com/vue-router#0.7.13/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/vuex#3.1.0/dist/vuex.min.js"></script>
<script src="https://unpkg.com/vue#2.6.8/dist/vue.min.js"></script>
<script src="/js/dataStore.js?v=TOzjuYw4pqmi52KBE0sWgA-lGc7kdqLMFfR7X8q544A"></script>
<script src="/js/main.js?v=GnJcxmw4JPycX0K_Vvb6HLjM5dg_3qX3YpFa11fb4ps"></script>
The above Vue app is in main.js. IE doesn't like the store property.
What do I need to do to apply the polyfill and make this Vue app compatible with IE 11?
object_literal_extensions is not supported by ie11:
var vm = new Vue({
el: "#app",
store,
data: {
error: "",
isBusy: false
}
it has to be:
var vm = new Vue({
el: "#app",
store: store,
data: {
error: "",
isBusy: false
}
I've run into an issue where i'm creating components that are then being applied to the root App - after creating a dynamic child w/ vanilla JS. When i look at the Vue object in the console, message is not present, which i expect it to be - Can anyone tell me why?
Create the App
Dynamically add new DOM element w/ createElement with a {{ message }} property (ex: <div id="test">{{message}}</div>)
Create a custom component using Vue.Component (ex: <custom-component><custom-component> w/ pre-populated {{ messsage }} value test message
Render the Vue w/ the component w/ update props values for {{ message }}
Below is the actual code tested:
import Vue from 'vue/dist/vue.js';
export default {
name: 'app',
components:
{
HelloWorld
},
data()
{
return this;
},
mounted()
{
// #2 Create an Html Target that contains the component's name 'custom-element'
var v = document.createElement('div');
v.setAttribute('id', 'test');
v.innerHTML = '<custom-element></custom-element>';
var $element = this.$el.prepend(v);
// #1 Create a component
var MyComponent = Vue.component(
'custom-element',
{
template: '<div v-bind:id="UID">{{message}}</div>',
prop: ['UUID', 'message'],
data() {
return {
UID: '',
message: 'test message',
}
},
}
);
// #3 Append the component to the Html Target
window.vm = new Vue({
el: '#test',
components: {
'custom-component': MyComponent,
},
beforeCreate() {
return {
UID: 'x7x7x',
message: 'test message update...'
}
},
})
window.console.log(MyComponent);
window.console.log(this);
}
}`
Here's the main 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.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>hello-world</title>
</head>
<body>
<noscript>
<strong>We're sorry but hello-world doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>'
Here's the main.js
'use strict'
import Vue from 'vue'
import App from './App.vue'
import Reaktr from './js/reaktr.js'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
data: {
Reaktr: new Reaktr(),
},
mounted() {
}
}).$mount('#app')
Here's the Helloworld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
This is the component I want to use [https://krystalcampioni.github.io/vue-hotel-datepicker/] [https://github.com/krystalcampioni/vue-hotel-datepicker#i18n] for date picker on my index.html but it is me giving an error Failed to mount component: template or render function not defined. Below is the code I have written on my index.html`
//index.html
<html>
<script src="path/to/vue.js"></script>
<script src="vue-hotel-datepicker/dist/vue-hotel-datepicker.min.js"></script>
<body>
<div id="app">
<HotelDatePicker/></<HotelDatePicker>
</div>
<script>
new Vue({
el: '#app',
components: { HotelDatePicker }
})
</script>
</body>
</html>
`
If youre using a build tool, You must import the component before registering it with the vue instance
import HotelDatePicker from 'vue-hotel-datepicker'
new Vue({
el: '#app',
components: { HotelDatePicker }
})
Otherwise use require
new Vue({
el: '#app',
components: {
'vue-hotel-datepicker': require('vue-hotel-datepicker')
}
})
js i'm starting to catch up on it but i'm stuck on components would appreciate your help thanks
//here is my js
Vue.component('thatsCool', {
template: document.querySelector('#myOwnTemplate'),
data: function() {
return {
helloWorld: 'thats cool',
};
},
});
new Vue({
el: 'body',
});
//and this is my html
<! DOCTYPE html>
<html>
<head>
<title>playing with Vue components</title>
</head>
<body>
<thatsCool></thatsCool>
<script id="myOwnTemplate" type="x/template">
<p v-text="helloWorld"></p>
</script>
<script src="vue.js"></script>
<script src="component.js"></script>
</body>
</html>
There are a couple of errors in your code. Use dash-separated convention for your components and simple handlebar notation for string output. Try with this code:
HTML
<thats-cool></thats-cool>
<script id="myOwnTemplate" type="x-template">
<p>{{ helloWorld }}</p>
</script>
JS
Vue.component('thats-cool', {
template: '#myOwnTemplate',
replace : true,
data: function() {
return {
helloWorld: 'thats cool',
};
}
});
Note that the option 'replace : true' replaces the original template's content of el instead of appending to it.