vue学习(二):组件化开发
2018-01-08 10:36
525 查看
首先看看vuedemo的入口函数main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' // 引入vue
import App from './App' // 引入src目录下的App.vue
// import router from './router' 为了方便观察,先把这个路由去掉
Vue.config.productionTip = false // 来关闭生产模式下给出的提示
/* eslint-disable no-new */
new Vue({
el: '#app', // App.vue中的id=app的div
// router,
template: '<App/>', // 这里是把'./App'的内容加到这个模板中
components: { App } // 这里的App等于App: App ,名称要和模板名称一样,上面的template中写的App,这里也要是App
})这里我们可以看出main.js中是去引入了App.vue这个组件了,也就是说App.vue就相当于我们的首页了。下面试一下新增一个组件,我们在src/components下新建一个目录header,在header下新建一个main_header.vue.
在main_header.vue中我们就写必须要的代码。
<template>
<div>vue的组件化开发</div>
</template>
<script>
export default {
name: 'main_header'
}
</script>
<style>
</style>
我们再来看看App.vue该怎么去引入这个mian_header.vue
看看效果
在写代码的时候要注意 ES6的语法 由于是用ESLint检查代码的,所以也要了解一下
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' // 引入vue
import App from './App' // 引入src目录下的App.vue
// import router from './router' 为了方便观察,先把这个路由去掉
Vue.config.productionTip = false // 来关闭生产模式下给出的提示
/* eslint-disable no-new */
new Vue({
el: '#app', // App.vue中的id=app的div
// router,
template: '<App/>', // 这里是把'./App'的内容加到这个模板中
components: { App } // 这里的App等于App: App ,名称要和模板名称一样,上面的template中写的App,这里也要是App
})这里我们可以看出main.js中是去引入了App.vue这个组件了,也就是说App.vue就相当于我们的首页了。下面试一下新增一个组件,我们在src/components下新建一个目录header,在header下新建一个main_header.vue.
在main_header.vue中我们就写必须要的代码。
<template>
<div>vue的组件化开发</div>
</template>
<script>
export default {
name: 'main_header'
}
</script>
<style>
</style>
我们再来看看App.vue该怎么去引入这个mian_header.vue
看看效果
在写代码的时候要注意 ES6的语法 由于是用ESLint检查代码的,所以也要了解一下
相关文章推荐
- vue组件化开发初体验-示例vue-loader-example学习记录
- 360奇舞团钟恒:选用Vue.js进行组件化开发,我们遇到了哪些坑?
- vue开发学习---2
- vue+swiper实现组件化开发的实例代码
- vue组件化开发-vuex状态管理库
- Vue学习笔记一:使用vue-cli 创建开发环境
- 【vue】vue组件化开发初体验-示例vue-loader-example学习记录
- 【vue】vue组件化开发初体验-示例vue-loader-example学习记录
- 详解vue组件化开发-vuex状态管理库
- 学习开发vue.js简单步骤
- vue.js原生组件化开发——父子组件
- Vue-router 类似Vuex实现组件化开发的示例
- AngularJs学习笔记——ui路由(多层嵌套/传参)和组件化结合的开发模式
- vue+swiper实现组件化开发
- Vue项目组件化工程开发实践方案
- 【vue开发 环境搭建】从 vuejs环境搭建到组件化编程----Hello World!
- vue.js原生组件化开发(一)——组件开发基础
- 从零开始前端学习[24]:css的高级属性(继承,重用,组件化的开发过程)
- Vue.js学习系列(二)---配置开发环境
- vue+webpack 组件化开发基本配置