Vue学习5----Vue点击事件,方法,获取数据,改变数据,事件对象及自定义属性

效果图:
在这里插入图片描述

源码(复制即可运行)
App.vue

<!--06Vue点击事件,方法,获取数据,改变数据,事件对象及自定义属性-->
<template>
  <!--渲染-->
  <div id="app">
    <div>{
  {this.msg}}</div>
    <button v-on:click="imethod1()">点击事件写法1</button>
    <br/>
    <button @click="imethod1()">点击事件写法2</button>
    <br/>
    <button @click="imethod2()">获取data中的数据</button>
    <br/>
    <button @click="setMsg()">改变data中msg的值</button>
    <br/>
    <button @click="liebiao()">点击渲染列表</button>
    <br/>
    <button @click=
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-quill-editor 是一个基于 Quill.js 的富文本编辑器组件,它提供了一些方便的 API,使得在 Vue.js 应用中使用 Quill.js 编辑器更加容易。下面是使用文档: 1. 安装 ``` npm install vue-quill-editor --save ``` 2. 引入 ```javascript import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' // 引入样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor) ``` 3. 使用 ```html <template> <div> <quill-editor v-model="content" :options="editorOption"></quill-editor> </div> </template> <script> export default { data() { return { content: '', editorOption: { // Quill 选项 } } } } </script> ``` 4. 组件选项 Vue-quill-editor 组件支持传递一个对象作为选项,这些选项将传递给 Quill 实例。这些选项可以在组件的 `options` 属性中设置。下面是一些常用的选项: - `placeholder`:编辑器的占位符文本 - `modules`:Quill 模块 - `theme`:Quill 主题 - `readOnly`:是否只读 - `formats`:Quill 支持的格式 更多选项可以参考 Quill 的文档。 5. 事件 Vue-quill-editor 组件支持一些事件: - `@blur`:失去焦点时触发 - `@focus`:获得焦点时触发 - `@ready`:编辑器初始化完成后触发 - `@change`:内容发生改变时触发 - `@selection-change`:选区发生改变时触发 6. 提交表单 由于 Vue-quill-editor 组件是一个自定义组件,需要在提交表单时手动获取编辑器内容并将其设置为表单数据。可以在表单提交前调用一个方法来实现这个功能,例如: ```html <template> <form @submit.prevent="submitForm"> <quill-editor v-model="content" :options="editorOption"></quill-editor> <button type="submit">提交</button> </form> </template> <script> export default { data() { return { content: '', editorOption: { // Quill 选项 } } }, methods: { submitForm() { // 获取编辑器内容 const content = this.$refs.quillEditor.quill.root.innerHTML // 设置表单数据 this.form.content = content // 提交表单 this.$http.post('/api/form', this.form) } } } </script> ``` 以上就是使用 Vue-quill-editor 组件的基本方法,希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值