A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 旖旎醉秋光 初级黑马   /  2019-6-20 19:53  /  1015 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

# VUE组件

### 1.基本格式

```html
<body>
    <div id="app">
        <span>{{ name }}</span>
        <button @click="dianji">点我一下</button>
    </div>
</body>
<script>
    new Vue({
        #1.
        el:'#app',
        #2.
        data:{
            name:'python'
        },
        #3.
        methods: {
            dianji:function(){
                alert('弹窗一个')
            }
        },
    })
</script>
```

1. 绑定标签  被绑定的标签下面的元素都可以直接调用  #表示绑定id   .表示绑定class

2. 命名变量 之后要使用的变量都在这里命名出来,如果需要变量在html页面中显示出来,那么使用{{ 变量名 }}   格式

3. 方法  所有的方法都定义在此中  格式:

   函数名:funcation(参数){执行代码}

4. 基本绑定:

   - v-on:  绑定事件   可以使用@代替
   - v-bind:  用于设置HTML属性
   - v-model   关联属性   

### 2.组件的使用

#### 1.全局组件的使用

```js
    // 全局组件 第一个参数是组件名  第二个参数是一个{}
    //template属性是指定html标签内容
    Vue.component(
    'zujian_all',
    {
        template:'<div>这是一个组件</div>'
    }
    )
```

使用时:

```html
        <!-- 把组件名作为标签去调用 -->
        <zujian_all></zujian_all>
```

#### 2.局部组件的使用

1. 局部组件加载在全局组件中
2. 局部组件需要定义在全局组件的前面

定义:

```html
    // 局部组件
    var jubu_a={
        template:'<div>这是一个局部</div>'
    }
```

使用:

镶嵌在全局组件的template中

```js
template:'<div>这是一个组件  <jubu_a></jubu_a>  </div>',
```

全局组件中注册子组件

```js
        components:{
        zujian_a
        },
```

### 3.组件中数据的绑定

组件中数据的获取 不能从vue标签中的data数据获取,而是需要自己去重新定义

```js
Vue.component(
    'zujian_all',
    {
        template:'<div>这是一个组件  <jubu_a></jubu_a> {{quanju_var}}  </div>',
        // 将局部组件添加在全局中
        components:{
            jubu_a
        },
        //变量的定义
        data:function(){
            return {
                quanju_var:'全局变量',
            }
        }
    }
    )
```

1. 需要定义在component的下面

2. data函数的返回值中定义变量

3. 组件使用变量(data)定义为方法的原因:

   因为组件不可能只调用一次,定义为变量时,如果对数据做了更改,其他的也会发生变化,所以需要定义为方法,这样每个之间互不干扰

### 4.组件中的传值

#### 1.父组件往子主键传值

1. 在局部组件中添加接收

   ```
           props:['pos']
   ```

2. 局部标签模板中绑定该数据

   ```
   template:'<div>这是一个组件  <jubu_a v-bind:pos="age" ></jubu_a> {{quanju_var}}  </div>',
   ```

   最外层的是全局组件,   v-bind:pos="age"    表示使用pos变量绑定哪一个全局组件中的变量

3. 局部组件中调用{{pos}}  就可以获得全局组件中age的值

```
        template:'<div>这是一个局部 {{pos}} {{jubu_var}}</div>',
```

总体:

```js
<script>
    // 局部组件
    var jubu_a={
        template:'<div>这是一个局部 {{pos}} {{jubu_var}}</div>',
        data:function(){
            return {
                jubu_var:'局部变量'
            }
        },
        //接收父主键数据
        props:['pos'],
    }


    // 全局组件 第一个参数是组件名  第二个参数是一个{}
    //template属性是指定html标签内容
    Vue.component(
    'zujian_all',
    {
        template:'<div>这是一个组件  <jubu_a v-bind:pos="age" ></jubu_a> {{quanju_var}}  </div>',
        // 将局部组件添加在全局中
        components:{
            jubu_a
        },
        data:function(){
            return {
                quanju_var:'全局变量',
                age:10
            }
        }
    }
    )
    new Vue({
        el:'#app',
        data:{
            name:'python'
        },
        methods: {
            dianji:function(){
                alert('弹窗一个')
            }
        },
    })
</script>
```

#### 2.子组件往父组件传值

1. 子组件中定义方法methods   方法返回值为:

​                this.$emit(‘uploda’,this.需要传递的变量)

```js
        methods:{
            jubuB_fun:function(){
                return this.$emit('upload',this.jubuB_var)
            }
        }
```

2. 子组件绑定该方法   点击该按钮时触发事件  将变量上传

```js
template:'<div>这是一个局部组件2222 <button v-on:click="jubuB_fun"> 上传</button> </div>',

```

