发布：2023/10/9 17:53:34作者：管理员 来源：本站 浏览次数：416

一、组件概念

实现页面中局部功能代码和资源的集合。也可以说传统的写法是html、css、js都是单独的文件，然后在html文件中分别引入css和JS文件。

而组件就是：将html CSS JS 静态资源等 封装为一个完整的功能给别人引用。

二、组件类型

1.非单文件组件

概念：一个文件中包含n个组件.

项目开发中很少用非单文件组件

2.单文件组件

概念：一个文件只包含一个组件（也就是.vue的文件）

三、单文件组件

1.vue插件:vetur

作者：Pine Wu

2.组件样例

<template>

 <div id="root">

   <h1>我叫{{ userinfo.username }} </h1>

   <h1>我今年{{ userinfo.age }}岁了</h1>

 </div>

</template>

<script>

   export default {

       name: 'Test',  //暴漏出组件

       data(){

           return {

               userinfo: {

                   username: 'zhangsan',

                   age: 18

               }

           }

       }

   }

</script>

<style>

   #root {

       width: 1000px;

       height: 200px;

       background: #2b4b6b;

   }

</style>

三、安装vue脚手架

1.安装node环境

使用二进制windows安装包安装即可

C:\Users\Administrator>node -v

v18.12.1

2.配置npm仓库

配置仓库为淘宝镜像源，在用户的家目录下出现了一个 .npmrc的文件，文件中配置好了该路径

npm config set registry  https://registry.npm.taobao.org

3.安装vue/cli

全局安装,安装完毕后在node的安装目录下的node_modules下出现@vue目录。vue/cli就安装到此目录下

npm install -g @vue/cli

4.创建vue项目

切换到项目下，创建一个vue项目

vue create 项目名称

5.启动项目

进入项目下启动项目

npm run server

四、vue脚手架文件结构

组件1.vue

组件2.vue

组件3.vue

组件4.vue

组件汇总文件: App.vue

脚手架入口文件: main.js

1.编写自定义组件

在src/components下编写自定义组件

1.1 Test1.vue

<template>

   <div id="root">

       我是 {{context}} 文件

   </div>

</template>

<script>

export default {

   name: 'testA',

   data(){

       return {

           context: 'test1'

       }

   }

}

</script>

<style>

</style>

1.2 Test2.vue

<template>

<div id="root">

     我是 {{context}} 文件

</div>

</template>

<script>

export default {

   name: 'testB',

   data(){

       return {

           context: 'test2'

       }

   }

}

</script>

<style>

</style>

2.在App.vue中注册组件

<template>

<div id="root">

 <!-- 使用两个自定义组件 -->

 <testA></testA>

 <testB></testB>

</div>

</template>

<script>

// 导入两个自定义组件

import testA from './components/Test1.vue'

import testB from './components/Test2.vue'

export default {

 name: 'App',

 // 将自定义组件注册在app.vue文件中

 components: {

   testA,

   testB,

 }

}

</script>

<style>

</style>

3.main.js

import Vue from 'vue'

import App from './App.vue'

Vue.config.productionTip = false

new Vue({

 render: h => h(App),

}).$mount('#app')

五、ref属性

ref属性和属性中的id是一样的，主要是用来是定位元素的，id 是html原生属性。而ref是vue中来定位元素的

<template>

 <div id="root">

   <h1 ref="title">我是App.vue文件</h1>

   <button @click="show">我是一个按钮</button>

 </div>

</template>

<script>

export default {

 name: 'App',

 components: {

 },

 methods: {

   show(){

     //这能够通过this.$refs中直接查找到title，非常的方便

     console.log(this.$refs.title)

   }

 },

}

</script>

<style>

</style>

ref还可以给组件添加

六、props属性

props属性主要是让组件接收外部传递进来的变量

1.编辑Test.vue组件

<template>

 <div id="root">

   <h1>我的名字叫{{ name }}</h1>

   <h1>我今年{{ age }}岁了</h1>

 </div>

</template>

<script>

export default {

 name: 'TestAss',

  <!-- 给Test.vue组件传递参数，age保持默认参数 -->

 props: {

   name: {

     // 限制接受字段的类型

     type: String,

     // 此字段是否为必须传递参数字段

     require: true

   },

   age: {

     type: Number,

     //如果用户不传递参数，就是使用此默认值

     default: 20

   }

 }

}

</script>

<style>

</style>

2.编辑APP.vue文件

<template>

 <div id="root">

   <!-- 给Test.vue组件传递参数，age保持默认参数 -->

   <TestAss name="张三" :age="18"></TestAss>

 </div>

</template>

<script>

import TestAss from './components/Test.vue'

export default {

 name: 'App',

 components: {

   TestAss

 }

}

</script>

<style>

</style>

七、插件

插件的使用就是在main.js中 import 导入。然后是Vue.use()使用插件

八、scoped

作用：让样式在局部生效，防止冲突。

在App.vue中写的CSS是对所有组件生效的，所有在App.vue中

<style scoped>

css样式

</style>

九、代理配置跨域

此实例会出现跨域问题，因为不能满足浏览器的 “同源策略”

<template>

 <div>

   <h1>这是一个测试页面</h1>

   <button @click="send">点我发送一个请求</button>

 </div>

</template>

<script>

 import axios from 'axios'

 export default {

   name: 'App',

   methods: {

     send(){

       axios.get('http://www.baidu.com').then(

         Response=>{

             console.log(Response.data)

         },

         err=>{

             console.log('请求错误:',err.message)

         }

       )

     }

   }

 }

</script>

<style scoped>

</style>

十、插槽

1.匿名插槽

test.vue组件内容

<template>

 <div id="root">

   <h1>我是一级标题</h1>

   <!-- 这可以理解为插槽占位符,插入的内容应该放在什么位置 -->

   <slot></slot>

   <h2>我是二级标题</h2>

 </div>

</template>

<script>

 export default {

   name: 'TestAss'

 }

</script>

App.vue内容

<template>

 <div>

   <TestAss>

       <!-- 这是在组件标签内插入了内容 -->

     <h3>我是插入的三级标题</h3>

   </TestAss>

 </div>

</template>

<script>

 import TestAss from './components/Test.vue'

 export default {

   name: 'App',

   components: {

     TestAss

   }

 }

</script>