Vue——四

zoukankan html css js c++ java

Vue——四
12 组件化开发

组件（component）是对功能，页面的封装。很多网页，用同样的功能，页面，可以调用相同的组件而不用重复的写代码。将 HTML，css，JavaScript封装为一个整体，称为组件。

vue组件，有两种，默认组件（全局组件）和单文件组件。

使用组件注意：

首先，组件标签，要在一个被Vue实例化的标签里，然后，就可以使用自定义Vue组件了

默认组件
```
<div id="app">
    <addnum></addnum>
    <addnum></addnum>
    <addnum></addnum>
    <addnum></addnum>
    <addnum></addnum>
</div>

<script>
    Vue.component("addnum",{
        template:'<div><input type="text" v-model="num"><button @click="num+=1">点击</button></div>',
        data: function(){
            // 写在这里的数据只有当前组件可以使用
            return {
                num:1,
            }
        }
    });


    var vm = new Vue({
        el:"#app",
        // 这里写的数据是全局公用的，整个文件共享
        data:{

        }
    })
</script>
```
13 Vue自动化工具（Vue-cli）

Vue自动化工具Vue-cli，单文件组件是运行在这个工具中的。

官网：https://cli.vuejs.org/zh/

使用 Vue-cli 要先装 Node.js:

什么是Node.js

:https://mp.weixin.qq.com/s?src=11&timestamp=1592549159&ver=2409&signature=RMOElLtvz8Hiih1u-CU3mQoO7MJ4uAVo5H1i77SnTE4yPgCzHkknHDdD9zYZmbvuDNfNfCS-9OKvZ*B3BWHb7yKhPjEPMHYAQkvjKDVVTQNJKcRpGHgHX2PLARJfJt&new=1

Node.js 8.9 或更高版本 (推荐 8.11.0+)

cnpm : 淘宝的镜像，因为npm的源文件服务器在海外，所以下载的话相对比较慢，使用了cnpm就会加速下载，就比如pip在不修改安装源的话也是从国外下载，cnpm就相当于pip采用了豆瓣或者清华的镜像，下载速度比较快。

Nvm : node版本管理工具，也就是说专门管理安装node的各种版本的。

nvm工具的下载和安装： https://www.jianshu.com/p/d0e0935b150a

https://www.jianshu.com/p/622ad36ee020

安装记录:

打开:https://github.com/coreybutler/nvm-windows/releases

安装完成以后,先查看环境变量是否设置好了.

常用的nvm命令

nvm list # 列出目前在nvm里面安装的所有node版本
nvm install node版本号 # 安装指定版本的node.js
nvm uninstall node版本号 # 卸载指定版本的node.js
nvm use node版本号 # 切换当前使用的node.js版本

如果使用nvm工具，则直接可以不用自己手动下载，如果使用nvm下载安装 node的npm比较慢的时候，可以修改nvm的配置文件(在安装根目录下)
```
# settings.txt
root: C:	ool
vm    [这里的目录地址是安装nvm时自己设置的地址,要根据实际修改]
path: C:	ool
odejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/
```
安装node.js

Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言，后端语言和前端语言的区别：
- 运行环境：后端语言一般运行在服务器端，前端语言运行在客户端的浏览器上
- 功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件，不能读写数据库。
我们一般安装LTS(长线支持版本 Long-Time Support)：

下载地址：https://nodejs.org/en/download/【上面已经安装了nvm，那么这里不用手动安装了】

node.js的版本有两大分支：

官方发布的node.js版本：0.xx.xx 这种版本号就是官方发布的版本

社区发布的node.js版本：xx.xx.x 就是社区开发的版本

Node.js如果安装成功，可以查看Node.js的版本,在终端输入如下命令：
```
node -v
```
npm

在安装node.js完成后，在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。
```
npm install -g 包名              # 安装模块   -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list                        # 查看当前目录下已安装的node包
npm view 包名 engines            # 查看包所依赖的Node的版本 
npm outdated                    # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 卸载node包
npm 命令 -h                      # 查看指定命令的帮助文档
```
安装Vue-cli
```
npm install -g vue-cli
```
如果安装速度过慢，一直超时，可以考虑切换npm镜像源：http://npm.taobao.org/

14 使用Vue-cli初始化创建前端项目

1 生成项目目录

使用vue自动化工具可以快速搭建单页应用项目目录。

