javascript
·Mr.zuo
这个作者很懒,什么都没留下…
展开
-
Vue图书管理系统
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <title>图书管理</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>...原创 2019-10-29 18:55:56 · 4764 阅读 · 0 评论 -
自适应Vue购物车
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>购物车练习</title> <script src="../js/vue-2.6.9.min.js" type="text/javascript"></script> ...原创 2019-10-29 18:52:25 · 153 阅读 · 0 评论 -
VUE之组件(组件细节、模块系统、v-model语法糖)
H5编码规范分析如下代码中的组件解析结果H5规范中要求,table里为tbody,tbody里需要放置tr和td,否则会将代码解析到table外。方案:这里,tbody中放置的是row,所以会解析到table同级外部,解决方案为is属性。既然tbody里只能放置tr,那么这里便改成tr+is属性template组件模板写法写法一:直接写在选项里的模板直接在构造器里的te...原创 2019-10-28 19:43:43 · 851 阅读 · 0 评论 -
VUE之组件(Props特性深析)
Prop命名风格【前言】创建一个博文组件,如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话,它是没有办法使用的,这也正是 prop的由来。Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop特性的时候,它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题,我们可以用一个 props 选项将其包含在该组件可接受的prop 列表...原创 2019-10-28 19:17:10 · 555 阅读 · 0 评论 -
VUE之组件(组件通信、单向数据流)
组件通信我们已经知道,从父组件向子组件通信,通过 props 传递数据就可以了,但 Vue组件通信的场景不止有这一种,归纳起来,组件之间通信可以用下图表示。单向数据流单向数据流是父子组件的核心概念,props是单向绑定的。当父组件的属性发生变化的时候,会传导到子组件。但是反之,为了防止子组件无意间修改来父组件的状态,从下往上的数据流是不允许的。当父组件属性改变时,会传进子组件。...原创 2019-10-23 19:39:05 · 102 阅读 · 0 评论 -
VUE之组件(动态组件及keep-alive)实现选项卡
动态组件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>选项卡案例</title> <script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"...原创 2019-10-23 19:25:06 · 791 阅读 · 0 评论 -
VUE之组件(复用性、props、单向数据流)
组件组织通常一个应用会以一棵嵌套的组件树的形式来组织。–VUE:组件化、数据驱动例如,可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、标题之类的组件。为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。组件的注册类型分两种:全局注册和局部注册。组件复用性可以将组件进行任意次数的复用,例如,利用组件定义一个超级链接,在项目中多次使用单个根元素...原创 2019-10-22 19:40:01 · 1071 阅读 · 0 评论 -
VUE之组件(基础、分类、命名)
前言组件( Component )是 Vue.js 最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的。接下来会由浅入深地学习组件的全部内容,并通过几个案例练习熟练使用 Vue 组件。Vue.js的组件就是提高重用性的,让代码可复用组件注册回顾下创建 Vue 实例的方法:组件Component与之类似,需要注册后才可以使用。注册有全局注册和局部注册两种方式。①全...原创 2019-10-22 15:06:48 · 1445 阅读 · 0 评论 -
JavaScript深拷贝与浅拷贝
如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化①如果B也跟着变了,说明这是浅拷贝,功力不够②如果B没变,那就是深拷贝,自食其力,修成正果接下来会分别阐述栈堆,基本数据类型与引用数据类型,这些概念能帮助理解深拷贝与浅拷贝数据类型基本数据类型:number,string,boolean,null,undefined引用数据类型:...原创 2019-10-21 19:19:19 · 123 阅读 · 0 评论 -
VUE之表单与v-model
v-model基本用法表单控件在实际业务较为常见,比如单选、多选、下拉选择、输入框等,用它们可以完成数据的录入、校验、提交等。 Vue 提供了 v-model指令,用于在表单类元素上双向绑定数据。例如在输入框上使用时,输入的内容会实时映射到绑定的数据上。<!DOCTYPE html><html> <head> <meta charset...原创 2019-10-15 19:54:10 · 135 阅读 · 0 评论 -
Array数组操作(变异更新、替换)
JS数组操作①末尾添加-push,会改变原始数组,返回值为数组更新后的新数组长度。var arr = [11,22,33,44,55,66] var arr_push = arr.push(777) console.log(arr_push) console.log(arr)/*push数组末尾添加---返回值变异后的数组长度*/②末尾删除-pop,会改变原始数组,返回...原创 2019-10-15 19:21:05 · 772 阅读 · 0 评论 -
VUE之v-bind类名与样式绑定
课程(1)v-bind回顾(2)class-对象语法(3)class-数组语法(4)内联样式style-对象语法(5)内联样式style-计算属性语法前言DOM元素经常动态绑定一些类名或者style样式,本节讲解下使用v-bind指令绑定class与style的多种方法。之前介绍过v-bind基本用法及语法糖,主要用于动态更新HTML元素属性,接下来简...原创 2019-10-15 09:25:10 · 370 阅读 · 0 评论 -
VUE之内置指令(基本、条件、列表渲染)
JS迭代器迭代器模式是一种相对简单的模式,迭代器的使用可以极大地简化数据操作,目前的绝大部分语言都内置了迭代器(1)forEach迭代器forEach方法接收一个函数作为参数,对数组中每个元素使用这个函数,只调用这个函数,数组本身没有任何变化,即不改变原始数组<!DOCTYPE html><html> <head> <me...原创 2019-10-14 21:49:44 · 269 阅读 · 0 评论 -
Vue之计算属性与侦听器
什么是计算属性?通过之前章节,已经可以搭建一个简单的Vue应用,在模板里双向绑定一些数据或者表达式。但是,表达式如果过长或者逻辑更为复杂时,就会变得臃肿甚至难以阅读和维护,比如这里的表达式包含3个操作,并不是很清晰,所以在遇到复杂逻辑时应该使用计算属性,使用计算属性对上例进行改写。计算属性用法在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,最终返回计...原创 2019-10-12 15:55:14 · 453 阅读 · 0 评论 -
Vue生命周期钩子
一、什么是生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称为Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例...原创 2019-10-12 13:49:28 · 110 阅读 · 0 评论