VUE组件化开发

一、概念

<script src="https://unpkg.com/vue/dist/vue.js"></script>

1、思想

• 整机通常由各个部件构成，各个部件实现特定的功能

• 利用这些模块，进行排列组合，就可以实现不同功能的机器设备。

**标准：**只有标准化，才能带来更大程度的互换性。
**分治：**每个模块可以实现各自独立的功能
**重用：**同一个功能模块，也可能被多次复用
**组合：**基于前三个特征而产生！各个模块组合起来成为一个新的产品。

二、语法

1、基础语法

（1）v-data

第一种写法：

data：{
	msg:"www"
}

第二种写法：组件化开发必须使用这种返回对象，否则报错

data(){
	return{
		msg:"www"
	}
}

<div id="app">
  <p>{{ msg }}p>
div>

<script>
new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue.js!'
  }
})
script>

（2）v-html

v-text同理

<div id="app">
    <div v-html="msg">div>
div>

<script>
new Vue({
  el: '#app',
  data: {
    msg: '
菜鸟教程
'
  }
})
script>

（3）v-model双向绑定

①作用

只作用于使用value的表单

在给input表单添加v-model属性时，默认会把value作为元素的属性，然后把’input’事件作为实时传递value的触发事件

v-model 只能应用在表单类元素（输入类元素)上

③v-model 的缺点

问题

在创建类似单选框的常见组件时，v-model就不好用了。

它需要的不是 value属性，而是 name属性(一次只能一个被选中)

解决方法

<input type="radio" name="{{use}}">

问题

用于非表单 控制台会报错

<h2 v-model:x="name">你好啊h2> 

（4）v-bind绑定属性

v-bind可以被缩写成 :

例：v-bind:value 等价于:value :id

绑定标签的属性

① v-bind:class

<div id="app">
    <div v-bind:class="{'active': isActive,'www':true}">div>
    <div v-bind:class="rr">div> 
    <div v-bind:class="lists">div>
    <div v-bind:class="maps">div>
div>

<script>
    new Vue({
        el: '#app',
        data: {
            isActive: true,
            rr: "te",
            lists: ['ww','qq','rr'],
            maps: {'ww':true,'qq':true}
        }
    })
script>

②v-bind:style

<div v-bind:style="{ color: myColor, fontSize: mySize + 'px' }">菜鸟教程div>
            myColor: '#992299',
            mySize: 30

<div v-bind:style="{ color: myColor, fontSize: mySize}">菜鸟教程div>
            myColor: '#992299',
            mySize: '30px'
  <div v-bind:style="styleObject">菜鸟教程div>
	    styleObject: {
      	      color: 'red',
                fontSize: "40px",
                border: "1px solid red",
                marginTop:"10px"
    	}

$event.target获取属性

获取当前元素的子元素可以获取id

下面这是一个全选功能，v-bind:checked的值是flag这个变量，@change(当字段改变时)所有被flag绑定的checkbox标签都会被选定或取消

<input type="checkbox" :checked="flag" @change="flag = $event.target.checked" >

（5）v-on事件

v-on可以被缩写成@

例：@click @change

①v-on:click

