VUE02

Vue案例:


info submit
姓名:
年龄:
性别:
手机:
姓名 性别 年龄 手机 删除

localStorage:

  • localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
  • 存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。

常用API:

  • localStorage.setItem("key","value");
    以“key”为名称存储一个值“value”
  • localStorage.getItem("key");
    获取名称为“key”的值
  • localStorage.removeItem("key");
    删除名称为“key”的信息
  • localStorage.clear();
    清空localStorage中所有信息

一、MVC和MVVM的区别?

1. MVC

M是指业务模型,V是指用户界面,C则是控制器

  • M即model模型,  数据层,负责数据的处理和获取的数据接口层。
  • V即View视图, 视图层, 是指用户看到并与之交互的界面。比如由html元素组成的网页界面,或者软件的客户端界面。
  • C即controller控制器, 控制器层,它是 Model 和 View 之间的胶水或者说是中间人。
  • Model和View是完全隔离的,由C作为中间人来负责二者的交互
  • 同时三者是完全独立分开的
  • 这样可以保证M和V的可测试性和复用性,但是一般由于C都是为特别的应用场景下的M和V做中介者,所以很难复用。



MVC的好处:耦合性低、重用性高、部署快,生命周期成本低、可维护性高
存在的问题:不适合小型,中等规模的应用程序、视图与控制器间的过于紧密的连接并且降低了视图对模型数据的访问/


2.MVVM

Model --->每个页面的单独数据
View --->每个页面中的HTML结构
VM ---> 调度者[图片上传中...(image.png-ef8151-1548517314428-0)]

![MVVM](https://upload-images.jianshu.io/upload_images/5017428-3788364b336c811c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

好处:

  • 数据驱动:


    数据驱动
  • VM提供数据的双向绑定


    VM提供数据的双向绑定


二、常见的修饰符


这个时候点击 按钮,如下图,时间冒泡了


image.png

1.阻止冒泡:

image.png

2.事件的捕获

点击按钮后,先触发 红盒子的事件,然后触发 按钮 事件,最后触发大盒子。


事件捕获

3.self

点击 按钮,触发按钮事件 和 大盒子的事件,红盒子被跳过了


点击按钮

红盒子上的事件在点击了红盒子才会触发


点击红盒子

4.阻止默认事件


阻止默认事件

5.once 事件只触发一次

点击按钮,只会 触发一次,第二次点击不会再触发


6. .stop 和 .self 的区别

  • .stop 是真正意义上的阻止冒泡;
  • .self 只会阻止自己身上冒泡行为的触发,并不会真正阻止冒泡的行为。

三、样式类

1. :class


people change,things go wrong

shit happens,life gose on

不说再见

调整呼吸,下一句让人更加惊艳

样式类


2. :style


people change,things go wrong

shit happens,life gose on

:style

四、ES6知识点

ES6中 伪数组转真数组:

forEach
伪数组转成真数组才能遍历

Array.prototype.slice.call(伪数组).forEach(()=>{});



  • 1
  • 2
  • 3
  • 4
  • 5

结果:

some 和 伪数组转真数组




some 和 every: 判断数组的所有元素是否满足指定条件,区别在于,
every是一假即假,而some是一真即真。


你可能感兴趣的:(VUE02)