Vue introduction tutorial – Components
Welcome to pay attention to the blogger public number “Java master”, focus on sharing the Java field dry goods article, pay attention to reply to “resources”, free to receive the network’s hottest Java architect study PDF, reproduced please specify the source www.javaman.cn/vue/vue-com…
Last time we looked at vUE properties, events, and bidirectional bindings. Today we’ll look at vue components
1. Why components?
To put the business processing logic of a page together, processing and maintenance will be very complex, which is not conducive to subsequent management and expansion. At this time, it is necessary to use componentization to classify the management logic
2. Global components
A global component is, as its name implies, available within the scope of a Vue instance once the definition is registered
(1) the HTML code
<div id="app">
<com1></com1>
</div>
<div id="app2">
<com1></com1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// Define a com1 component. This component must be defined on top of the VM instance.
// This component is valid for both app and APP2 instances
Vue.component('com1', {template:' I am a component
'
})
var vm = new Vue({
el:"#app"
});
var vm2 = new Vue({
el:"#app2"
})
</script>
Copy the code(2) The running results are shown as follows:
3. Local components
A local component, as its name implies, is only available within the scope of a defined Vue instance
(1) the HTML code
<div id="app">
<com2></com2>
</div>
<! Com2 does not exist in app2, this result will not print
<div id="app2">
<com2</com2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>Components com2, defined within the VM instance, is scoped only within the appvar vm = new Vue({
el:"#app".components: {'com2': {template:' I am local component
'}}});</script>
Copy the code(2) The running results are shown as follows:
4. Pass data to child components via Prop
The component adds the props property, which is passed to the Component props for passing a value
(1) the HTML code
<div id="app">
<h3>Courses:</h3>
<! -- v-bind binds the course and index attributes, and passes the props to the study-course to the template template -->
<study-course v-for="(item,index) in courses" v-bind:course="item" v-bind:index="index"></study-course>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
Vue.component('study-course', {props: ['index'.'course'].template:'<li>{{index+1}}-----{{course}}</li>'
})
var vm = new Vue({
el:"#app".data: {// Pass v-for to study-course for parsing in the template
courses: ['Chinese'.'mathematics'.'foreign language']}});</script>
Copy the code(2) The running results are shown as follows:
5. Create a template template
Add vUE component in IDEA, define the component in a file separately, and call it in the reuse interface
(1) Add vUE plug-in to IDEA
Create a VUe-Component
Vue file to create a my-temp template and register it
<template id="my-temp">
<p>I am a separate component template</p>
</template>
<script>
Vue.component('zujian', {template:'#my-temp'
})
</script>
<style scoped>
</style>
Copy the code