3. 全局变量中  template中的局部标签中绑定方法 用于接收数据

```js
        template:'<div>这是一个组件  <jubu_a v-bind:pos="age" ></jubu_a> {{quanju_var}}   <jubu_b v-on:upload="getdata" ></jubu_b>      </div>',

```

<jubu_b v-on:upload="getdata" ></jubu_b>为绑定的方法   当获得upload事件时执行getdata函数

4. 定义getdata函数

```js
        methods:{
            getdata:function(data){
                alert(data)
            }
        }
```

此处只做了弹出操作,也可以做其他的操作

### 5.单文件组件

#### 1.环境配置

单文件组件不能直接运行使用,需要依赖**node**项目对其进行解析打包,在使用之前需要先进行环境配置

1. 安装node版本管理工具nvm

   1. ```shell
      curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
      // 更新配置   更新配置需要在家目录下面   或者直接关闭终端 重新打开
      source .bashrc
      ```

2. 安装最新版本的node

   1. ```shell
      nvm install node
      ```

3. 更新npm的安装源

   1. ```shell
      npm config set registry https://registry.npm.taobao.org
      ```

安装完成了,接下来可以创建项目了

#### 项目创建

1. 创建项目目录

   1. ```shell
      mkdir project
      ```

2. 进入项目目录,初始化项目目录

   1. ```shell
      cd project
      npm init
      ```

   2. 初始化完成后在当前目录中会生成一个package.json文件,该文件指定项目所以依赖的模块

3. 配置package.json文件

   1. ```json
      {
          "name": "project",
          "version": "1.0.0",
          "description": "",
          "main": "index.js",
          "scripts": {
              "test": "echo \"Error: no test specified\" && exit 1",
              "build": "webpack"
          },
          "keywords": [],
          "author": "",
          "license": "ISC",
          "dependencies": {
              "babel-core": "^6.22.1",
              "babel-loader": "^7.1.1",
              "babel-preset-env": "^1.3.2",
              "babel-preset-stage-2": "^6.22.0",
              "babel-register": "^6.22.0",
              "css-loader": "^0.28.11",
              "element-ui": "^2.7.2",
              "file-loader": "^1.1.4",
              "lodash": "^4.17.4",
              "style-loader": "^0.23.1",
              "url-loader": "^1.1.2",
              "vue": "^2.6.10",
              "vue-loader": "^15.7.0",
              "vue-router": "^3.0.2",
              "vue-style-loader": "^3.0.1",
              "vue-template-compiler": "^2.5.2",
              "webpack": "^4.29.6",
              "webpack-cli": "^3.3.0",
              "webpack-dev-server": "^3.2.1"
          }
      }
      ```

   2. g该文件定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install 命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。

4. 安装项目依赖模块

   1. ```shell
      npm install
      ```

5. 创建项目文件 main.js ,index.html, App.vue

   1. ```shell
      touch index.html main.js App.vue.
      可以借助vscode编辑工具创建文件
      ```

   2. index.html文件时项目的首页文件

   3. main.js 文件定义vue及调用单文件组件,也是项目打包时所依赖的文件

   4. App.vue文件为单文件组件文件

6. 创建webpacke打包的配置文件webpack.config.js

   1. ```javascript
      const path = require('path')
      const VueLoaderPlugin = require('vue-loader/lib/plugin');
      
      module.exports = {
          entry: { main: "./main.js" }, //入口文件
          output: {
              filename: 'index.js', //出口文件名
              path: path.resolve(__dirname), //当前目录
              library: 'index' // 打包后模块的名称
          },
          plugins: [
              // make sure to include the plugin for the magic
              new VueLoaderPlugin()
          ],
          module: {
              rules: [ //定义不同类型的文件使用的loader
                  {
                      test: /\.vue$/,
                      loader: 'vue-loader'
                  },
                  {
                      test: /\.js$/,
                      loader: 'babel-loader'
                  },
                  {
                      test: /\.css$/,
                      loader: 'vue-style-loader',
                  },
                  {
                      test: /\.css$/,
                      loader: 'css-loader',
                      options: {
                          minimize: true //添加
                      }
                  },
                  {
                      test: /\.(eot|svg|ttf|woff|woff2)$/,
                      loader: 'file-loader'
                    },
              ]
          }
      }
      ```

   2. 在通过webpack对项目进行打包时,需要指定相应的配置文件,同过配置文件对单文件组件中的各个内容进行解析,生成一个index.js的压缩文件,在index.html只需引该文件就可进行页面加载渲染

目录创建完成后结构如下

![1560878624279](assets/1560878624279.png)

#### 2.基本流程

