Vue的使用

一、Vue.js开发基础

1、Vue的基本使用

el：挂载

data：模型数据

msg：数据

2、插值语法的使用

用于解析标签体内容

 3、v-text与v-html

 4、v-mode指令

v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定

 5、v-on事件绑定指令和methods

给元素注册点击事件

6、v-bind指令

用于绑定数据和元素属性

 7、生命周期

每一个vue实例从创建到销毁的过程

 二、结构渲染

1、条件渲染指令v-show、v-if

v-show与v-if的区别

（1）v-if

 （2）v-show

 2、列表渲染指令v-for

（1）v-for遍历数组

 （2）v-for遍历对象

（3）v-for遍历数字

（4）v-for中的key

 三、计算属性与侦听器

1、侦听器

作用：用来倾听数据有没有变化，一旦有变化就调用函数

语法：在和data、methods这些平级的位置写一个watch

2、在数组中使用侦听器：

1）彻底替换为一个新数组,那么可以被侦听到。

2）如果使用了push()等标准的数组操作方法,那么可以被侦听到

3）如果直接修改数组的元素,那么无法被侦听到。

（解决方法：使用$set()方法修改元素的值。Vue3语法。）

 3、侦听器完整写法

 四、存储方法

1.cookie
使用场景：

1）记住密码,下次自动登录。

2）记录用户浏览数据,进行商品(广告)推荐。

特点：

1）cookie保存在浏览器端。

2） 单个cookie保存的数据不能超过4KB。

3） cookie中的数据是以域名的形式进行区分的。

4） cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除 |

5）cookie中的数据会随着请求被自动发送到服务器端。

由于cookie存储机制有很多缺点,HTML5不再使用它,转而使用改良后的WebStorage存储机制

(localStorage和sessionStorage)

2.localStorage
什么是localStorage？

在HTML中，新加入了一个localStorage特性，这个特性主要用来作为本地存储来使用

它解决了cookie存储空间不足的问题，每条cookie的存储空间为4K，localStorage一般为5M

localstorage的生命周期

LocalStorage生命周期是永久,这意味着除非用户在显示在浏览器提供的UI上清除localStorage信息

否则这些信息将永久存在。

localStorage的局限

a.在IE8以上的IE版本才支持localstorage这个属性。

b.目前所有的浏览器中都会被localStorage的值类型限定为string类型,

对我们日常比较常见的JSON对象类型需要一个转换。

判断浏览器是否支持localStorage这个属性

localStorage的写入

！表示取反

3.sessionStorage

SessionStorage的生命周期

SessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了

那么所有通过Session存储的数据也就被清空了。

五、JSON转换

1、JSON字符串

JSON和JSON对象的关系：

JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串

2、JSON和JS对象互换

 六、控制页面css样式

1、绑定class属性

2、绑定style样式

 

七、事件处理
1、事件与事件流
事件：

JavaScript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性。

常见的有加载事件、鼠标事件。

事件流：

由于DOM是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候，就存在一个顺序问题,这就涉及到了事件流

页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。

js的事件流三阶段：

事件捕捉阶段(capture phrase):事件开始由顶层对象触发,然后逐级向下传播,直到目标元素:

处于目标阶段(target phrase):处于绑定事件的元素上;

事件冒泡阶段(bubbling phrase):事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;

(事件捕获是从上到下,而事件冒泡,是从下到上。)

2、事件冒泡

微软提出了名为事件冒泡(event bubbling)的事件流。

事件冒泡可以形象的比喻成把一颗石头投入水中,泡泡会一直从水底冒出水面。

也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。

因此在事件冒泡的概念下在button按钮发生click事件的顺序应该是 button→div→body→html→document.

3、事件捕获

网景提出另一种事件流名为事件捕获(event capturing)。

与事件冒泡相反,事件会从最外层开始发生,直到具体的元素。

因此在事件捕获的概念下在button按钮发生click事件的顺序应该是document→html→body→div→button。

4、事件方法

@click:当单击元素时,发生click事件。

@dbclick:当双击元素时,发生dbclick事件。

@focus:当元素获得焦点时,发生focus事件。

@blur:当元素失去焦点时发生blur事件。

@submit:当提交表单时,发生submit事件。

@keydown:当键盘被按下时,发生keydown事件。

@keyup:当键盘被松开,发生keyups事件。

@mouse enter: 当鼠标指针穿过(进入)被选元素时,会发生mousedown事件。

@mouse down:当鼠标指针移动到元素上方,并按下鼠标左键,会发生mousedown事件。

@mouse leave: 当鼠标离开被选元素时,会发生mouseleave事件。

@mouse move:当鼠标指针在指定的元素中移动时，会发生 mousemove 事件。

@mouse out:在鼠标指针离开被选元素或任意子元素时都会被触发。

@mouse over:当鼠标指针位于元素上方时，会发生 mouseover 事件。

@mouse up:当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件。

5、事件修饰符

 

八、AJAX

Ajax就是让浏览器跟服务器交互的一套API。

它的作用就是让浏览器和服务器进行交互。

是向服务器请求数据的局部刷新页面的技术。

1. ajax发送post请求

1.创建对象,实例化一个ajax对象

2.调用open方法,设置请求方式和地址

3.设置请求头

2、ajax发送get请求

 3、get请求提交参数