文章目录
组件
组件是可复用的 Vue 实例,主要用于开发中 具有相同特征不同数据的模块 把它集成为一个组件 供重复利用
1、局部和全局（指令，过滤器，组件）
1.全局组件:
组件的属性不能用大写字母
组件的名字可以用驼峰命名法,但是使用的时候必须用连字符
全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)
注册的组件不要跟系统标签同名
2.局部组件:
一个vm实例可以有多个局部组件,但是只能供当前vm实例使用
不能用外部data里面的数据，因为他是Vue全局的。
必须要在过滤器中声明：而且必须在new Vue前申明，不然Vue里面的函数都加载完了还没有找到数据，就无法访问。
3、单文件组件
-
引入:@1官方脚手架 @2挂载vm对象 @3组件引入并渲染到vm中
-
组件的属性
属性有两种写法:简单声明和详细描述:-
.简单声明
props:[“prop1”,“prop2”]//组件Nav1.vue中使用app.vue里面的数据 <template> <div> <p>我是app.vue里面的数据：{ { example.name}}-----{ { example.age}}岁了</p> </div> </template> export default{ data() { return { } }, props:['example'], //传值声明 } //app.vue中传值 <template> <div> <Nav1 :example='mydata'> //获取全局中mydata数据 </Nav1> </div> </template> <script> import Nav1 from '@/components/Nav1.vue' export default { data() { return { obj:{ }, mydata:{ name:'marry',age:18} } }, components: { Nav1, }, } </script> -
对属性做详细的描述
props: { propA: Number, // 基础的类型检查 (`null` 匹配任何类型) propB: [String, Number], // 多个可能的类型 propC: { type: String, required: true // 必填的字符串 }, propD: { type: Number, default: 100 // 带有默认值的数字 }, propE: { type: Object, // 带有默认值的对象或者数组填Array default: function () { // 不建议直接填对象(因为对象直接量会一直占用内存),一般使用工厂函数,调用时才创建对象节省资源(面试) return { message: 'hello' } } }, propF: { validator: function (value) { // 自定义验证函数返回为true就代表数据符合我们规定 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } }
-
-
组件的嵌套:
.vue文件既可以是一个页面,也可以是一个组件
它可以被别人.vue文件引入 然后作为组件使用补充:组件的自定义事件和原生事件
//1.在原生组件(就是html标签)中 事件是由系统来设计触发条件的: <div @click="fn">点我</div> //2.在自定义组件中,事件是由自己来设计什么时候触发的: //绑定事件: <mydiv @myclick="fn">点我</mydiv> //事件设计: //在mydiv组件内部,你可以在你想要的条件下去触发事件 this.$emit("myclick","要给触发的事件的函数传入值")//这个代码放在你想触发自定义事件的地方 //3.如果希望组件绑定原生事件(事件的触发条件设计由系统设计) //给事件绑定事件修饰符 .native <mydiv @click.native="fn">点我</mydiv>//事件名必须是系统存在的事件
单文件组件的技术点
1.在项目下创建vue.config.js 就是vue的打包配置文件:
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false//关闭eslint的严格模式检测
})
2.引入文件时 @代表了src目录的意思 这个@是vue的脚手架集成的basepath 其他框架中没有@不要记混乱了
3.注册的组件名不能跟vue中的和原生DOM的重名,注册的名字是驼峰 使用时就用连字符
4.注册的组件 使用时可以用双标签也可以用单标签: 如果有插槽必须用双标签
5.如果.vue的script注释了 在打包的时候 vue的打包环境 会帮我们把这个文件解析为一个对象 然后给这个对象添加一个template属性 值为解析的template页面模板字符串
也就是说 .vue文件中 可以不要<style>和<script> 但是不能不写<template>
6.style可以写多个
7.每一个组件内部只能有一个根元素 不要在根元素上写v-for 循环超过2次就会出现多个根元素
2、组件的属性
属性可以多传 但是注册了的属性就必须传 不然有可能会在使用时因为取值问题出BUG
属性名不要(不是不能)用vue官方或者原生标签已经签名过的名字:比如id class href
属性的类型验证只是一种验证提示 不会阻止程序运行
3、css
全局样式的写法:1.在.vue文件中的style中写的样式 打包后就是全局样式 2.写一个css文件 在项目中导入就是全局样式
如果全局样式出现了相同的选择器. 就看是哪个最后打包引入项目 哪个的优先级就最高
局部样式/CSS作用域的实现和原理
在style标签中添加一个scoped
原理就是vue的插件webpack打包时会:
把当前组件模板中的每一个元素添加一个相同的哈希值命名的属性名
并且为添加了scoped的style中的样式选择器上添加一个属性选择器
vue文件中可以出现多个style标签 凡是添加了scoped属性的,里面的选择器就会被修改 没添加scoped属性的就不会被修改
4、插槽
在组件中占据一定的位置，等父组件传值设置给这个位置。
v-slot: 插槽, 具名插槽 slot,slot-scope过时了 2.6.0使用v-slot
-
语法:v-slot:插槽名
-
语法糖:#插槽名
-
没有指定插槽名就是默认插入到插槽,不给插槽插入数据的话,就会使用组件的slot中的数据
-
插槽名不用使用引号引起来,直接写变量名
-
插入的内容必须是template标签或者组件， 不能是原生的元素
//设计组件: .vue组件文件中
<template>
<div class="content1">
<slot></slot>
<slot name="slot1"></slot>
<h1>{
{
contentData.title}}</h1>
<h2>{
{
contentData.dt}}</h2>
<slot name="slot3">你不给我数据到3号插槽中 我就会默认显示出来</slot>
<p>{
{
contentData.text}}</p>
<slot name="slot2"></slot>
</div>
</template>
<script>
export default{
props:{
contentData:{
type:Object,
default:()=>{
return {
title:"0",dt:"0",text:"0"}}
}
}
}
</script>
//使用组件: .vue页面文件中
<template>
<div>
<content2 :contentData="arr[1]">
<template #slot1>
<img src="../assets/28.jpg">
</template>
<template #slot2>
<p>我在外部插入插槽的数据,不是子组件中的数据,也不是属性传进去的数据</p>
</template>
<template v-slot:slot3>
666
</template>
<p>我并没有指定插入到哪里</p>
</content2>
</div>
</template>
5、自定义事件
自己设计事件使用 v-on:事件名
在组件内部触发事件 this.$emit(“事件名”,参数1,参数2…)
使用组件时 绑定监听器,内部触发事件时 监听器就会调用
1.在原生组件(就是html标签)中 事件是由系统来设计触发条件的:
<div @click="fn">点我</div>
2.在自定义组件中,事件是由自己来设计什么时候触发的:
绑定事件:
<mydiv @myclick="fn">点我</mydiv>
//事件设计:
//在mydiv组件内部,你可以在你想要的条件下去触发事件
this.$emit("myclick","要给触发的事件的函数传入值")//这个代码放在你想触发自定义事件的地方
3.如果希望组件绑定原生事件(事件的触发条件设计由系统设计)
//给事件绑定事件修饰符 .native
<mydiv @click.native="fn">点我</mydiv>//事件名必须是系统存在的事件
6、请求后端网络数据
1、后端代理解决跨域问题
后端生成一个简单egg框架
- npm init egg --type=symple
- npm i
- npm run dev
快速生成vue框架：
- vue create init
- npm run serve
//App.vue
<template>
<div>
{
{
obj.title}}
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
obj:{
}
}
},
components: {
},
async mounted() {
let res=await 
最低0.47元/天 解锁文章
765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
