Vue学习一《基础:属性,事件,插槽》

最新推荐文章于 2024-09-25 14:18:29 发布
最新推荐文章于 2024-09-25 14:18:29 发布
阅读量477 收藏
点赞数
分类专栏： Vue 文章标签： 前端 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40015566/article/details/90494934
版权

文章目录

VUE的简介

特点

  1. 轻量 开启gzip压缩后20kb

  2. 渐进式的框架

    1. 不需要学习所有就可以应用到项目

  3. 响应式的更新机制

  4. 学习成本低

开发环境的搭建

  1. 直接引入CDN

    <!DOCTYPE html>
<html lang="zh-hans">

<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">{{message}}
        <blog-post v-for="(item, index) in groceryList" :key="item.id" :todo="item"></blog-post>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        Vue.component('blog-post', {
            // 在 JavaScript 中是 camelCase 的
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        })
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    message: 'hello Vue',
                    groceryList: [
                        { id: 0, text: '苹果' },
                        { id: 1, text: '香蕉' },
                        { id: 2, text: '桔子' }
                    ],
                }
            },
        })
    </script>
</body>

</html>

    这样直接使用非常简便的可以实现功能,但是存在缺点

    1. component全局定义

    2. 字符串类型的模板,没有语法高亮,而且数据量大的时候看起来杂乱

    3. 不支持css样式

    4. 只能使用HTML和ES5语法,无法使用预处理器和Babel

  2. 工程形式安装

    1. npm install -g @vue/cli脚手架

    2. vue create htllo-word 创建项目

    3. cd hello-word

    4. npm run server 启动脚手架项目

      # 一般因为网络问题需要切换npm源进行安装
npm install nrm -g --save 
nrm ls # 查看源列表
nrm current # 查看当前源
nrm use xxx # 使用某个源
nrm add name http:/xxx/xxx/xxx # 添加自定义源到列表
nrm del name # 删除某个源

组件化的开发

vue组件 = vue实例 = new Vue(options)

组件的三大核心概念

  • 属性

  • 事件

  • 插槽

属性

  • 自定义属性 props 在props中声明的属性

  • 原生属性 attrs 没有声明的属性,默认自动挂载在组件根元素上,设置inheritAttrs为false可关闭自动挂载

  • 特殊属性 class , style 挂载到根组件上,支持字符串,对象,数组等多种数据类型

自定义属性

简写:

props=['name','xxx','aaa']不推荐,后期维护困难

常用的书写方式:

<script>
export default {
  name: "PropsDemo",
  props: {
    name: String,
    taype: {
      validator: function(params) {
        return ["success", "warning", "danger"].includes(params);
      }
    },
    list: {
      type: Array,
      default: () => []
    },
    isVisble: {
      type: Boolean,
      default: false
    },
    onChange: {
      type: Function,
      default: () => {}
    }
  },
  methods: {}
};
</script>

使用方式

<PropsDemo name="hello" :type="type" :is-visible="false" :on-change="handlePropChange" title="属性Demo" class="test1" :class="['test2']" :stype="{marginTop:'20px'}" style="margin-top:10px"></PropsDemo>

事件

  • 普通事件

    • @click
@input
@change
@xxx
通过this.$emit('xxx',...)触发

  • 修饰符事件

    • @input.trim
@click.stop
@submit.prevent等
一般用于原生HTML元素,自定义组件需要自行开发支持

例如:使用"$emit"来触发事件,改变字体大小

// main.js
// 创建vue主节点
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

//主节点App.vue
<template>
  <div id="app">
    <div :style="{fontSize:articleFontSize+'em'}">
      <article-demo
        v-on:changeFont="changeSize"
        v-for="(item, index) in article"
        :key="index"
        :article="item.body"
      />
    </div>
  </div>
</template>

