Html + Jquery + Vue前端学习笔记

news/2024/7/10 1:20:37 标签: 前端, html, jquery, vue, vscode, js

文章目录

  • 一，Vue
    • 1，v-model 数据绑定
    • 2，生成描述列表
  • 二，Html+Jquery
    • 1，动态修改类名
    • 2，layui手风琴效果
    • 3，输入框样式修改
    • 4，多行文本显示省略号
    • 5，div内容居右
    • 6，字符串数组转换
    • 7， 数组过滤
    • 8，页面跳转传参接收参数
  • 三，其他
    • 1，右键菜单加入用vscode打开文件夹

一，Vue

1，v-model 数据绑定

html"><el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery"></el-input>

 data() {
    return {

      // 查询参数
      queryParams: {
        name: "", // 名称
      },
	}
}

输入框里的值变了，data里的查询参数也会跟着变，这就是vue的绑定

@keyup.enter.native 这个代表键盘的回车事件，一般用来做查询
clearable 代表可清空

2，生成描述列表

看一下整体效果
在这里插入图片描述

html"><el-form-item label-width="115px"  label="人员参数" prop="productParameter">
                      <div v-if="readonly">
                        <!-- 人员参数查看 描述列表 -->
                        <el-descriptions :column="2">
                          <el-descriptions-item
                            v-for="(item, index) in tableParameter"
                            :label="item.key"
                          >
                            {{ item.value }}
                          </el-descriptions-item>
                        </el-descriptions>
                      </div>
                      <div v-else>
                        <!-- 人员参数编辑 发布时使用表格 -->
                        <div ref="hint" style="margin-bottom: 20px;color: #bbbbbb;"></div>
                        <el-input
                          style="width: 30%; margin-right: 20px"
                          v-model="paramKey"
                          placeholder="请输入参数名称"
                        >
                        </el-input>
                        <el-input
                          style="width: 30%; margin-right: 20px"
                          v-model="paramValue"
                          placeholder="请输入参数内容"
                        >
                        </el-input>
                        <el-button @click="handleParamAdd()">添加</el-button>

                        <el-table
                          border
                          :data="tableParameter"
                          style="width: 100%; margin-top: 20px"
                        >
                          <el-table-column align="center" prop="key" label="参数名称" width="300">
                          </el-table-column>
                          <el-table-column
                            prop="value"
                            label="参数内容"
                            width="300"
                            align="center"
                          >
                          </el-table-column>
                          <el-table-column label="操作" align="center">
                            <template slot-scope="scope">

                              <el-button
                              class="el-icon-bottom"
                                size="small"
                                type="text"
                                :disabled="scope.$index === tableParameter.length - 1"
                                @click="moveDown(scope.$index, scope.row)"
                              >下移
                              </el-button>
                              <el-button
                                size="small"
                                class="el-icon-top"
                                type="text"
                                :disabled="scope.$index === 0"
                                @click="moveUp(scope.$index, scope.row)"
                              >上移
                              </el-button>
                              <el-button
                                class="el-icon-delete"
                                size="small"
                                type="text"
                                @click="handleParamDelete(scope.row)"
                                >删除</el-button
                              >
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </el-form-item>

some方法判断数组中是否包含某个值

      let res = this.list.some((item) => item.key == this.paramKey);
      if (res) {
        this.$modal.msgWarning("key已存在，请勿重复添加");
      } else {
       	console.log('key不存在，可添加')
      }

div富文本显示，\u3000代表空格

this.$refs["hint"].innerText =
      "填写示例：\n姓名：张三\u3000\u3000\u3000\u3000\u3000\u3000性别：男\nn职业：开发\u3000\u3000\u3000\u3000\u3000\u3000爱好：听歌";

上移，下移，删除，添加

 // 上移
     moveUp(index, row) {
      console.log("上移", index, row);
      if (index > 0) {
        const upDate = this.tableParameter[index - 1];
        this.tableParameter.splice(index - 1, 1);
        this.tableParameter.splice(index, 0, upDate);
      } else {
        alert("已经是第一条，不可上移");
      }
    },
    // 下移
    moveDown(index, row) {
      console.log("下移", index, row);
      if (index + 1 === this.tableParameter.length) {
        alert("已经是最后一条，不可下移");
      } else {
        const downDate = this.tableParameter[index + 1];
        this.tableParameter.splice(index + 1, 1);
        this.tableParameter.splice(index, 0, downDate);
      }
    },
     // 人员参数删除按钮
    handleParamDelete(row) {
      console.log(row);
      let index = this.tableParameter.findIndex((item) => {
        if (item.key == row.key) {
          return true;
        }
      });
      this.tableParameter.splice(index, 1);
    },
    // 产品参数添加按钮
    handleParamAdd() {
      if(this.paramKey==null || this.paramValue==null){
        return this.$modal.msgWarning("key或value不能为空");
      }
      // 判断key是否已存在
      let res = this.tableParameter.some((item) => item.key == this.paramKey);
      if (res) {
        this.$modal.msgWarning("key已存在，请勿重复添加");
      } else {
        var data = { key: this.paramKey, value: this.paramValue };
        this.tableParameter.push(data);
        this.paramKey = null;
        this.paramValue = null;
      }
    },

