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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 囧囧微风 初级黑马   /  2019-6-20 19:59  /  1043 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

## 组件中数据的绑定

在vue中数据通过data属性进行绑定,如下

```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>
    <div id="app">

        {{name}}
    </div>
<script>
    new Vue({
        el: '#app',
        data: {
            name:'python'
        }
    })

    </script>
</body>
</html>
```

在组件中进行数据绑定虽然也是通过data属性,但是对应的值不再是{}json形式,而是一个函数方法。如下

```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>

    <div id="app">
        <zujian_all></zujian_all>
    </div>

<script>
    // 局部组件注册,定义局部组件
    var zujian_a={
        template:'<div>局部组件1</div>',
     };
    // 全局组件
    Vue.component(
        'zujian_all',
        {   // 在全局中使用绑定的数据 {{name}}
            template:'<div>全局组件  <zujian_a></zujian_a> {{name}} </div>',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a,
            },
            // data属性指定绑定的数据内容,可以在当前的组件中进行使用
            data:function(){
                return {name:'python'}
            }
           }
    )

    new Vue({
        el: '#app',
    })
    </script>
</body>
</html>
```

## VUE组件传值

父组件给子组件传值,组件中通过**props**属性传递数据,如下:

```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>

    <div id="app">
        <zujian_all></zujian_all>
    </div>

<script>
    // 局部组件注册,定义局部组件
    var zujian_a={
        template:'<div>局部组件1 {{pos}} </div>',
        // 在子组件中通过props属性定义接受值的名称
        props:['pos']
     };

    // 全局组件
    Vue.component(
        'zujian_all',
        {   // 在全局组件中调用子组件时,通过v-bind指定子组件中pos接受父组件中的哪个值
            template:'<div>全局组件  <zujian_a v-bind:pos="name"></zujian_a>  </div>',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a,
            },
            // data属性指定绑定的数据内容,可以在当前的组件中进行使用
            data:function(){
                return {name:'python'}
            }
           }
    )

    new Vue({
        el: '#app',
    })
    </script>
</body>
</html>
```

子组件给父组件传值,通过$emi将数据传递个父组件

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello Ming</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

    <div id='app'>
        <zujian_all></zujian_all>
    </div>

    <script>
        var zujian_a={
            template:'<div>  局部组件A  <button v-on:click="isupload"> 上传</button>  </div>',
            methods:{
                isupload:function(){
                    this.$emit('isListen','hello') // 子元素上的点击事件成功后,通过 $emit 将事件和数据传递给父组件
                }
            }
        }

        Vue.component('zujian_all',{

            template:'<div>  全局组件   <zujian_a v-on:isListen="isShow"></zujian_a> </div>',
            components:{
                zujian_a
            },
            methods:{
                isShow:function(data){
                    alert(data)  //data参数接受子组件传递的值
                }
            }
        })

        new Vue({
            el:'#app'
        })
    </script>
</body>
</html>
```

# 单文件组件

将一个组件相关的html结构,css样式,以及交互的JavaScript代码从html文件中剥离出来,合成一个文件,这种文件就是单文件组件,相当于一个组件具有了结构、表现和行为的完整功能,方便组件之间随意组合以及组件的重用,这种文件的扩展名为“.vue”,比如:"breadcrumb.vue"。

```html
// 使用template标签来定义html部分
<template>
    <div :class="{crumb:true,hot:isHot}" @click="isHot=!isHot">
        当前位置是:{{ pos }}
    </div>
</template>

// javascript要写成模块导出的形式:
<script>
    export default{
        props:['pos'],
        data:function(){
            return {
                isHot:false               
            }
        }
    }
</script>

// 样式中如果有scope关键字,表示这些样式是组件局部的,不会影响其他元素
<style scoped>
.crumb{
    width:90%;
    line-height:50px;
    margin:0px auto;
    border-bottom:1px solid #ddd;
}
.hot{
    color:red;
    font-weight:bold;
    text-indent:10px;
}
</style>
```

# 环境配置

单文件组件不能直接运行使用,需要依赖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
      ```

