php网站打开一片空白,外贸网站和普通网站,阿里云cdn wordpress,网站建设 用英文怎么说Vue 组件化编程 非单文件组件 定义组件 使用Vue.extend(options#xff09;创建 不要写eldata要写成函数#xff0c;避免组件被复用时#xff0c;数据存在引用关系 注册组件 局部注册#xff1a;new Vue()的时候#xff0c;options传入components全局注册#xff1a;V…Vue 组件化编程 非单文件组件 定义组件 使用Vue.extend(options创建 不要写eldata要写成函数避免组件被复用时数据存在引用关系 注册组件 局部注册new Vue()的时候options传入components全局注册Vue.Component(组件名,组件) 全局注册 div idapp!-- 使用组件 --school/school!-- 单标签写法需要在脚手架坏境下使用 --!-- school / --/divVue.config.productionTip false;// 定义组件const school Vue.extend({template: divh1我是一个school组件/h1h1我是:{{userName}}/h1h1我是:{{func()}}/h1/div,data() {return {userName: 张三}},methods: {func() {return 100;}}})// 全局注册组件Vue.component(school, school);var vm new Vue({el: #app,data() {return {}},})局部注册 div idapp!-- 使用组件 --school/school!-- 单标签写法需要在脚手架坏境下使用 --!-- school / --/divVue.config.productionTip false;// 定义组件const school Vue.extend({template: divh1我是一个school组件/h1h1我是:{{userName}}/h1h1我是:{{func()}}/h1/div,data() {return {userName: 张三}},methods: {func() {return 100;}}})// 全局注册组件// Vue.component(school, school);var vm new Vue({el: #app,data() {return {}},// 局部注册组件components:{school;})组件嵌套 div idapp/divVue.config.productionTip false;//定义student组件const student Vue.extend({name: student,template: divh4学生姓名{{name}}/h4 h4学生年龄{{age}}/h4 /div,data() { return { name: 张三, age: 18 } }})//定义school组件const school Vue.extend({name: school,template: divh3学校名称{{name}}/h3 h3学校地址{{address}}/h3 student/student/div,data() { return { name: 某某大学, address: 北京 } },//注册组件局部components: { student }})//定义hello组件const hello Vue.extend({template: h3{{msg}}/h3,data() { return { msg: 欢迎来到某某大学学习 } }})//定义app组件const app Vue.extend({template: div hello/helloschool/school/div,components: { school, hello }})//创建vmnew Vue({el: #app,template: app/app,//注册组件局部components: { app }})Vue.extend()方法本质就是实例化VueComponent构造函数两种注册方法的区别 全局注册只需要注册一次在任何组件中都可以使用 局部注册在变量A中注册只能在A中使用组件VueComponent.prototype.__proto__Vue.prototype 组件命名特性 可以使用小写或者大写首字母都会自动转为大写my-school 和 myschool 都为转为同样格式的 MySchool,但是myschool需要在脚手架坏境下使用使用的组件名可以不和组件定义的名字相同组件名可以自定义使用的组件名需要规避HTML中已有的元素标签名称 单文件组件 MySchool.vuetemplateh1我是MySchool组件/h1 /templatescript export default {name:MySchool, // 不能使用单个单词如schooldata(){return{msg:欢迎学习vue,}} } /scriptstyle/styleMyStudent.vuetemplateh1我是MyStudent.组件/h1 /templatescript export default {name:MyStudent., // 不能使用单个单词如school } /scriptstyle/styleMyApp.vuetemplatediv idappMySchool/MySchoolMyStudent/MyStudent/div /templatescript // 导入 import MySchool from ./MySchool.vue; import MyStudent from ./MyStudent.vue; export default {name:MyApp., // 不能使用单个单词如school// 注册components:{MySchool,MyStudent} } /scriptstyle/style失联 最后编辑时间 20243311632