<script>
import ArticleDemo from "./components/ArticleDemo.vue";
export default {
  name: "app",
  components: {
    ArticleDemo
  },
  data() {
    return {
      article: [
        { id: 1, body: { title: "t1", con: "c1" } },
        { id: 2, body: { title: "t2", con: "c2" } },
        { id: 3, body: { title: "t3", con: "c3" } }
      ],
      articleFontSize: 1
    };
  },
  methods: {
    changeSize(size) {
      this.articleFontSize += size;
    }
  }
};
</script>

<style>
</style>

//主节点同级别的components目录下的ArticleDemo.vue
<template>
  <div>
    <h3>{{article.title}}</h3>
    <button @click="$emit('changeFont',+0.1)">放大字体</button>
    <button @click="$emit('changeFont',-0.1)">减小字体</button>
    <div v-html="article.con"></div>
  </div>
</template>
<script>
export default {
  name: "ArticleDemo",
  props: {
    article: Object
  },
  methods: {}
};
</script>

当单击按钮的时候触发名字为changeFont的事件,而且传递参数

changeFont事件绑定在根节点下的<article-demo/>上,形式为:v-on:changeFont="changeSize",其实它指向的为根节点定义的changeSize方法

//changeSize方法
methods: {
 changeSize(size) {
 this.articleFontSize += size;
 }
 }

这个方法接收一个参数,也就是$emit触发的时候传递的参数,结果为对根组件的articleFontSize数据进行改变,然而,这个数据绑定着:style="{fontSize:articleFontSize+'em'}",所以字体大小也随着改变了

这样子组件中的按钮就可以触发父组件的方法,而且通过父组件的方法改变父组件的数据,实现数据的传递

例子二:通过emit实现子组件和父组件的数据传递

#component
<template>
  <div>
    <input :value="value" v-on:input="$emit('input',$event.target.value)" type="text">
    <p>子组件:{{value}}</p>
  </div>
</template>
<script>
export default {
  name: "EventBindData",
  props: {
    value: String
  }
};
</script>

子组件接收父组件传递来的value

子组件的input触发父组件的input方法,并且将事件的回调值作为参数抛出

# 父节点
<template>
  <div id="app">
    <div>
      <event-bind-data :value="searchText" v-on:input="searchText=$event"/>
      <label for>父组件:{{searchText}}</label>
    </div>
  </div>
</template>

<script>
import EventBindData from "./components/EventBindData.vue";
export default {
  name: "app",
  components: {
 
    EventBindData
  },
  data() {
    return {
      searchText: "xxxxxxx"
    };
  },
 
</script>

<style>
</style>

父节点定义searchText: "xxxxxxx"并将其传递给子节点

<event-bind-data :value="searchText" v-on:input="searchText=$event"/>
<label for>父组件:{{searchText}}</label>

插槽

  • 普通插槽

    • <template solt="xxx"></template>

    • <template v-slot:xxx></template>

  • 作用域插槽

    • <template slot='xxx' slot-scope='props'></template>

    • <template v-solt:xxx='props'></template>

插槽使得定义的组件中可以插入需要的内容

例如:定义组件的时候开启插槽

# component
<template>
  <div>
    <strong>Error!</strong>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "ChaCaoDemo"
};
</script>


#App.vue
<template>
  <div id="app">
    <cha-cao-demo>我在这里插入数据</cha-cao-demo>
  </div>
</template>