4. 创建项目目录

   1. ```shell
      mkdir project
      ```

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

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

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

6. 配置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 命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。

7. 安装项目依赖模块

   1. ```shell
      npm install
      ```

8. 创建项目文件 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文件为单文件组件文件

9. 创建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只需引该文件就可进行页面加载渲染

目录创建完成后结构如下

![Snip20190404_1](../src/Snip20190404_1.png)![img](file:///D:/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/day05-vue%E7%BB%84%E4%BB%B6/data/Vue%E7%BB%84%E4%BB%B6/src/Snip20190404_1.png)

## 单文件组件的使用

项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码

### index.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">
    <title>Document</title>
</head>
<body>
    <div id='app'><App></App></div>

    <!-- 引入打包后的index.js文件。该文件的名字不是固定名字,可以在webpack.config.js的出口文件中指定 -->
    <script src="./index.js"></script>
</body>
</html>
```

### main.js

```javascript
// 引入vue和App组件
import Vue from 'vue'
import App from './App.vue'

new Vue({
    el:'#app',
    // 渲染App组件中的内容,返回给index.html文件使用
    render:function(creater){
        return creater(App)
    }
})
```

### App.vue

```html
<template>
    <!-- 指定html显示内容 -->
    <div>单文件组件</div>
</template>


<script>
    // 指定js内容
// export default {

// }
</script>

<style>
/* 指定css内容 */
</style>
```

### 项目打包

文件编写完成后并不能直接运行index.html产生效果,需要对项目进行打包生成一个渲染后的index.js文件进行使用

```shell
npm run build
```

打包后会在当前目录下生成一个index.js 文件,在index.html中引用该文件,运行index.html文件看到效果

### 项目调试运行

每次我们需要看到组件效果需要手动生成一个index.js文件,这是我们可以借助webpack-dev-server自动运行我们的代码

```shell
// 在项目目录下,执行下面指令可以开启前端服务,自动运行前端代码
./node_modules/.bin/webpack-dev-server
```

### 多个单文件组件使用

在project目录下创建components文件夹,然后将所有子组件放入components文件夹下![Snip20190404_2](../src/Snip20190404_2.png)

### 1、多组件嵌套使用

### Child1.vue

```html
<template>
    <div>子组件1</div>
</template>

<script>
// export default {

// }
</script>

<style>

</style>
```

## Child2.vue

```html
<template>
    <div>子组件2</div>
</template>

<script>
// export default {

// }
</script>

<style>

</style>
```

### App.vue

```html
<template>
    <div>
        单文件组件
        <!-- 调用子组件 -->
        <Child1></Child1>
        <Child2></Child2>
    </div>

</template>


<script>
    //导入components目录下的子文件 Child1为指定的组件名,可以任意命名,不一定按照文件名
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'

export default {
    // 将子组件添加到App.vue中
    components:{
        Child1,
        Child2,

    }
}
</script>

<style>

</style>
```

### 2、多组件路由使用

使用路由形式将多个单文件组件组合在一起

1. 定义路由目录和路由文件

   ```shell
   mkdir router
   touch router.js
   ```

2. 编写路由文件router.js

   1. ```javascript
      import Vue from 'vue'
      // 导入路由插件
      import Router from 'vue-router'
      import Child1 from '../components/Child1.vue'
      import Child2 from '../components/Child2.vue'
      // 在vue中使用插件
      Vue.use(Router)
      export default new Router({
          // 定义匹配规则
         routes:[
             {
                 path:'/',  // 匹配根路径/,加载Chiled1中的内容
                 component:Child1
             },
             {
                 path:'/child2',
                 component:Child2
             }
         ]
      })
      ```

3. 在main.js中使用路由

   1. ```javascript
      import Vue from 'vue'
      import App from './App.vue'
      //导入定义好的路由
      import router from './router/router.js'
      
      new Vue({
          el:'#app',
          router,  //使用路由
          render:function(creater){
              return creater(App)
          }
      })
      ```

4. 在App.vue中指定路由标签

   1. ```html
      <template>
          <div>
              单文件组件
               <!-- 记载路由标签 -->
              <router-view></router-view>
          </div>
      
      </template>
      
      <script>
      </script>
      
      <style>
      </style>
      ```

## Element-ui

单文件组件就像是一个个封装好的页面样板,我们可一把这些样板组合在一起形成一个完整的页面。就像QQ空间装扮一样,将个个样板放入QQ空间页面中组成自己风格的页面。而Element-ui就将我们需要的样式封装成单文件组件,我们可以直接集成到我们的项目中。

1. 在main.js中将emelent-ui引入到项目中

   1. ```javascript
      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)
          }
      })
      ```

2. 在子组件中使用element-ui的代码,

   1. ```html
      <template>
      <div>
        <div class="block">
          <span class="demonstration">默认</span>
          <el-slider v-model="value1"></el-slider>
        </div>
        <div class="block">
          <span class="demonstration">自定义初始值</span>
          <el-slider v-model="value2"></el-slider>
        </div>
        <div class="block">
          <span class="demonstration">隐藏 Tooltip</span>
          <el-slider v-model="value3" :show-tooltip="false"></el-slider>
        </div>
        <div class="block">
          <span class="demonstration">格式化 Tooltip</span>
          <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
        </div>
        <div class="block">
          <span class="demonstration">禁用</span>
          <el-slider v-model="value5" disabled></el-slider>
        </div>
      </div>
      </template>
      
      <script>
        export default {
          data() {
            return {
              value1: 0,
              value2: 50,
              value3: 36,
              value4: 48,
              value5: 42
            }
          },
          methods: {
            formatTooltip(val) {
              return val / 100;
            }
          }
        }
      </script>
      ```

Emelent的其他效果样式可以参考官方网站:

<http://element-cn.eleme.io/#/zh-CN/component/progress>

## Vue-cli的使用

我们的项目文件都是手动创建出来,在实际开发中我们可以借助vue-cli创建出我们的所有项目文件

1. 全局安装vue-cli

   1. ```shell
      npm install --global vue-cli
      ```

2. 项目创建

   1. ```shell
      vue init webpack 项目名
      ```

3. 运行调试项目

   1. ```shell
      // 进入项目目录下,执行下面指令
      npm run dev
      ```

4. 项目打包

   1. ```shell
      npm run build
      ```

##### 项目目录结构

![Snip20190404_5](../src/Snip20190404_5.png)![img](file:///D:/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/day05-vue%E7%BB%84%E4%BB%B6/data/Vue%E7%BB%84%E4%BB%B6/src/Snip20190404_5.png)

- 文件夹1(src),主开发目录,**要开发的单文件组件全部在这个目录下**
- 文件夹2(static),静态资源目录,所有的css,js文件放在这个文件夹
- 文件夹3(components),组件目录,vue格式的单文件组件都存在这个目录中
- 文件夹4(router),路由目录,在此文件夹中配置组件路由

还有node_modules目录是node的包目录,config是配置目录,build是项目打包时依赖的目录。

##### 页面结构说明

![img](file:///D:/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/day05-vue%E7%BB%84%E4%BB%B6/data/Vue%E7%BB%84%E4%BB%B6/src/Snip20190404_6.png)

整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。

### 01更新谷歌刘浏览器

安装chrome步骤

1.安装chrome浏览器

- 打开终端,  输入   'sudo dpkg -i google-chrome-stable_current_amd64.deb'
- 初次安装如果出现 Errors where encountered while processing:google-chrome-stable 这个错误,就需要安装google-chrome-stable
- apt-get install google-chrome-stable
- 如果安装了google-chrome-stable后,还报错,错误信息为: Unmet dependencies. "Try apt-get -f install" with no packages (or specify ....)

i. 这个时候按照提示执行

0 个回复

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