网站建设合同 下载,专注网站建设怎么样,电子商务网站建设课设学生体会,深圳十大网站建设公司文章目录1.vue组件2.非单文件组件2.1组件创建2.2祖册组件2.3使用组件3.组件的嵌套3.1 school组件嵌套student3.2 app组件嵌套school和hellozujain3.3 vm里面引入app组件4.VueCompent5.单文件组件1.vue组件 组件是实现应用中功能的局部代码和资源的集合 2.非单文件组件
2.1组件…
文章目录1.vue组件2.非单文件组件2.1组件创建2.2祖册组件2.3使用组件3.组件的嵌套3.1 school组件嵌套student3.2 app组件嵌套school和hellozujain3.3 vm里面引入app组件4.VueCompent5.单文件组件1.vue组件 组件是实现应用中功能的局部代码和资源的集合 2.非单文件组件
2.1组件创建 注意template要用div大盒子包裹 // 创建组件const school Vue.extend({template: divh1{{schoolname}}/h1h2{{adress}}/h2/div,data() {return {schoolname: 新理工,adress: 阿克苏,};},});2.2祖册组件
// 全局注册组件Vue.component(school, school);new Vue({el: #app,// 引入组件(局部)components: {school: school,},});2.3使用组件 div idappschool/school/div3.组件的嵌套 在vue中vm的组件有app管理在app组件内部引入定义的school和student组件 3.1 school组件嵌套student // 创建组件const school Vue.extend({template: divh1{{schoolname}}/h1h2{{adress}}/h2student/student/div,data() {return {schoolname: 新理工,adress: 阿克苏,};},// 祖册组件components: {student,},});3.2 app组件嵌套school和hellozujain //创建app管理vm的组件const app Vue.extend({// 使用template: divschool/schoolhello/hello/div,// 祖册组件components: {school,hello,},});3.3 vm里面引入app组件 new Vue({el: #app,template: app/app,// 引入组件components: {app,},});在vm里面通过引入app组件 其中app组件是整个页面里引入组件的管理者。 4.VueCompent 1.在组件配置中data函数methods函数等他们的this均是vuecompent实例对象。 2.在new data的配置中data函数methods函数等他们的this均是vue的实例对象。 3.每次调用组件返回的都是一个新的VueCompent实例对象。 5.单文件组件
school组件
templatedivh1 classdemo{{schoolname}}/h1h2{{adress}}/h2/div
/templatescriptexport default {name:School,data() {return {schoolname: 新理工,adress: 阿克苏,};},}// 默认暴露// export default school
/scriptstyle langscss.demo{background-color: green;}
/styleApp组件
template divSchool/SchoolStudent/Student/div
/templatescript
import School from ./School.vue
import Student from ./Student.vue
export default {components: { School },name:App,comments:{School,Student}
}
/scriptstyle/stylemain.js
import App from ./App.Vuenew Vue({el:#app,template:App/App,comments:{App}
})index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodydiv idapp/divscript srchttps://cdn.jsdelivr.net/npm/vue2.5.16/dist/vue.js/scriptscript src./main.js/script/body
/html
