标签：Vue cli components vue let template 组件 脚手架 data
1.组件
组件化和模块化
组件化:通常指的是样式（轮播图，tab，列表区域）
模块化:通过指的是效果(弹框)
组件:
定义：全局定义组件 每一个vue实例对象(可复用的vue实例)
命名规则:
1.采用驼峰方式命名，页面使用的时候需要把大写字母转为连字符+字母,目的为了方便调用
2.采用小写命名方式，直接在页面使用即可<vone></vone>
3.不能以现有的标签名作为组件名
命名规范：
组件中的data定义:1.data必须是方法 2.方法必须有返回值 3.返回值必须是对象类型
如果使用data中的数据:在组件中声明的数据需要在组件的模板中使用
组件中还可以有的配置项；data，methods，filter，computed，watch，生命周期的钩子函数....
// 局部定义 语法:components:{组件名称：{模板对象}}
new Vue({ el:'#app', data:{}, methods: { }, components:{ vTwo:{ template:'<h2>我是第二个组件</h2>' } } })// 全局定义组件 语法:Vue.component(组件名称,{模板对象})
Vue.component('vOne',{
template:'<div><div>我是第一个组件{{msg}}</div><p>我是段落</p></div>',
data(){
return {
msg:'abc'
}
}
})
2.template
组件中的模板对象：有且只能有一个根元素
template使用: 位置:放到body的结束标签上面,给当前的模板标签添加id，同时把id赋值给组件的template
<template id='temp1'>
<div>
<div>我是第一个组件{{msg}}</div>
<p>我是第一个组件的段落</p>
</div>
</template>
Vue.component('vOne',{
template:'#temp1',
data(){
return {
msg:'abc'
}
}
})
let vm = new Vue({
el:'#app',
data:{},
methods: {
},
components:{
vTwo:{
template:'<h2>我是第二个组件</h2>'
}
}
})
3.data
data为什么在组件中是函数方式定义?
目的是为了实现数据共享而数据互相不影响
注意点:
1.data必须函数 2 必须有返回值 3返回值必须是对象
<body> <div id="app"> <v-one></v-one> <hr> <v-one></v-one> <hr> <v-one></v-one> <v-two></v-two> </div> <template id="temp1"> <div> <div>{{number}}</div> <div><button @click = 'add'>点击累加</button></div> </div> </template> <template id="temp2"> <div> <h2>我是Two组件</h2> <v-inner></v-inner> </div> </template> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 总结:组件不能使用外部数据，同时外部数据也不能该组件的数据 // 为什么组件中的data必须是函数:实现数据共享而互相不影响 // 组件嵌套特点:子组件只能在父组件中使用 let vm = new Vue({ el: '#app', data: { num: 0 }, methods: { }, components:{ vOne:{ template:'#temp1', data(){ return { number:0 } }, methods: { add(){ this.number++ } }, }, vTwo:{ template:'#temp2', components:{ vInner:{ template:'<div>我是嵌套组件</div>' } } } }}) </script>
</html>
4.后台案例
原始代码参考:<body>
<div id="app">
<div>
<v-app></v-app>
</div>
</div>
<template id="temp">
<div class="box">
<v-header></v-header>
<v-main></v-main>
<v-footer></v-footer>
</div>
</template>
<template id="header">
<div class="header">
header
</div>
</template>
<template id="main">
<div class="main">
<v-left></v-left>
<v-right></v-right>
</div>
</template>
<template id="footer">
<div class="footer">
footer
</div>
</template>
<template id="left">
<div class="left">
left
</div>
</template>
<template id="right">
<div class="right">
right
</div>
</template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {},
components: {
vApp:{
template:'#temp',
components:{
vHeader:{
template:'#header'
},
vMain:{
template:'#main',
components:{
vLeft:{
template:'#left'
},
vRight:{
template:'#right'
}
}
},
vFooter:{
template:'#footer'
}
}
}
}
})
</script>
抽离代码参考：
<body>
<div id="app">
<div>
<v-app></v-app>
</div>
</div>
<template id="temp">
<div class="box">
<v-header></v-header>
<v-main></v-main>
<v-footer></v-footer>
</div>
</template>
<template id="header">
<div class="header">
header
</div>
</template>
<template id="main">
<div class="main">
<v-left></v-left>
<v-right></v-right>
</div>
</template>
<template id="footer">
<div class="footer">
footer
</div>
</template>
<template id="left">
<div class="left">
left
</div>
</template>
<template id="right">
<div class="right">
right
</div>
</template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vRight = {
template: '#right'
}
let vLeft = {
template: '#left'
}
let vHeader = {
template: '#header'
}
let vMain = {
template: '#main',
components: {
vLeft,
vRight
}
}
let vFooter = {
template: '#footer'
}
let vAPP = {
template: '#temp',
components: {
vHeader,
vMain,
vFooter
}
}
let vm = new Vue({
el: '#app',
data: {},
components: {
vApp
}
})
</script>
5.脚手架
1.全局安装webpack
npm install webpack -g2.全局安装vue-cli
npm install vue-cli -g(下面就是创建项目)
3.vue init webpack demo 项目名称为小写名字即可 这是创建vue2.0项目
4.cd demo 进入创建的文件中
5.npm run dev 启动项目
//淘宝镜像
npm i -g cnpm --registry=https://registry.npm.taobao.org
注意：当前文件夹中不能有vue.js文件，如果有安装脚手架会报错
项目安装
1.安装脚手架完成 2.清空工作 3.创建每一个组件(后台页面) -componets -header.vue -footer.vue -main.vueAPP.vue中
<template>
<div class="box">
<v-header></v-header>
<v-main></v-main>
<v-footer></v-footer>
</div>
</template>
<script>
import vHeader from './components/header'
import vMain from './components/main'
import vFooter from './components/footer'
export default {
components: {
vHeader,
vMain,
vFooter
}
}
</script>
<style scoped>
.box{
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
</style>
在main.js中引入静态资源
// 引入静态资源
import './assets/css/reset.css'
//创建公共组件
import vDel from './components/del.vue'
Vue.component('vDel',vDel)
标签：Vue,cli,components,vue,let,template,组件,脚手架,data 来源： https://www.cnblogs.com/hxmw/p/14248340.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。