Menu
Consider this simplified example of a real-world app:
<html>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div id="subapp">
<p>
{{ message}}
</p>
</div>
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
new Vue({
el: '#subapp',
data: {
message: '¡Hola Vue.js!'
}
})
</script>
</body>
</html>
I'd expect to see two different messages, but i get the same message twice.
If i change message to other_message in the 'subapp', Vuejs complains that it can not find other_message.
Is there a way to "embed" them together? Short of un-embedding the html part or merging the controllers, is there a way of getting the expected result? Alternatively, is there a better term for what i'm trying to accomplish? (english is hard sometimes)
592
Combination of Vue and NuxtJS frameworks gives us the opportunity to build any web application we want. Unfortunately, application built on this approach is monolithic and we cannot extend its behavior. Of course we can extend the project with some elements, but these are small fragments.
Vue is considered a child of the JavaScript frameworks Angular and React. Created by Evan You in 2013 (released in 2014), Vue has gained popularity rapidly. It's worth noting that Vue doesn't have support from big companies like Google (Angular) or Facebook (React).
Vue. js is a popular JavaScript framework for front-end development developed and constantly updated by Evan You and his team. You can use this open-source framework to develop any single-page application or user interface. The design is very flexible and focuses on declarative rendering and component composition.
Like @ka_lin has said, you should use components for this. They are the perfect tools for this.
Otherwise it is almost impossible to do, specially with the example you have presented. There is no way Vuejs can recognize to which instance {{ message }} belongs to.
The closest you can achive a 'similar' feature is to distribute the scope of your vue instance to two elements as:
new Vue({
el: '#app1',
data () {
return {
message: 'Hello'
}
},
})
new Vue({
el: '#app2',
data () {
return {
message: 'Helloa'
}
}
})<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app1">
{{ message }}
</div>
<div id="app2">
{{ message }}
</div>Try such an example:-
const App = new Vue({
el: '#app',
data: {
aa: 'Hello Vue!', }
})
const vvv2 = new Vue({
el: '#vvv',
data: {
bb: 'Hello Vue!55555555555', }
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
