网站开发公司业务员培训,东莞企业信息查询系统官网,站长工具seo综合查询下载,2345浏览器Vue开发的两种方式#xff1a; 核心包传统开发模式#xff1a;基于html/css/js文件#xff0c;直接引入核心包#xff0c;开发Vue工程化开发模式#xff1a;基于构建工具的环境中开发Vue 这里选择Vue cli脚手架 进行开发#xff0c;搜索教程自行下载。 组件化开发
一个页… Vue开发的两种方式 核心包传统开发模式基于html/css/js文件直接引入核心包开发Vue工程化开发模式基于构建工具的环境中开发Vue 这里选择Vue cli脚手架 进行开发搜索教程自行下载。 组件化开发
一个页面可以拆分成多个组件每个组件有自己独立的结构、样式、行为
便于维护利于复用能够提升开发效率
根组件
整个应用最上层的组件包裹所有普通组件 App.vue文件组成部分
template结构有且只能有一个根元素scriptjs逻辑styple样式可支持less需要安装包 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-loaderyarn add less less-loader -D (开发依赖)
*/
.App {width: 400px;height: 400px;background-color: pink;.box {width: 100px;height: 100px;background-color: skyblue;}
}
/style
安装less less-loader依赖包
终端 ctrlc 停止服务输入“yarn add less less-loader -D” 在本地输入yarn-v命令发现没安装yarn输入npm install -g yarn安装成功后
在vscode进入终端分别输入yarn add less less-loader -D和yarn serve 启动服务
在终端输入yarn serve再点开链接每次都需要启动服务 组件注册
输入尖括号选择第一个自动生成 局部注册
只能在注册的组件内使用
步骤
创建.vue文件三个组件使用在使用的组件内导入并注册 components:{组件名: 组件对象} 组件名规范大驼峰命名法 MyHeader.vue
templatediv classmy-headerheader/div
/templatescript
export default {}
/scriptstyle
.my-header{height: 100px;line-height:100px;text-align: center;font-size: 30px;background-color: coral;color:white;
}
/style
App.vue
templatediv classApp!-- 头部组件 --MyHeader/MyHeader!-- 主体组件 --MyMain/MyMain!-- 底部组件 --MyFooter/MyFooter/div
/templatescript
import MyHeader from ./components/MyHeader.vue
import MyMain from ./components/MyMain.vue
import MyFooter from ./components/MyFooter.vue
export default {components:{MyHeader: MyHeader,MyMain: MyMain,MyFooter: MyFooter}
}
/scriptstyle
.App {width: 600px;height: 700px;background-color: #87ceeb;margin: 0 auto;padding: 20px;
}
/style
全局注册
所有组件内部都能使用
步骤
创建.vue文件三个组成部分main.js中进行全局注册 Vue.component(组件名, 组件对象) MyButton.vue
templatebutton classmy-button通用按钮/button/templatescriptexport default {}/scriptstyle.my-button {height: 50px;line-height: 50px;padding: 0 20px;background-color: #3bae56;border-radius: 5px;color: white;border: none;vertical-align: middle;cursor: pointer;}/style
main.js
import Vue from vue
import App from ./App.vue
// 编写导入的代码往代码的顶部编写(规范)
import MyButton from ./components/MyButton
Vue.config.productionTip false// 进行全局注册 → 在所有的组件范围内都能直接使用
// Vue.component(组件名组件对象)
Vue.component(MyButton, MyButton)new Vue({render: (createElement) {return createElement(App)}
}).$mount(#app)
一般都用局部注册如果发现是通用组件再抽离到全局