v-on:click `

<button v-on:click="demo">banniubutton>
<button      @click="demo">banniubutton>

（6）v-if

搭配v-else v-else-if

<div id="app">     
    <p v-if="seen ===1">你看见了1p> 
    <p v-else-if="seen ===2">你看见了2p>
    <p v-else>你看不见我p>
div>

（7）v-show

v-show 指令来根据条件展示元素：

（8）v-for

<div id="app">
    <div v-for="s in lists">
        {{s}}
    div><br>

    <span v-for="s in a">
        {{s}}
    span><br>

    <div v-for="s in users">
        {{s.name +' - ' + s.password}}
        {{s}}
    div>
div>

<script>
    new Vue({
        el: '#app',
        data: {
            lists:{
                ua1:'何昱飞',
                ua2:'王惠敏',
                ua3:'何小飞'
            }            ,
            a: [1,2,3,4,5],
            users: [
                {name:'何昱飞',password:'123456'},
                {name:'王惠敏',password:'123456'},
            ]
        }
    })
script>

可以提供第二个的参数为键名：

    <li v-for="(value, key) in object"> 

第三个参数为索引：

    <li v-for="(value, key, index) in object">

也可以循环整数

    <li v-for="n in 10">    

（9）watch监听

var vm = new Vue({
    el:"#app",
    data:{
        msg: 1
    },
    watch:{
        msg:function (new, old){
            alert("只要msg值被改变，就执行这个方法内容")
        }
    }
})

也可以下面这么写

 vm.$watch('msg', function(new, old) {
     alert("只要msg值被改变，就执行这个方法内容")
 });

（10）e.targer

获取调用此方法的标签。

注意此处的demo1不要加括号和参数

结果：

2、事件@click修饰符

（1）prevent阻止默认

阻止默认事件（常用

作用：在点击页面后通过方法控制不执行默认事件，比如跳转页面

方法1（此方法地址栏会显示跳转地址）

<a href="www.baidu.com" @click="demo1()">a>

<script>
export default {
  methods:{
    demo1(e){
      e.preventDefault(); //控制不执行默认事件
    }}}
script>

方法2**（推荐）**

<a href="www.baidu.com" @click.prevent="demo1()">123a>

（2）stop阻止冒泡

阻止事件冒泡（常用）

方法1（此方法地址栏会显示跳转地址）

<button @click.stop="demo1()">button>

<script>
export default {
  methods:{
    demo1(e){
      e.stopDefault(); //控制不执行默认事件
    }}}
script>

方法2**（推荐）**

<a href="www.baidu.com" @click="demo1()">a>

（3）once事件只一次

事件只触发一次（常用）

@click.once

（4）capture(不常用)

使用事件的捕获模式

正常情况是先捕获，再冒泡，冒泡的结果执行，再执行捕获。这个就是把它先执行捕获。

（5）self(不常用)

只有event.target是当前操作的元素是才触发事件

（6）passive(不常用)

事件的默认行为立即执行，无需等待事件回调执行完毕

三、组件

1、component-组件

方法1：
        Vue.component('hyf',{
		template:'
自定义的组件
'
        })
方法2：
        var Child = {
        	template: '
自定义组件!
'
        }
        new Vue({
        	el: '#app',
        	components:{
            	hyf: Child
       	 	}
	})
方法3：
        new Vue({
        	el: '#app',
        	components:{
			'hyf': {template: "
自定义的组件
"}
       	 	}
	}) 

①Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

<div id="app">
    <child heyufei="hello!">child>
div>

<script>
    // 创建根实例
    new Vue({
        el: '#app',
        components: {
            "child": {
                props: ['heyufei'],
                template: '{{ message }}'
            }
        }
    })
script>

四、nuxt

1、文件夹名称解析

assets资源目录

资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

components组件目录

组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

layouts布局目录

布局目录 layouts 用于组织应用的布局组件。

若无额外配置，该目录不能被重命名。

关于布局的更多信息

middleware中间件目录

middleware 目录用于存放应用的中间件。

关于中间件的更多信息

pages页面目录

页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

若无额外配置，该目录不能被重命名。

关于页面的更多信息

plugins插件目录

插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

关于插件的更多信息

static静态文件目录

静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

举个例子: /static/robots.txt 映射至 /robots.txt

若无额外配置，该目录不能被重命名。

关于静态文件的更多信息

Store 目录

store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。

若无额外配置，该目录不能被重命名。

关于 store 的更多信息

nuxt.config.js 文件

nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。

若无额外配置，该文件不能被重命名。

关于 nuxt.config.js 的更多信息

package.json 文件

package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。

该文件不能被重命名。

2、别名

别名	目录
~ 或 @	srcDir
~~ 或 @@	rootDir

默认情况下，srcDir 和 rootDir 相同。

提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png

3、路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

要在页面之间使用路由，我们建议使用`` 标签。

例如:

<template>
  <nuxt-link to="/">首页nuxt-link>
template>

4、页面跳转时传参

（1）页面跳转时传参(id)

①父页面

table处 @row-click="joinInSchool"

点击某行时调用的方法，row是此行的数据对象

//进入学校详情页
joinInSchool(row, event, column) {

  location.href = '/school/joinInSchool/'+row.id
  //上下等价 作用相同
  //this.$router.push({ path: '/school/joinInSchool/'+row.id })
},

②转发页面

同目录下新建文件夹，名字随意，文件夹下新建vue文件，名字固定_id.vue

this.$route.params.xxx获取传过来的参数

created() {
  this.id = this.$route.params.id
},

（2）页面跳转时传参(对象)

table处 @row-click="joinInSchool"

点击某行时调用的方法，row是此行的数据对象

//进入学校详情页
joinInSchool(row, event, column) {
   //row.id也可以不写,因为一整个对象都传过来了，但是要把_id文件名改为index.vue
   this.$router.push({ path: `/school/joinInSchool/${row.id}`, query:row})
   
},

②转发页面

同目录下新建文件夹，文件夹名字随意，文件夹下新建vue文件，名字固定_id.vue

转发后路径变化：

this.$route.query获取传过来的对象

created() {
    console.log(this.$route.query);

},

五、Vue2.js

1、文件夹介绍

1. assets：用于存储页面显示的图片资源
2. components：views中的公共部分存储在此
3. router：存储路由信息，用于页面跳转
4. views：存储页面组件，是编程的重心
5. App.vue：个人理解就是普通首页，可以随意更改
6. main.js：整个vue项目的公共配置

六、Vue3.js

1、文件夹介绍

├── README.md                 项目介绍
├── index.html                入口页面
├── build                     构建脚本目录
│  ├── build-server.js        运行本地构建服务器，可以访问构建后的页面
│  ├── build.js               生产环境构建脚本
│  ├── dev-client.js          开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│  ├── dev-server.js          运行本地开发服务器
│  ├── utils.js               构建相关工具方法
│  ├── webpack.base.conf.js   wabpack基础配置
│  ├── webpack.dev.conf.js    wabpack开发环境配置
│  └── webpack.prod.conf.js   wabpack生产环境配置
├── config                    项目配置
│  ├── dev.env.js             开发环境变量
│  ├── index.js               项目配置文件
│  ├── prod.env.js            生产环境变量
│  └── test.env.js            测试环境变量
├── mock                      mock数据目录
│  └── hello.js   
├── package.json              npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src                       源码目录  
│  ├── main.js                入口js文件
│  ├── app.vue                根组件
│  ├── components             公共组件目录
│  │  └── title.vue
│  ├── assets                 资源目录，这里的资源会被wabpack构建
│  │  └── images    
│  │    └── logo.png    
│  ├── router                 前端路由
│  │  └── index.js    
│  └── views                  页面目录(新建文件夹)
│    ├── components           页面组件
│    ├── hello.vue            页面
│    └── notfound.vue   
├── static                    纯静态资源，不会被wabpack构建。
└── test                      测试文件目录（unit&e2e）
  └── unit                    单元测试
    ├── index.js              入口脚本
    ├── karma.conf.js         karma配置文件
    └── specs                 单测case目录
      └── Hello.spec.js 

2、路由

页面跳转时传参

（1）页面跳转传id

①如何传

1、创建components/News组件

2、在router的index.js中

import {createRouter, createWebHashHistory} from 'vue-router'
import News from'../components/News'

const routes = [
    {path: '/news/:id', component: News},   //传1个id
    {path: '/news/:id+', component: News},  //传多个id
    {path: '/news/:id*', component: News},  //传至少传0个id，可以不传
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router

还有这种写法：

import {createRouter, createWebHashHistory} from 'vue-router'

const routes = [
    //这种
    {path: '/t', component: () => (import("../components/test"))},
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router

3、页面输入http://localhost:8080/#/news/123

多个id时： http://localhost:8080/#/news/131/231

②如何取

这是刚刚创建的News.js文件

//传多个id时 取出来的值是：  [ "131", "231" ]

路由正则

+表示至少一个

*表示至少0个

?表示有1个或者没有，不能重复

\ 转义字符

/:id 传一个参（任意字符串）

/:id(\\d) 传一个参（一位数字）

{path: "/hyf/:id", component: NotFound}
{path: "/hyf/:id(\\d)", component: NotFound}   传1个1位数字，例： /hyf/1
{path: "/hyf/:id(\\d+)", component: NotFound}   传1个至少1位数的数字的参，例： /hyf/12
{path: "/hyf/:id(\\d+)+", component: NotFound}  传至少1个至少1位数的数字的参，例/hyf/12/1

嵌套路由

router/index.js中

import {createRouter, createWebHashHistory} from 'vue-router'

import user from "@/components/user";
import heng from "@/components/heng";
import shu from "@/components/shu";
const routes = [
    //注意":name"前面有个斜线/
    //如果不想传参，可以不传（去掉"/:name"即可）
    {path: "/user/:name", component: user,children: [
        	//注意这里路径没有斜线
            {path: "heng", component: heng},
            {path: "shu", component: shu},
    	]
   	},
]
const router = createRouter({
    history: createWebHashHistory(),
    routes,
})
export default router

user.vue中

跳转页面push

• 点击跳转

• this.$router.push(“/”)

• this.$router.push({path:“/about”}) 这里的path对应的是"router/index.js中定义的路径

  • {path: '/about', component: About}

• this.$router.push({path:“/about/1123”}) //传参

• this.$router.push({path:“/”, query:{search:‘何昱飞’}})

  • 浏览器显示结果：http://localhost:8080/#/?search=何昱飞

• 如果是禁止回退的话，可以使用this.$router.replace替换页面

• this.$router.go:

  • this.$router.go(1) 前进一页
  • this.$router.go(-1) 后退一页

路由布局顶部/主体/底部

router/index.js中

注意！这里的components，多了个s default表示默认的那个view

.....
{path: "/shop", components: {
        default:main,
        top:top,
        end:end
}},

user.vue中

七、axios

1、直接引入

5.3.1 在需要使用http请求的页面导入

import axios from 'axios'

5.3.2 get请求：

export default {
  name: "index",
  data() {
    return {
      info: null
    };
  },
  methods: {
    getData() {
      axios
        .get("/api/v2/movie/in_theaters")
        .then(res=> {
          this.info = res.data;
        })
        .catch(err=> {
          console.log(err);
        });
    }
  }
};

5.3.3 post请求(示例，找不到post开放接口)：

export default {
  name: "index",
  props: [],
  data() {
    return {
      info: null
    };
  },
  methods: {
    getData() {
      axios
        .post("/api/v2/movie/in_theaters",{
          params: {//传参
            page: 1,
            count: 20
          }
        })
        .then(res=> {
          this.info = res.data;
        })
        .catch(err=> {
          console.log(err);
        });
    }
  }
};