该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
```
// 生成一个基于 webpack 模板的新项目  首先要切换到 项目目录下创建项目
vue init webpack 项目目录名
例如：
vue init webpack myproject    // webpack 是前端比较流行的一个自动化开发工具。

Project name myproject
Project description A Vue.js project
Author wl
Vue build standalone       // 第一项：编译，运行快；第二项：不编译
Install vue-router? No               // 是否安装vue的路由插件；一个页面不需要
Use ESLint to lint your code? No     // use ESLint 代码检测工具,检测ES6语法
Set up unit tests No                 
Setup e2e tests with Nightwatch? No   // e2e  nigthwatch都是前端的代码测试工具
Should we run `npm install` for you after the project has been created? (recommended) npm

// 启动开发服务器 ctrl+c 停止服务
cd myproject
npm run dev           # 运行这个命令就可以启动node提供的测试http服务器
可以访问网址，查看主页效果
```
2 项目目录结构

src 主开发目录，要开发的单文件组件全部在这个目录下的components目录下

static 静态资源目录，所有的css，js文件放在这个文件夹

dist项目打包发布文件夹，最后要上线单文件项目文件都在这个文件夹中[后面打包项目,让项目中的vue组件经过编译变成js 代码以后,dist就出现了]

node_modules目录是node的包目录，

config是配置目录，

build是项目打包时依赖的目录

src/router 路由,后面需要我们在使用Router路由的时候,自己声明.

3 项目执行流程图

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

4 单文件组件的使用

组件有两种：普通组件、单文件组件

普通组件的缺点：
1. html代码是作为js的字符串进行编写，所以组装和开发的时候不易理解，而且没有高亮效果。
2. 普通组件用在小项目中非常合适，但是复杂的大项目中，如果把更多的组件放在html文件中，那么维护成本就会变得非常昂贵。
3. 普通组件只是整合了js和html，但是css代码被剥离出去了。使用的时候的时候不好处理。
将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，比如："Home.vue"。
1. 创建组件
在组件中编辑三个标签，编写视图、vm对象和css样式代码。

不需要 new Vue，我们是在vm的内部增加组件；各种方法和Vue相同，data 是方法的形式。

1 template 编写html代码的地方
```
<template>
  <div id="Home">
    <span @click="num--" class="sub">-</span>
    <input type="text" size="1" v-model="num">
    <span @click="num++" class="add">+</span>
  </div>
</template>
```
2 script编写vue.js代码
```
<script>
  export default {
    name:"Home",
    data: function(){
      return {
        num:0,
      }
    }
  }
</script>
```
3 style编写当前组件的样式代码
```
<style scoped>
  .sub,.add{
    border: 1px solid red;
    padding: 4px 7px;
  }
</style>
```
4 案例-点击加减数字

创建Homes.vue
```
<template>
  <div class="add_num">
      <span @click="num++">+</span>
      <input type="text" size="2" v-model="num">
      <span @click="num--">-</span>
  </div>
</template>

<script>
  export default{
    name:"AddNum",
    data: function(){
      return {
        num: 0,
      }
    }
  }
</script>

<style scoped>
   .add_num{
      font-size: 32px;
   }
</style>
```
在App.vue组件中调用上面的组件
```
<template>
  <div id="Home">
    <span @click="num--" class="sub">-</span>
    <input type="text" size="1" v-model="num">
    <span @click="num++" class="add">+</span>
  </div>
</template>


<script>
  export default {
    name:"Home",
    data: function(){
      return {
        num:0,
      }
    }
  }
</script>

<style scoped>
  .sub,.add{
    border: 1px solid red;
    padding: 4px 7px;
  }
</style>
```
在开发vue项目之前，需要手动把 App.vue的HelloWorld组件代码以及默认的css样式，清除。

单文件组件名：驼峰式

template下：有且只有一个大标签，不能有两个并列的div等标签。

1 导入组件

Import ... from 相对路径

2 注册组件

export default{ // 抛出对象，可以让其他文件js导入

name:'App',

components:{Home,}

}

3 标签内部调用组件名

或

css：默认文件内全局，下面保证css 在各个组件相互独立最好不要写App.vue中

settings = ...;

export default settings;

export default {

url:'网址'

};

imoprt 别名 from './settings';

dev 表示开发服务器的意思

在vue中导包时，如果文件后缀是js或者vue结尾的可以不用加后缀。
```
import axios from '../../static/axios'
```
for in 索引或属性名称

for of 成员或属性值

change ， blur ， keyup

2.组件的嵌套

在开发Vue项目时，页面算一个大组件，其中使用了子组件。

在components文件夹下，有较大的组件，可以常见一个文件夹，来存放它的子组件。

![1552363669256](F:/新建文件夹 (2)/assets/1552363669256.png)

组件中，代码必须在一个标签中，不能出现两个并列的顶级标签

