旅游网站开发建设方案,东营房产网,网站设计模版免费建站,深圳公司网站建设案例组件化开发 根组件:
1. 组件化:一个页面可以拆分成一个个组件#xff0c;每个组件有着自己独立的结构、样式、行为. 好处:便于维护#xff0c;利于复用-提升开发效率 组件分类: 普通组件 , 根组件
2. 根组件:整个应用最上层的组件#xff0c;包裹所有普通小组件…组件化开发 根组件:
1. 组件化:一个页面可以拆分成一个个组件每个组件有着自己独立的结构、样式、行为. 好处:便于维护利于复用-提升开发效率 组件分类: 普通组件 , 根组件
2. 根组件:整个应用最上层的组件包裹所有普通小组件 App.vue文件(单文件组件) 的三个组成部分:
1. 语法高亮插件 2. 三部分组成 * template: 结构(有且只能一个根元素) * script: js逻辑 * style: 样式(可支持less,需要装包)
3. 让组件支持less 1. style标签langless 开启less功能 2. 装包: yarn add less less-loader 或 npm i less less-loader --save
templatediv classAppdiv classbox clickfn/div/div
/templatescript
// 导出的是当前组件的配置项
// 里面可以提供: data methods computed watch 生命周期八大钩子
export default {created() {console.log(我是created)},methods: {fn() {alert(你好)}}}
/scriptstyle langless
/* 让style支持less1. 给 style加上 langless2. 安装依赖包 less less-loadernpm i less less-loader -D (开发依赖:只在开发时使用)
*/
.App {width: 400px;height: 400px;background-color: pink;.box {width: 100px;height: 100px;background-color: skyblue;}
}
/style
