IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> TypeScript与Vue组合开发记录点(五) -> 正文阅读

[JavaScript知识库]TypeScript与Vue组合开发记录点(五)

ElementUI之this.$alert()

ElementUI的this.$alert()弹窗,在MessageBox 弹框中使用,修改该弹窗的默认样式。当用户进行操作时会被触发,该对话框中断用户操作,直到用户确认知晓后才可关闭。调用$alert方法即可打开消息提示,它模拟了系统的alert ,无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数,message和title。

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
<script>
  export default {
    methods: {
      open() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
    }
  }
</script>

HTML的i 标签

<i>标签包围的文本将用斜体显示。 <i>标签定义与文本中其余部分不同的部分,并把这部分文本呈现为斜体文本。在没有其他元素可以使用时,比如<b>, <cite>, <dfn>, <em>, <q>, <small>, <strong> ,请使用 <i> 标签。

v-html

v-html能够解析html结构,例如解析一个<a href>连接。

<p v-html="<a href="#">哈哈</a>"></p>

锚点

锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。在vue通过给相应的div元素绑定一个id,然后使用document.getElementById()获取到该id的字符串值,在拼接一个scrollintoView()。在老技术中还可以使用a标签进行跳转。

// div盒子绑定一个id
<div id="my">定位到我这</div>
// 默认滚动到元素的顶部
document.getElementById("my").scrollIntoView();
 <body>
 	// 使用a标签点击跳转,就会定位到name为text的部分
    <a href="#text">跳转</a>
    <p>如果某个元素含有id/name属性,那么这个元素就是网页的一个锚点,利用a标签的href属性就能跳转到该锚点</p>
    <a href="#" name="text">北京网络职业学院</a>
</body>

注意:动态给id赋值,比如在该div中有index参数是动态时,为保证id值的唯一性。

//动态给id赋值 ,该id值就会随index的变化而变化,title-0、title-1等
:id=" 'title-' + index "

Array.shift()

Arr.shift()去除原数组头部的一个数,并返回第一个元素的值。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 运行后的返回值为第一个元素,Banana
fruits.shift()
// fruits数组结果输出为 Orange,Apple,Mango

Array.unshift()

Array.unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

// 将新项添加到数组起始位置:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 运行后的返回值为新数组的长度
fruits.unshift("Lemon","Pineapple");
// fruits 将输出:
// Lemon,Pineapple,Banana,Orange,Apple,Mango
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-21 18:52:15  更:2022-05-21 18:53:04 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 19:58:37-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码