小企业网站建设的基础知识,深圳做官网公司,影视网站开发工程师,wordpress形式一、.vue文件
我们使用Vue的单文件组件的时候#xff0c;一个.vue文件就是一个组件。
例如我们创建一个School组件#xff1a; 二、组件的结构
我们编写网页代码的时候有HTML结构、CSS样式、JS交互。
组件里也是同样存在这三种结构的#xff1a;
templated…一、.vue文件
我们使用Vue的单文件组件的时候一个.vue文件就是一个组件。
例如我们创建一个School组件 二、组件的结构
我们编写网页代码的时候有HTML结构、CSS样式、JS交互。
组件里也是同样存在这三种结构的
templatediv!-- 模板 --/div
/templatescript// 交互
/scriptstyle/* 样式 */
/style
模板中必须要用一个div标签包住所有的模板不然会报错。
然后将模板的内容写在template中Vue的内容写在script中style正常写样式即可。
templatedivdiv学校名称{{ name }}/divdiv学校地址{{ address }}/divbutton clickshowHello点我弹窗/button/div
/templatescript
export default {name:School,data() {return {name: 家里蹲大学,address: 家,}},methods: {showHello() {alert(Hello!);},}
};
/scriptstylebutton{background-color: skyblue;}
/style
这里的VueComponent必须暴露出去外界才能引用到这个组件。
三、App.vue
当我们创建完所有的组件的后全部都交由App.vue进行统一管理。
先对组件进行引入然后配置components最后在模板中使用组件:
templatedivSchool/Student//div
/templatescript
import School from ./School.vue;
import Student from ./Student.vue;export default {name: App,components: {School,Student}
}
/script
四、main.js
main.js为入口文件主要管理App.vue文件。
需要创建Vue实例对象和挂载Vue
import App from App.vue;new Vue({el: #root,template: App/App,components: {App}
})
五、index.html
配置root根元素和引入入口文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idroot/divscript src/js/vue.js/scriptscript src/单文件组件/main.js/script
/body
/html
所以最终文件结构如下
