Vue
文章平均质量分 73
study
兰兰的风。。。
学习总结记录(公众号:元气满满的大咸鱼。欢迎关注。)
展开
-
Vue+Element-ui实现表单验证
文章目录效果templatejs实现校验通过的实现效果效果校验效果template<div> <el-form ref="userFormRef" :model="userForm" :rules="userFormRule" label-width="100px" :status-icon="true" > <el-row :gutter="20"> <el-col :span="12原创 2023-03-22 14:22:33 · 433 阅读 · 0 评论 -
Vue+Element-ui实现表格嵌套表格(表头不同)
【代码】Vue+Element-ui实现表格嵌套表格(表头不同)原创 2023-03-21 00:20:12 · 2615 阅读 · 0 评论 -
Vue基础案例三:购物车(组件化思想练习)
实现效果:1.原始布局:<div id="app"> <div class="container"> <div class='cart'> <!--1 头部标题 --> <div class="title">我的商品</div> <!--2 中间列表 --> <div>原创 2021-03-10 16:00:06 · 905 阅读 · 1 评论 -
Vue基础案例二:图书管理
展示图书列表添加图书修改图书删除图书使用的特性- 过滤器(格式化日期)- 自定义指令(获取表单焦点)- 计算属性(统计图书数量)- 侦听器(验证图书存在性)- 生命周期(图书数据处理)效果:实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &l.原创 2021-03-04 21:02:55 · 213 阅读 · 2 评论 -
Vue中的变更方法与替换数组
变更方法push()、pop()、shift()、unshift()splice()sort()reverse()会变更原始数组,所以页面上的数据会发生变化(触发视图更新)。替换数组filter()concat()slice()不会变更原始数组,所以页面上的数据不会发生变化。<div id='box'> <ul> <li v-for='(item,index) in books'>{{item}}</li>原创 2021-03-04 17:15:59 · 5166 阅读 · 2 评论 -
Vue基础案例一:Tab栏切换
实现效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-03-04 15:30:56 · 768 阅读 · 1 评论 -
Vue基础day05总结
1 路由相关路由的本质:一种对应关系。比如说输入要访问的url地址,浏览器要去请求这个url地址对应的资源。前端路由:依靠hash值(锚链接)的变化进行实现。即 监听事件并分发执行事件处理函数,从而根据不同的事件来显示不同的页面内容。前端路由的核心实现:onhashchange 可以监听hash值变化window.onhashchange = function(){ //location.hash可以获取到最新的hash值 console.log(location.hash);}2原创 2021-03-03 15:18:54 · 87 阅读 · 0 评论 -
Vue基础day03总结
1 组件组件可以扩展 HTML 元素,封装可重用的代码组件参数的data值必须是函数,要求返回一个对象.。所以各个组件的数据私有,值相互独立,即每个实例可以维护一份被返回对象的独立的拷贝。组件模板必须是单个根元素(html标签有一个顶级根元素,不能是兄弟节点)组件模板的内容可以是模板字符串``((ES6语法))命名:短横线(my-component)和驼峰式(MyComponent)—建议使用短横线全局组件是component,没有s的;而局部组件是components,是有s的全局组件原创 2021-03-01 12:59:58 · 140 阅读 · 3 评论 -
Vue基础day04总结
js的异步(1)异步调用定时任务Ajax事件函数(2)多次异步调用的依赖分析结果顺序不确定如果调用结果存在顺序,则需要嵌套----导致“回调地狱”的问题1 Promise解决异步深层嵌套的问题Promise是一个(函数)对象console.log(typeof Promise)console.dir(Promise);基本用法:resolve()成功reject()失败p.then 得到结果var p=new Promise(function(reso原创 2021-03-01 18:42:16 · 171 阅读 · 0 评论 -
Vue基础day02总结
1.表单相关(1)操作(通过v-model)input 单行文本textarea 多行文本select 下拉多选radio 单选框checkbox 多选框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> f原创 2021-02-28 22:04:58 · 228 阅读 · 0 评论 -
Vue基础day01总结
1 指令v-model: 表单控件上创建双向绑定v-on: 绑定事件监听器//无参数v-on:click="handle";//一个参数v-on:click="handle('ok')"//一个参数,一个事件对象v-on:click="handle('ok', $event)"v-text: 将数据填充到标签中//msg是data中的一个变量,保存数据<span v-text="msg"></span><!-- 和下面的一样 --&g原创 2021-02-24 22:24:52 · 129 阅读 · 0 评论