Vue小tips-d04

1、组件

组件化：通常指的是样式（轮播图，tab，列表区域）

模块化：通常指的是效果(弹框)

组件：每一个vue实例对象(可复用的vue实例)

组件的定义以及使用：

• 组件：

　　　　1、全局定义组件，可复用的vue实例；2、局部定义

• 全局定义组件：

　　　　语法:Vue.component(组件名称,{模板对象})

• 组件命名规范：

1. 采用驼峰方式命名，页面使用的时候需要把大写字母转为连字符+字母，目的为了方便调用。
2. 采用小写命名方式，直接在页面使用即可<vone></vone>
3. 不能以现有的标签名作为组件名

• 组件中的data定义：

　　　　1、data必须是方法 2、方法必须有返回值  3、返回值必须是对象类型

• 如果使用data中的数据：

　　　　在组件中声明的数据需要在组件的模板中使用

• 组件中还可以有的配置项：

　　　　data，methods，filter，computed，watch，生命周期的钩子函数....

 

2、template

• 组件中的模板对象：

　　　　有且只能有一个根元素

• template使用：

　　　　位置放到body的结束标签上面，给当前的模板标签添加id，同时把id赋值给组件的template

 

3、data

 data为什么在组件中是函数方式定义?

 目的是为了实现数据共享而数据互相不影响

注意点： 

1. data必须是函数
2. 必须有返回值
3. 返回值必须是对象

 

4、脚手架

1、全局安装webpack

　　npm install webpack -g

2、全局安装vue-cli

　　npm install vue-cli -g

以上两步只需要安装一次

 

下面就是创建项目

3、vue init webpack mydemo

项目名称为小写名字即可，  这是创建vue2.0项目

4、cd mydemo

进入创建的文件中

5、npm run dev

启动项目

 

// 淘宝镜像

npm i -g cnpm --registry=https://registry.npm.taobao.org

 当前文件夹中不能有vue.js文件，如果有安装脚手架会报错

 

项目安装：

　　1、安装脚手架完成

　　2、清空工作

　　3、创建每一个组件（后台页面）

-components

　　-header.vue

　　-main.vue

　　-footer.vue

　　

APP.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)