导入组件，注册组件，使用组件就是组件的嵌套：在父组件中使用了子组件。

3.传递数据

父组件传数据给子组件

1 父组件，调用子组件的标签中，使用属性值=父组件数据的方式，向下传递数据。
```
<Menu :mynum="num" title="home里面写的数据"/>

# 上面表示在父组件调用Menu子组件的时候传递了2个数据：
  如果要传递变量[变量可以各种类型的数据]，属性名左边必须加上冒号:同时，属性名是自定义的，会在子组件中使用。
  如果要传递普通字符串数据，则不需要加上冒号:
```
2 子组件，接收父组件的数据，在vm组件对象中，使用 props 属性接收。
```
<script>
  export default {
    name:"Menu",
    props:["mynum","title"],
    data: function(){
      return {
        msg:"这是Menu组件里面的菜单",
      }
    }
  }
</script>

// 上面 props属性中表示接受了两个数据。
```
3 子组件，使用数据。
```
<template>
    <div id="menu">
      <span>{{msg}}，{{title}}</span>
      <div>hello，{{mynum}}</div>
  </div>
</template>
```
使用父组件传递数据给子组件时, 注意一下几点:
1. 传递数据是变量,则需要在属性左边添加冒号.
  
  传递数据是变量,这种数据称之为"动态数据传递"
  
  传递数据不是变量,这种数据称之为"静态数据传递"
2. 父组件中修改了数据,在子组件中会被同步修改,但是,子组件中的数据修改了,不会影响到父组件中的数据.
  
  这种情况,在开发时,也被称为"单向数据流"
子组件传数据给父组件

1 子组件，通过 this.$emit() 调用父组件定义的事件，@123
```
watch:{
          fnum(){
            console.log(this.fnum);

// this.$emit("父元素的自定义事件","要传递的数据"); 可以传多个参数
// 通过this.$emit()方法，子组件可以把数据传递给父组件

            this.$emit("postparentdata",this.fnum);
          }
        }
```
2 父组件，调用子组件的标签中，声明一个与子组件 this.$emit('自定义事件') 对应的事件
```
<template>
    <div>

      <Son @postparentdata="getsondata"></Son>
    </div>

</template>
```
3 父组件，声明一个自定义事件 = 自定义方法
```
methods:{
          getsondata(message){
            console.log("父组件"+message);
            this.num = message;
          }
```
15 在组件中使用axios获取数据

默认情况下，Vue项目不支持axios，需要下载安装。

项目根目录使用命令安装 axios：
```
npm install axios
```
接着在main.js文件中，

导入axios并把axios对象挂载到vue属性中多为一个子对象，这样我们才能在组件中使用。
```
// 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'
import App from './App' // 这里表示从别的目录下导入 单文件组件

import axios from 'axios'; // 从node_modules目录中导入包

Vue.config.productionTip = false

Vue.prototype.$axios = axios; // 把对象挂载vue中，$axios 是 axios 使用时的别名

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});
```
1 在组建中使用axios获取数据
```
<script>
  export default{
	。。。
	methods:{
      get_data:function(){
         // 使用axios请求数据
        this.$axios.get("http://wthrcdn.etouch.cn/weather_mini?city=深圳")
.then((response)=>{
            console.log(response);
        })
.catch(error=>{
            console.log(error);
        })
      }
    }
  }
</script>
```
使用的时候，因为本质上来说，我们还是原来的axios，所以也会收到同源策略的影响。
查看全文

相关阅读:
开启text汇聚排序
 sshpass安装使用
 pinpoint初始化hbase脚本报错
 ORA-19606: Cannot copy or restore to snapshot control file
standby_file_management参数为MANUAL导致添加数据文件错误
 dataguard从库移动数据文件
 redis恢复(aof)
redis集群部署+节点端口修改+数据恢复
 oracle传输表空间相关
 dataguard主库删除归档日志后从库恢复的方法

原文地址：https://www.cnblogs.com/pythonwl/p/13164581.html

12 组件化开发

默认组件

13 Vue自动化工具（Vue-cli）

安装node.js

npm

安装Vue-cli

14 使用Vue-cli初始化创建前端项目

1 生成项目目录

2 项目目录结构

3 项目执行流程图

4 单文件组件的使用

创建组件

1 template 编写html代码的地方

2 script编写vue.js代码

3 style编写当前组件的样式代码

4 案例-点击加减数字

2.组件的嵌套

3.传递数据

父组件 传数据给 子组件

子组件 传数据给 父组件

15 在组件中使用axios获取数据

1 在组建中使用axios获取数据

父组件传数据给子组件

子组件传数据给父组件