Vue初学日记Day2
Vue初学日记Day2
1.代码链接
https://github.com/dglhtao/VueLearning
2.品牌管理案例
实现品牌的添加、删除、搜索
代码:
<!DOCTYPE html>
<html lang="en">
<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>2019-9-28</title><script src="./lib/vue-2.4.0.js"></script><link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body><div id="app"><div class="panel panel-primary"> <!-- panel窗体控件 --><div class="panel-heading">操作框</div><div class="panel-body form-inline" align="center"> <!-- form-inline 元素都在一行 align="center" 内部组件居住 --><label>Id:<input v-model="id" class="form-control" @keyup.f2="add" @keyup.13="add" v-color2="'blue'" v-fontweight="900" v-fontsize="'30px'"> <!-- 钩子函数传递参数 v-color2="'blue'",传递内容为字符串'blue',若是v-color2="blue"则会在data中寻找名为blue的变量 --></label><label>名称:<input v-model="name" class="form-control" @keyup.13="add()">
<!-- 事件绑定机制,加()可给事件传参 --></label><input type="button" class="btn btn-primary" value="添加" @click="add"><p></p><label>搜索:<!-- <input v-model="nameKey" id="nameKey" class="form-control" @change="search(nameKey)"> --><!-- 注意 Vue中所有指令调用时,都以v- 开头 --><input v-model="nameKey" class="form-control" @change="search(nameKey)" v-focus v-color></label></div></div><table class="table table-bordered table-hover" style="text-align: center"><thead><tr><th>Id</th><th>Name</th><th>时间</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in table" :key="index"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.time | time1}}</td><td><a href="" @click.prevent="del(item.id)">删除</a></td></tr></tbody><!-- search方法二的表格显示方法<tbody><tr v-for="(item,i) in search(nameKey)" :index="i"><td v-for="(val,key,index) in item" :index="i">{{val}}</td><td><a href="" @click.prevent="del(item.id)">删除</a></td></tr></tbody> --></table></div><script>Vue.filter("time1",function(time){var y=time.getFullYear()var m=time.getMonth().toString().padStart(2,'0')var d=time.getDate().toString().padStart(2,'0')var hh=time.getHours().toString().padStart(2,'0')var mm=time.getMinutes().toString().padStart(2,'0')var ss=time.getSeconds().toString().padStart(2,'0')// padStart padEnd// String.prototype.padStart(maxlength,'fillchar')// String.prototype.padEnd(maxlength,'fillchar')return `${y}-${m}-${d} ${hh}:${mm}:${ss}`})//自定义全局按键修饰符Vue.config.keyCodes.f2=113// 自定义全局指令Vue.directive("focus",{bind:function(el){//注意:在每个函数中第一个永远是el,表示被绑定了指令的那个元素,这个el参数是个原生的JS对象// el.focus() // 不能将焦点初始在el上原因:在元素绑定指令时,元素还没有被插入DOM树中,这时元素还在内存中,// 没有显示在页面,focus()方法没有作用,只有在元素插入到DOM中后才能获取焦点}, //每当指令绑定到元素上的时候,会立即执行bind函数,只执行一次inserted:function(el){ el.focus()//和JS行为有关的操作,最好在inserted中去执行,放置bind,JS行为不生效//和样式相关的操作,一般都可以在bind执行}, //inserted表示元素插入到DOM中的时候(页面内容加载后),会执行inserted函数,触发一次。updated:function(){ } //当VNode更新的时候(即DOM节点更新时),会执行updated,可能会触发多次})// Vue.directive() // param1为指令名称,不需要加v-前缀,但在调用时必须加上v-前缀// param2是个对象,这个对象身上有钩子函数,这些函数可以在特定阶段,执行相关操作Vue.directive('color',{bind:function(el){el.style.color='red'//样式不必写入DOM中,可以直接写入元素属性(内存中),元素被解析入DOM中(页面中)时,样式也会被解析写入//样式,只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中,这个元素肯定有了一个内联样式//浏览器的渲染引擎会解析这个样式,应用给这元素},inserted:function(el){el.style.color="blue"}})Vue.directive('color2',{bind:function(el,binding){el.style.color=binding.valueconsole.log(binding.expression)console.log(binding.value)console.log(binding)}})var vm= new Vue({el:"#app",data:{id:"",name:"",nameKey:"",list:[{id:"1",name:"奔驰",time:new Date()},{id:"2",name:"宝马",time:new Date()},{id:"3",name:"奥迪",time:new Date()}],table:[]},methods:{add(){// document.write("11")if(this.id==""){alert("Id should not be empty!")return;}elseif(this.name==""){alert("Name should not be empty!")return;}var bool = this.list.some(item => {if(item.id==this.id)return true});console.log(bool)if (bool==true)alert("Id should be unique")else{//this.ctime=new Date()//var car={id:this.id, name:this.name, ctime:this.ctime}//this.list.push(car)this.list.push({id:this.id,name:this.name,time:new Date()})this.search(this.nameKey)this.id = this.name ="" /* 等号计算时从右至左 */// Vue中已实现了数据的双向绑定,每当修改data,// Vue会默认监听到数据改动,自动把最新数据应用到页面上// Vue中,我们更多的是在对Model数据的操作,// 同时,在操作Model数据的时候,指定业务逻辑}},del(id){// 1.如何根据id,找到要删除的那项的索引/* 2.找到索引后,直接调用数组的 splice 方法http://www.w3school.com.cn/jsref/jsref_splice.asp */// 方法一// for (let index = 0; index < this.list.length; index++) {// const element = this.list[index];// if (element.id==id) {// this.list.splice(index, 1)// break// }// }// 方法二// this.list.some((item,i)=>{// if(item.id==id){// this.list.splice(i,1)// return true;// // some()中 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。// }// })// (x1,x2)=>x3{} 是 function(x1,x2){return x3} 的缩写,匿名函数// JS array.some()方法:https://www.runoob.com/jsref/jsref-some.html// 方法三this.list.splice(this.list.findIndex(item=>{if(item.id==id) return true}),1)this.search(this.nameKey)// findIndex(): https://www.runoob.com/jsref/jsref-findindex.html},search(nameKey){this.table=[]this.list.forEach(item=>{if((item.name.toString().indexOf(nameKey)!=-1))this.table.push(item)})//search方法二,返回筛选后的数组/* return this.list.filter(item=>{if(item.name.includes(nameKey)) return item}) */// String.prototype.includes("要包含的字符串") 返回true、false/* prototype 能向对象添加属性 function employee(name,job,born){this.name=name;this.job=job;this.born=born;}var bill=new employee("Bill Gates","Engineer",1985);employee.prototype.salary=null;bill.salary=20000;document.write(bill.salary);*/}},filters:{time2(time){var y=time.getFullYear()var m=time.getMonth().toString().padStart(2,'0')var d=time.getDate().toString().padStart(2,'0')return `${y}-${m}-${d}`}},// 定义私有指令directives:{'fontweight':{ //设置字体粗细 bind:function(el,binding){el.style.fontWeight=binding.value}},'fontsize': function(el,binding){ //注意:这个function等同于把代码写入bind和update中去el.style.fontSize =parseInt(binding.value) + 'px'}},created(){this.table=this.list}})// document.getElementById("nameKey").focus() // 得放最后// Vue不提倡对dom的操作</script>
</body>
</html>
3.样式
bootstrap组件查询链接:https://v3.bootcss.com/components/#panels
1)panel窗体控件
panel-primary样式
<div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">Panel title</h3></div><div class="panel-body">Panel content</div></div>
2)输入框样式
class="form-control"
3)button样式
class="btn btn-primary"
4)table样式
<table class="table table-bordered table-hover"><thead><tr><th>属性名</th></tr></thead><tbody><tr><!-- 行 --><td>属性1</td><td>属性2</td></tr></tbody></table>
class="table-bordered" 边框
class="table-hover" 鼠标滑过时,行变深色
4.JS中的原生对象
内置(build-in)对象是原生(native)对象的子集,前者在引擎初始化阶段就被创建好,后者包括一些在运行过程中动态创建的对象。
常用内置对象:Object、Function、Array、String、Boolean、Number、Date
使用方法参考:https://www.w3school.com.cn/jsref/index.asp
1)Array数组
属性:
length 数组长度
prototype 添加自定义属性和方法
方法:
concat(array2) 连接两个或更多数组,并返回结果
shift() 删除并返回数组第一个元素
pop() 删除并返回数组最后一个元素
unshift(item) 将参数加载到数组前面,返回数组长度
push(item) 将参数加载到数组后面,返回数组长度
splice(start, deleteCount, val1, val2, ...) 从start位置开始删除deleteCount项,并从该位置起插入val1, val2, ...
reverse() 将数组反序,并返回新的数组
slice(start, end) 返回从原数组指定起始终止下标之间组成的新数组
sort() 对数组元素进行排序,并返回
2)String字符串
属性:
length 字符串长度
prototype 添加自定义属性和方法
方法:
charAt(index) 返回指定位置的字符
charCodeAt(index) 返回指定位置字符的Unicode编码
concat(str2) 连接字符串,并返回
fontcolor(“Red”) 使用指定颜色来显示字符串
fontsize(size) 使用指定大小来显示字符串,size为1至7的数字
fromCharCode(code) 从字符编码创建一个字符串
indexOf(searchValue,fromIndex) 检索字符串,从第fromIndex位置开始搜索searchValue首次出现的位置,无fromIndex则从首位开始。返回首次出现的位置或-1。(注:indexOf对大小写敏感)
italics() 使用斜体显示字符串
replace(a,b) 用b替换a
slice(start,end) 截取片段
toLowerCase() 转换为小写
toUpperCase() 转换为大写
valueOf() 返回某个字符对象数值
3)Boolean对象
prototype
toString()
valueOf()
4)Number对象
创建:
var myNum=new Number(value);
var myNum=Number(value);
属性:
MAX_VALUE 可表示的最大的数
MIN_VALUE 可表示的最小的数
NEGATIVE_INFINITY 负无穷大,溢出时返回的值
POSITIVE_INFINITY 正无穷大,溢出时返回的值
NaN 非数字时返回的值
prototype
方法:
toString()
toLocaleString() 把数字转换为字符串,使用本地数字格式顺序
toFixed(num) 把数字四舍五入转化为指定小数位的数字字符串
toExponential(num) 小数点之后有num位数字,不足时补0,省略则保留尽可能多位
5)Date对象
方法:
Date() 返回当日的日期和时间
getFullYear()
getMonth()
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
getMilliseconds()
获取年 月(0~11) 日(1~31) 星期(0~6) 小时 分钟 秒 毫秒
getTime() 获取1970.1.1至今的毫秒数
parse(dateString) 获取1970.1.1至指定字符串日期的毫秒数
setFullYear()
setMonth()
setDate()
setHours()
setMinutes()
setSeconds()
setMillisenconds()
setTime()
date变量设置年 月 日 时 分 秒 毫秒 从1970.1.1开始的毫秒数
toString()
toTimeString() 时间部分转换为字符串
toDateString() 日期部分转换为字符串
5、Array.
foreach
map
filter
some
every
find
reduce()
reduceRight()
indexOf()
Vue初学日记Day2相关推荐
- Vue初学日记Day1
Vue初学日记Day1 1.配置环境 参考:https://www.jianshu.com/p/454c3a7c5602 node-v10.16.0-x64.msi 链接:https://pan.ba ...
- 云音乐vue开发日记
云音乐vue开发日记 前言 2020-11-21 1.vue中sass的配置 2.页面布局 3.引组件 2020-11-22 1.el-menu的使用 2.css经验 3.element-ui修改默认 ...
- vue——初学Vue
vue--初学Vue 1.事件处理 1.1事件修饰符 prevent:阻止默认事件 stop:阻止事件冒泡 once:事件只触发一次 capture:使用事件的捕获模式 self:只有event.ta ...
- Vue错误日记 ——关于Vue-Router出现esm-bundler.js?6c02:2127 Uncaught TypeError: Object(...) is no的解决方案
Vue错误日记 --关于Vue-Router无法正常使用的解决方案 前言 配置 项目环境 项目代码 问题处理 结束语 前言 今天用 Vue-cli 搭建 Vue 项目时,发现Router无法正常挂载, ...
- 前端自学日记-day2
前端自学日记 day2 内容总结:html其他标签的扩展学习. 1. 学习进度更新 2. 具体内容 常用标签 (注:day1中常用标签为其中一部分,这里总结一下文章书写相关标签) 标题.段落和换行标签 ...
- go html vue,[终极巨坑]golang+vue开发日记【三】,登陆界面制作(二)
写在前面 本期内容是承接上期已经做好了登陆界面来写的,不过本期是以golang为主,可能需要大家把最基本的语法结构熟悉一下:菜鸟教程.这样的话方便展开,自然而然的,本篇也是直接实战为主.这次需要依赖m ...
- 实习日记——Day2
今天上午学校有考试,所以我是考完试,中午匆匆赶到公司的.因为下午给我安排了两位前辈的培训. 今天的收获和思考有: 1.准时下班没有错! 今天下班时就没昨天那么纠结该不该走了.因为我发现单独坐在角落的我 ...
- VUE初学--表单输入与v-model
1.基本用法 1.v-modle 在input的基本用法 表单控件在实际业务需求中运用是非常常见,比如,输入框.下拉框.多选.单选等,一般常见于,用户登录注册等,用他们完成数据录入,校验,提交等 Vu ...
- vue学习日记-关于同步跟异步的个人理解
!!!(我请你吃饭和你请我吃饭的不同) 通俗理解: 同步:我请你吃饭,你马上跟我走了,或者是只有你跟我走了我才会去吃 异步:你请我吃饭,我没有马上跟你走的话,你就自己先去吃了. 现在的vue默认是支持 ...
最新文章
- 多线程Java服务器简单实现
- 如何禁用请求库中的日志消息?
- 【转】二维图形的几何变换
- 《数据挖掘与数据化运营实战 思路、方法、技巧与应用》—— 读书笔记
- 「数据ETL」从数据民工到数据白领蜕变之旅(六)-将Python的能力嫁接到SSIS中...
- java发送会议邀请邮件模板_Spring 发送邮件 HTML邮件
- 算法:对象方式数组去重
- 【Es】ElasticSearch 自定义分词器
- 关于float的内部结构
- jcodec_java-jcodec-有人看过该库的文档吗?
- 多质点列车动力学模型
- vue 引入液晶数字字体
- 火狐浏览器插件学习01
- Python SQLite3 教程
- DayDream模拟手柄操作
- 为什么新一代的程序员连操作系统的基本知识都不懂?
- 异地多活 以阿里为例
- Mysql--01.安装
- 智能硬件APP开发之路:基于机智云APP开源框架
- 写一篇基于SPEA2算法的高维多目标救灾物资分配的论文