二，Html+Jquery

1，动态修改类名

$('.price-sort').addClass('box-button-focus')
$('.price-icon').attr('src', './img/eCommerce/sort_selected@2x.png')

控制两个按钮切换变色
在这里插入图片描述

/** 切换类名 **/
$('.price-sort').toggleClass('box-button-focus')

2，layui手风琴效果

可直接移步layui官网
在这里插入图片描述

html"><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="//unpkg.com/layui@2.8.8/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-collapse" lay-accordion>
  <div class="layui-colla-item">
    <div class="layui-colla-title">layui 主要面向哪些用户群体？</div>
    <div class="layui-colla-content layui-show">
      Layui 作为一个html" title=前端>前端界面组件库，但面向的却主要是后端开发者。
      <br>即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。
    </div>
  </div>
  <div class="layui-colla-item">
    <div class="layui-colla-title">为什么我的眼里常含泪水？</div>
    <div class="layui-colla-content">
      <p>因为我对这片土地爱的深沉。</p>
    </div>
  </div>
  <div class="layui-colla-item">
    <div class="layui-colla-title">Why are my eyes always brimming with tears?</div>
    <div class="layui-colla-content">
      <p>Because I love this land so deeply…</p>
    </div>
  </div>
  <div class="layui-colla-item">
    <div class="layui-colla-title">一个折叠面板的标题？</div>
    <div class="layui-colla-content">
      <p>一个折叠面板的内容。</p>
    </div>
  </div>
</div>
  
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>
</body>
</html>

