济南网站设计公司,做网站模板的软件,各大电商购物网站转化率报表,广州工程项目目录 友情提醒第一章、vue的组件1.1#xff09;什么是SPA应用1.2#xff09;vue的组件简介1.3#xff09;vue工程中的main.js文件 第二章、Vue组件的使用2.1#xff09;一般组件的自定义2.2#xff09;注册组件#xff1a;全局注册和局部注册2.2.1#xff09;全局注册什么是SPA应用1.2vue的组件简介1.3vue工程中的main.js文件 第二章、Vue组件的使用2.1一般组件的自定义2.2注册组件全局注册和局部注册2.2.1全局注册靠Vue.component(组件名,组件)2.2.2局部注册常用靠new Vue的时候传入components选项 2.3使用组件 第三章、组件嵌套3.1Student组件3.2School组件3.3App.vue中注册使用两个组件 友情提醒
先看文章目录大致了解知识点结构直接点击文章目录可以跳转到文章指定位置。
第一章、vue的组件
1.1什么是SPA应用
①单页 Web 应用single page web applicationSPA。 Vue工程是单页面应用程序整个工程只有一个完整的html页面。 ② 点击页面中的导航链接不会刷新页面只会做页面的局部更新。 ③数据需要通过 ajax 请求获取。 ④Vue 脚手架工程只有一个页面浏览器也只能读取这一个页面的内容。Vue 通过组件的方式把要渲染到页面的内容进行拆分拆分成组件由 Vue 对象加载各个组件并渲染到页面.
1.2vue的组件简介
组件component的出现是为了拆分Vue的代码块不同的组件划分不同的功能模块以后我们需要某个功能时就直接调用对应的组件即可 ①模块化模块化是从代码的角度去分析的方便代码分层开发保证每个模块职责单一。 ②组件化组件化是从界面的角度去划分的如分页组件、轮播、颜色选择、文件 上传等抽象 是把公共的东西 像的东西抽出来 好处复用公共的缺点代码的可读性直线下降 ③两种组件命名方式 1、大驼峰 MyComponent 2、-连接符号 my-component 组件分为根组件App.vue所有的组件都需要注册在根组件、一般组件、路由组件
1.3vue工程中的main.js文件 第二章、Vue组件的使用
2.1一般组件的自定义
①创建一个后缀为.vue组件文件如MyComponent.vue
②使用Vue.extend语法创建一般组件会继承Vue对象也就是VueComponent对象简称VC对象语法中options和new Vue时传入的那个options几乎一样但也有区别 1、el不要写最终所有的组件都要经过一个vm的管理由vm中的el决定服务哪个容器。 2、data必须写成函数 避免组件被复用时数据存在引用关系。
template!--写组件的html代码--h1名字:{{name}}/h1
/template
scriptimport Vue from vue/*该组件的vue语法*//*vue代码需要声明vue对象 vue组件本身就是vue对象的小弟*///myVueComponentDemo1就是vue组件对象 简称vcconst myVueComponentDemo1 Vue.extend({//el:,vc是vue对象的小弟 它不能自己运行 只能被vue对象调用//data:{}, 对象式//函数式data(){return{name:第一个组件}},methods:{}})//把组件对象声明暴露export default myVueComponentDemo1;//默认该组件对象对外公开
/script
style/*该组价的样式*/
/style2.2注册组件全局注册和局部注册
2.2.1全局注册靠Vue.component(‘组件名’,组件)
Vue组件直接绑定Vue对象 在App.vue使用注册后的组件标签 查看页面
2.2.2局部注册常用靠new Vue的时候传入components选项
Vue对象直接绑定根组件所有的组件都需要注册在根组件App.vue一般组件只能被根组件管理。
templatediv idappimg altVue logo src./assets/logo.pngHelloWorld msgWelcome to Your Vue.js App/h1这是app.vue 我在这写一个标签/h1!--这是全局注册 来自vue对象--MyFirstVc/MyFirstVcMyFirstVc/MyFirstVcMyFirstVc/MyFirstVcMyFirstVc/MyFirstVc!--这是局部注册--h1/p局部注册/pAAA/AAAAAA/AAAAAA/AAA/div
/templatescript
import HelloWorld from ./components/HelloWorld.vue
//局部注册
import MyFirst from ./components/MyFirstHelloWorld,AAA:MyFirst//局部注册组件 该组件只能在app.vue上使用
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style
2.3使用组件
①Vue对象调用App.vueApp.vue调用一般组件 ②自定义一个StudentDemo组件 注意只能有一个元素一般组件取名大驼峰如MyComponent
templatediv!--写html代码--p姓名:{{stuName}}/pp年龄:{{stuAge}}/p/div
/templatescript//vc对象export default {name:StudentDemo,//组件名称 用来区分组件 在vue加载时 会以组件标签的形式呈现data(){return{stuName:张三,stuAge:18}},}
/scriptstyle scoped/*css样式*/
/style③在根组件注册使用
templatediv idapp!--img altVue logo src./assets/logo.pngHelloWorld msgWelcome to Your Vue.js App/h1这是app.vue 我在这写一个标签/h1lt;!ndash;这是全局注册 来自vue对象ndash;gt;MyFirstVc/MyFirstVcMyFirstVc/MyFirstVcMyFirstVc/MyFirstVcMyFirstVc/MyFirstVclt;!ndash;局部注册ndash;gt;h1/p局部注册/pAAA/AAAAAA/AAAAAA/AAA--BBB/BBBhr/BBB/BBB/div
/templatescript
/*import HelloWorld from ./components/HelloWorld.vue
//局部注册
import MyFirst from ./components/MyFirst*/
import MyStudent from ./components/Student
export default {name: App,components: {/* HelloWorld,AAA:MyFirst//局部注册组件 该组件只能在app.vue上使用*/BBB:MyStudent}
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style
第三章、组件嵌套
在一般组件中引入另一个一般组件
3.1Student组件
templatedivp姓名{{stu.name}}br//pp年龄{{stu.age}}br//pp性别{{stu.sex}}br//p/div
/templatescriptexport default {name: StudentDemo,data(){return{stu:{name:小明,age:18,sex:男}}}}
/scriptstyle scoped/style3.2School组件
在School组件中引入Student组件
templatediv学校名称:{{school.name}}MyStudent/MyStudentMyStudent/MyStudenthr//div
/templatescriptimport MyStudent from ./Studentexport default {name: SchoolDemo,data(){return{school:{name:五道口职业技术学院}}},components:{MyStudent}}
/scriptstyle scoped/style3.3App.vue中注册使用两个组件
templatediv idappimg altVue logo src./assets/logo.png!--HelloWorld msg欢迎使用vue工程/HelloWorld--MySchool/MySchoolMySchool/MySchoolMySchool/MySchoolMySchool/MySchoolMySchool/MySchool/div
/templatescript
//import HelloWorld from ./components/HelloWorld.vueimport MySchool from ./components/Schoolexport default {name: App,components: {//HelloWorld:HelloWorld//当局部注册的声明和组件名一致时 写一个即可//HelloWorldMySchool}
}
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style