##### 1.html页面

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 1. 定义要用来作为模块的标签 -->
    <div id="app">
        <!-- 7.这个是mian.js中render渲染后的app  这个时候就可以使用组件封装的内容了 -->
        <!-- 8.内容指定在App.vue中 -->
        <App></App>
    </div>
    <!-- 2.引入js文件  -->
    <!-- <script src="./main.js"></script> -->
    <!-- 9.引入打包好的js文件 -->
    <script src="./index.js"></script>
</body>

</html>
```

##### 2.main.js页面

```javascript
// 3.引入vue   这个vue来源是配置文件的包(note_model)  指定模块的名字叫Vue
import Vue from 'vue'
// 5.导入组件  名字为App
import App from './App.vue'


// 4. 创建vue对象  为id=app的标签
new Vue({
    el:'#app',
    // 6.调用app.vue   使用这个方法进行渲染操作
    render:function(create){
        // 对app进行渲染操作 结果返回给index
        return create(App)
    }
})
```

##### 3.App.vue界面

```vue
<template>
<!-- html页面内容 -->
    <div> 单文件组件</div>
</template>


<script>
// 当前页面的js代码
    //  让其他文件可以导入这个js代码 export default  没有这个的话就不能引用
export default {
   
}
</script>


<style>
/* css样式 */


</style>

```

流程:

1. html中文件中定义好需要作为vue模块的文件,设置导入文件为mian.js

2. main.js中导入需要使用的模块, import Vue  from ‘vue’ vue是配置环境中的vue

   ![1561015449647](assets/1561015449647.png)

3. main.js中创建

##### 4.配置完成后,可以打包js文件了

```bash
$ npm run build
```

#### 3.多个单文件组件的使用

###### 1.嵌套方式

1. 在project目录下创建components文件夹,然后将所有子组件放入components文件夹下

2. 文件组件都以vue后缀命名

   ![1560941709889](assets/1560941709889.png)

3. 全局组件中导入单文件组件

   1. 单文件组件导入嵌套方法第一步  导入单文件组件(全局组件script中)

      ```vue
      <script>
      // 单文件组件导入嵌套方法第一步  导入单文件组件
      import Child1 from './components/Child1.vue'
      import Child2 from './components/Child2.vue'
      ```

   2. *单文件组件导入嵌套方法第二步  单文件组件添加到全局组件中(接着上面的代码继续书写

      ```vue
      // 当前页面的js代码
      export default {
          // 单文件组件导入嵌套方法第二步  单文件组件添加到全局组件中
          components:{
              Child1,
              Child2
          }
      }
      </script>
      ```

   3. *单文件组件导入嵌套方法第三步  全局组件中使用单文件组件

      ```vue
      <template>
      <!-- html页面内容 -->
          <div> 单文件组件
                  <!-- // 单文件组件导入嵌套方法第三步  全局组件中使用单文件组件 -->
              <Child1></Child1>
              <Child2></Child2>
          </div>
      </template>
      ```

###### 2.路由分发方式

1. 新建路由文件  js文件

   ![1561027364893](assets/1561027364893.png)

2. 导入模块   vue   router  单组件文件

   ```
   import Vue from 'vue'
   import Router from 'vue-router'
   ```

3. 使用路由   Vue.use(Router--路由导入的名称)

   ```
   Vue.use(Router)
   ```

4. 指定路由规则

   ```hs
   export default new Router({
   匹配规则
       routes:[
           {
               path:'/'  路径
               component:  组件名
           }
       ]
   })
   export default new Router(
       {
           path:'/',
           component:Child1
       },
       {
           path:'two',
           component:Child2
       }
   )
   ```

5. mian.js  导入路由文件

   ```
   import router from './router/router.js'
   ```

   - **必须使用这个变量名 不能修改**

6. 路由文件添加到vue对象中

   ![1561029293091](assets/1561029293091.png)

7. 主组件App.vue添加注册路由

   ![1561027602345](assets/1561027602345.png)

## 6.Elenment-ui的使用

[element官网](https://element.eleme.cn/#/zh-CN)

1. 单文件组件直接复制需要的即可

- 注意需要将所有的代码装在一个div中

2. main中使用引入element-ui的模块

   ```js
   import Vue from 'vue'
   import App from './App.vue'
   import router from './router/router.js'
   // 引入ElementUI
   import ElementUI from 'element-ui'
   // 引入css
   import 'element-ui/lib/theme-chalk/index.css'
   // 使用ElementUI
   Vue.use(ElementUI)
   
   new Vue({
       el:'#app',
       router,
       render:function(creater){
           return creater(App)
       }
   })
   ```

   3.路由匹配

   常规的路由匹配而已

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马