<script>
import ChaCaoDemo from "./components/ChaCaoDemo.vue";
export default {
  name: "app",
  components: {
    ChaCaoDemo
  },
</script>

<style>
</style>

插槽允许组件可以在定义插槽的位置插入其他元素,甚至是其他组件

例如定义了个名字为simple的组件且开启插槽

那么在使用这个组件的时候

  • <simple>哈哈哈</simple>插入文字

  • <simple><p>哈哈哈</p></simple>插入其他html元素

  • <simple><component/></simple>插入其他组件

一个组件中可以定义多个插槽,给每个插槽可以命名

例如定义为main-body的组件

<template>
<div>
    <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot name="main"></slot>

  </main>
  <footer>
    <slot name="footer"></slot>
</div>
</template>

使用的时候

<main-body>
    
 <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>
    <template v-slot:main>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</main-body>

万物皆属性

element

  • 属性

    • 自定义属性props

    • 原生属性attrs

    • 特殊性属性class style

  • 事件

    • 普通事件

    • 修饰符事件

  • 插槽

    • 普通插槽

    • 作用域插槽

其实上述的均为属性

【vue】组件插槽、组件自定义事件
webxuj的博客
09-06 1023
首先给子组件标签通过v-on：自定义事件名字=“函数名”，绑定一个函数，接着在父组件APP的methods里面定义这个函数（需要接收一个参数）在子组件中，首先定义一个click事件，接着在methods内书写click事件函数，在其内部通过this.$emit（）去触发APP组件里面的自定义事件，括号内的第一个参数是自定义事件名字，后面的参数是数据，（注意：给哪个子组件绑定自定义事件就去哪个子组件去触发这个事件）在子组件的methods里面定义触发这个函数的函数，通过this.函数名括号传数据。
Vue基础知识总结 7：插槽slot与vue导入导出_vue2 怎么将slot 内容导出去(1)
2401_84434954的博客
04-29 841
这个isShow的作用域是div实例，所以它是true。
Vue组件的三大核心概念：属性、事件和插槽
u012710123的博客
03-21 2215
属性：分为自定义属性、原生属性、特殊属性； 自定义属性props：即组件props中声明的属性，子类接受父类的值； 原生属性attrs ：没有声明的属性，默认自动挂载到组件根元素上，设置inheritAttrs为false可以关闭自动挂载； 特殊属性class、style：挂载到组件根元素上，支持字符串、对象、数组等多种语法；详见：htt...
vue2的事件和插槽
最新发布
Jarvan_I的博客
09-25 453
vue2 的事件系统是基于原生 JavaScript 的事件模型，并且提供了一些增强的功能来简化事件处理。它允许你将模板内容插入到组件的指定位置，从而实现组件的复用和扩展。插槽和事件系统是 vue2 的重要组成部分，它们提供了组件化的灵活性和复用性，使得构建复杂的单页应用变得更加容易。这个对象包含了事件的详细信息，如事件类型、目标元素、是否被阻止等。作用域插槽允许你向插槽传递数据，并且可以在插槽内部使用这些数据。属性来绑定一个作用域变量，这个变量可以访问到具名插槽内的数据。元素会被插入到相应的插槽位置。
【VUE】vue + element 插槽实现表格某一列点击事件
Mrerlou的博客
06-03 1477
一、问题背景 想对表格的某一列添加点击事件。 原效果如下: 目标效果： 二、解决方法 使用vue 的slot插槽来解决这个问题： 代码如下： 关键代码如下： <template slot-scope="scope"> <a @click="handleClick(scope.row)" style="color:blue;cursor:pointer">{{ scope.row.databaseName }} </a> </templat
Qt 事件槽
quasiceo
12-23 325
qobject.cpp 文件中关于 QObject::connect() 函数的代码， bool QObject::connect(const QObject *sender, const char *signal,                       const QObject *receiver, const char *method,
vue组件-属性及插槽
alice9999999的博客
07-29 283
1 item.vue: <template> <div class="item" :class={active:isActive} @click="handleClick"> <slot></slot> </div> </template> <script> export default { props:{ isActive:{ type:Boolean,//约束该属性的类型为B
vue学习基础以及大纲
07-19
通过学习Vue的基础以及深入了解其开发模式，开发者可以有效地创建Vue实例、绑定数据、安装必要的工具、理解数据绑定原理、掌握基础指令和常用指令的使用。此外，Vue的开发还应掌握自定义指令的使用、计算属性和监听...
Vue基础day4学习资料.zip
03-31
在"Vue基础day4学习资料.zip"中，我们可以找到一系列资源来深入理解和掌握Vue的基础知识，特别是Vue全家桶（包括Vuex状态管理、Vue Router路由管理等）的基础内容。 首先，"day04_Vue01-基础语法3.ppt"很可能包含了...
Vue全家桶（一）：Vue基础（视频课程）.zip
08-21
本课程主要关注Vue.js的基础部分，我们将深入学习Vue的核心概念和常用特性。 1. **Vue概述**：Vue.js由尤雨溪开发，旨在简化Web开发，通过声明式渲染数据到DOM（文档对象模型）。Vue采用MVVM（Model-View-ViewModel...
黑马程序员Vue前端学习笔记：从基础到高级特性
前端学习笔记-黑马程序员Vue是一份全面介绍Vue.js框架的教程，旨在帮助初学者快速理解和掌握Vue的核心概念和用法。Vue作为现代前端开发的重要工具，其特点包括： 1. **轻量级框架**：Vue起始于简化Web应用开发，...
Vue3插槽和事件
m0_72694993的博客
09-23 2642
2>子组件：其中需要调用defineEmits方法注册事件，通过emit变量接受submit参数，然后点击按钮的时候让其执行，emit("submit")；父组件中：调用子组件的时候传入@submit="处理函数"，当submit的时候触发，我们也可以自己定义这个submit，也可以换为别的变量，然后我们绑定事件处理函数。注意的是，其中的emit函数有两个参数，第一个参数事件名称，第二个参数是给事件处理函数出入参数。点击事件点击的时候就可以触发。可以通过传入的参数绑定样式。
Vue ——03、Vue的生命周期，异步通信，计算属性，插槽，自定义事件，最后小结
weixin_42858422的博客
02-10 2075
Vue的生命周期，异步通信，计算属性，插槽，自定义事件 一、Vue的生命周期二、Axios异步通信 ES6新特性，mounted，axios ，=>三、计算属性 computed四、插槽 slot五、自定义事件 this.$emit六、最后小结————————创作不易，如觉不错，随手点赞，关注，收藏(*￣︶￣)，谢谢~~ 一、Vue的生命周期 官方文档：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示   Vue实例有一个完整的生命周期，也就是从开
给插槽（slot）绑定事件·
Big_YiFeng的博客
02-14 6999
给插槽(slot)绑定事件 背景： 现在有一个组件，它里面有一个插槽，需要实现不管往插槽里面添加什么，都要能让他点击之后可以让组件里面的数据的值+1 实现思路 可以运用 vue 的作用域插槽 先将需要点击之后运行的方法通过作用域插槽传递给调用该组件的页面 <template> <div> <h1>{{ num }}</h1> <slot :add-num="addNum"> <button @click="
vue学习笔记——插槽、自定义事件
qq_29384339的博客
08-03 606
插槽slot Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">
7.2、事件、信号、槽
feiffer·hu的博客
06-05 616
事件： 事件(event)是由系统或者Qt本身在不同时刻发出的。当用户按下鼠标、敲下键盘，或者其它情况时候都会发出一个相应的事件。一些事件在对用户操作做出相应时发出，如键盘事件等；另外一些则是由系统自动发出，如计时事件等。Qt程序需要在main()函数创建一个QApplication对象，然后调用它的exec()函数。这个函数就是开始Qt的事件循环。在执行exec()函数之后，程序将进入事件循环来监听应用程序的事件，当事件发生时，Qt将创建一个事件对象。Qt中所有事件类都继承自QEvent。在事件对象创..
详解vue组件（属性、事件和插槽）
CH-EN.的博客
01-29 1228
详解vue组件（属性、事件和插槽） 一、属性 1.自定义属性props 可以得出props 可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。通过一般属性实现父向子通信；通过函数属性实现子向父通信 2.inheritAttrs 3. data与props区别 相同点 两者选项里都可以存放各种类型的数据，当行为操作改变时，所有行为操作所用到和模板所渲染的数据同时都会发生同步变化。 不同点 data 被称之为动态数据，在各自实例中，在任何情况下，我们
插槽挡住下方盒子的点击事件要怎么解决？
z2000ky的博客
05-26 140
2个盒子重叠，上方盒子影响了下方盒子的点击事件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值