有一个tab栏，4个菜单，每个菜单下有一个折叠面板（手风琴样式）
使用飘飘符`可以防止转义
jquery中可以在div标签中自定义一个属性，然后在js中通过attr取的这个属性

  var ents=``
  for(var i=0;i< displayRes.length;i++){
      const item = displayRes[i]
      var entInfo = `<div id="ent" leftPos="${i}"></div> `
      ......
      ents+=entInfo
  }
  // pos+1代表第几个tab栏
  $(`.bat${pos+1} .layui-collapse`).append(ents)

使用children可以给当前元素所有的子元素添加样式
使用each可以遍历当前元素所有的子元素

   var leftPos = $(this).attr('leftPos')
   // 移除所有选中样式 .bat${pos+1} 
   $(`.bat${leftPos +1} .company`).each(function(){
   		$(this).removeClass('left-title-text-focus')
   })
   // 添加点击的选中样式
   $(this).children('.company').addClass('left-title-text-focus')

3，输入框样式修改

在这里插入图片描述

input:focus {
  outline: 2px solid #4CAF50;
}

以上代码表示当输入框获得焦点时，外边框变为绿色。参考

4，多行文本显示省略号

在这里插入图片描述

html">  <div class="multi-text">更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》及《jquery选择器用法总结》</div>

/* 文字过多时显示省略号 */
.multi-text {
	width:100px;
    height:66px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3; 
    display: -webkit-box;  
    -webkit-box-orient: vertical; 
}

5，div内容居右

在这里插入图片描述

html">    <div style="background-color:red;width:500px;height:50px;"><span style="float: right; ">你好啊</span></div>

方法1

.float-right {
    float: right;
}

方法2

position:absolute;  right:0;

方法3

margin-right:0;

6，字符串数组转换

var a = [1,2,3,4,5];  //定义数组
var s = a.join("==");  //指定分隔符
console.log(s);  //返回字符串“1==2==3==4==5”

7， 数组过滤

return $.grep(allResult, function (item,index)
     {
       return item.productType == '1';
     }, false);

8，页面跳转传参接收参数

传参方

html"><a class="more" href="./receive.html?type=1&name=测试站">
              更多 >

接收方

html"><a class="type-name" href="">学习站服务</a>

// 获取上个页面的传参
let type= getUrlParameter("type");
let name = getUrlParameter("name");
$(document).ready(function(){
    // 动态修改子标题，得放在ready里不然无法显示
    $('.type-name').html(name )
})
// 从url中获取参数
function getUrlParameter(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(decodeURI(r[2]));
    return null; //返回参数值
}

三，其他

vscode_356">1，右键菜单加入用vscode打开文件夹

由于在安装的时候忘了勾选用vscode打开文件夹或文件，所以后面想要打开一个工程目录，只能先打开vscode，然后再菜单上选择打开文件夹，极其不友好，于是想着把用右键打开vscode工程整出来。
两个方法：1是重装，2是修改注册表
1，打开注册表，找到HKEY_CLASSES_ROOT\Directory\shell
在这里插入图片描述

2，在shell下新建“VisualCode”项，在右侧窗口的“默认”双击，在数据里输入“用VSCode打开”。这是右键上显示的文字，可以随便写，只是为了方便查看
3， 在“VisualCode”下再新建Command项，在右侧窗口的“默认”键值栏内输入程序所在的安装路径，我的是：“D:\Program Files\Microsoft VS Code\Code.exe” “%1”。其中的%1表示要打开的文件参数。
4, 配置缩略图。在VisualCode项上新建可扩充字符串值，命名为Icon，双击，把"D:\Program Files\Microsoft VS Code\Code.exe"放进数据就可以了。
在这里插入图片描述
实际效果
在这里插入图片描述


http://www.niftyadmin.cn/n/1005182.html

相关文章

QT进度条代理的实现

QT进度条代理的实现

目的 进度条也是一个基本的功能&#xff0c;这里进度条想在Tableview里面实现&#xff0c;让Tableview其中一个单元格显示进度条&#xff0c;因为就用了代理。 什么是代理&#xff0c;官方说&#xff1a; 代理(Delegate)就是在视图组件上为编辑数据提供编辑器&#xff0c;如在…
阅读更多...
STM32 时钟 寄存器 异常和中断

STM32 时钟 寄存器 异常和中断

时钟: 51单片机中有时钟和时钟树的概念&#xff0c;外设只有GPIO、定时器、和一个串口&#xff0c;使用的都是11.0592MHZ的频率&#xff0c;除了定时器外&#xff0c;其他外设只要上电就可以使用。 stm32不同外设对应的时钟频率不同&#xff0c;故有时钟树的概念 PLL&#xf…
阅读更多...
管理类联考——数学——技巧篇——公式——函数、方程与不等式

管理类联考——数学——技巧篇——公式——函数、方程与不等式

集合 A 有 n 个元素&#xff0c;则集合 A 的子集个数为 2 n 2^n 2n个&#xff0c;真子集个数为 2 n − 1 2^n-1 2n−1个&#xff0c;非空子集个数为 2 n − 1 2^n-1 2n−1个&#xff0c;非空真子集个数为 2 n − 2 2^n-2 2n−2个。抛物线 y a x 2 b x c yax^2bxc yax2bxc与轴…
阅读更多...
android fwk开发之堡垒机的使用

android fwk开发之堡垒机的使用

在Android堡垒机&#xff08;Ubuntu&#xff09;服务器上编译android AOSP源码。 1. 添加用户 1、切换到root用户&#xff1a; sudo su - 2、添加账户&#xff1a;useradd -m username 删除用户&#xff1a;userdel -r username 使用useradd创建的账户需要修改密码 修改用户密…
阅读更多...
使用Xshell服务器跑程序，用pycharm连接服务器远程开发

使用Xshell服务器跑程序，用pycharm连接服务器远程开发

目标&#xff1a; 1.使用Xshell在服务器上创建自己项目需要的虚拟环境 2.用pycharm实现远程服务器的连接&#xff08;这样就可以在本地debug或者写代码&#xff0c;然后再用xshell在服务器上跑&#xff09; 一、使用Xshell在服务器上创建自己项目需要的虚拟环境 1.打开Xshe…
阅读更多...
(css)在网页上添加Live 2D网页二次元可动小人

(css)在网页上添加Live 2D网页二次元可动小人

(css)在网页上添加Live 2D网页二次元可动小人 效果&#xff1a; 代码&#xff1a; <script src"js/L2Dwidget.min.js"></script> <script src"js/L2Dwidget.0.min.js"></script> <script>L2Dwidget.init({"model&quo…
阅读更多...
iOS distribution发布证书过期或者被手动revoke了app会被下架吗？

iOS distribution发布证书过期或者被手动revoke了app会被下架吗？

在距离distribution 证书过期一个月&#xff08;或被手动revoke了&#xff09;的时候会受到apple的邮件 虽然distribution过期&#xff08;或者被手动revoke&#xff09;了&#xff0c;如果你的开发者账号是company&#xff08;公司&#xff09;类型或个人类型的&#xff0c;只…
阅读更多...
threejs材质

threejs材质

个人博客地址: https://cxx001.gitee.io 前言 前面简单的介绍了材质&#xff0c;你已经了解到材质结合几何体就可以创建网格&#xff0c;网格对象才可以添加到Threejs渲染的场景中。材质就像物体的皮肤&#xff0c;决定了几何体的外表。如&#xff0c;几何体看起来是否像金属…
阅读更多...
最新文章

Copyright @ 2022~2023