Vue小知识

JavaScript对象分类

内置对象:包括string , number,boolean等
BOM:浏览器对象模型
DOM:文档对象模型

BOM

1. Browser Object Model

浏览器对象模型;包含和浏览器相关的内容

2. window对象:

此对象里面的属性和方法称为全局属性和全局方法,访问时可以省略window.

3. window中常 见的方法:

isNaN(); 判断变量是否是NaN
parselnt)/parseFloat(); 将字符串转成整数或小数,还可以将小数转成整数
aler(); 弹出提示框
confirm();弹出确认框
prompt(); 弹出文本框
setlnterval(方法 时间间隔);开启定时器
clearlnterval(timer); 停止定时器
setTimeout(方法，时间间隔); 开启只执行一次的定时器

4. window中常见的属性:

4.1 location: 位置

location.href 获取和修改浏览器的请求地址
location.reload() 重新加载/刷新

4.2 history: 历史

history.length 得到历史页面数量
history.back() 返回上一页面
history.forward() 前往下一页面

DOM

1. Document Object Model

文档对象模型,包含和页面相关的内容

2. 通过选择器找到页面中的元素对象

let元素对象= document.querySelector(“选择器”);

3. 获取和修改元素的文本内容

元素对象.innerText= “Xxx”; 修改
元素对象.innerText 获取

4. 获取和修改控件的值

文本框对象.value= “xxx”; 修改
文本框对象.value 获取

4.创建元素对象

let元素对象= document.createElement(“标签名”);

5.添加元素对象

已经在页面中显示的元素对象. append(元素对象);

前端MVC设计模式

MVC设计模式就是将实现一个业务的所有代码划分为3部分.

1. M:

Model模型，数据模型指和数据相关的代码

2. V:

View 视图，指和页面相关的代码

3. C:

Controller控制器， 指将数据展示到页面中的过程代码

MVC设计模式的Controller中需要频繁的进DOM操作(查找页面中元素，创建元素等),会浪费
资源,MVVM设计模式可以解决此问题

前端MVVM设计模式

MVVM设计模式也是将实现一个业务的所有代码划分为3部分.

1. M:

Model 模型，数据模型指和数据相关的代码

2. V:

View 视图,指和页面相关的代码

3. VM:

视图模型，负责将页面中可能发生改变的元素和变量在内存中进行绑定,当需要改变页面中元素时，只需要修改变量,视图模型会不断监听变量值的改变,当值发生改变时会从内存中找到对应元素让其跟着改变.

VUE

目前最流行的前端框架， 此框架基于MVVM设计模式

1. 两种使用方式:

vue.js文件引入html页面中使用
脚手架环境下使用

2. 引入外部的js文件两种方式:

2.1 把js文件下载到本地然后引入的到自己的页面中

2.2 直接引入一个CDN服务的地址

以下推荐国外比较稳定的两个CDN,国内还没发现哪一家比较好，目前还是建议下载到本地。
Staticfile CDN (国内) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg: https://unpkg.com/vue@2.6.14/dist/vue.min.js
cdnjs: https://cdnjs.cloudflare.com/ajax/ibs/vue/2.1.8/vue.min.js

3. VUE框架的工作流程

VUE框架中 创建的Vue对象相当于是MVVM设计模式中的VM视图模型,该对象会将页面中可能发生改变的元素和变量在内存中进行绑定，并且不会一直监听变量值的改变, 当值发生改变时会从内存中的对应关系找到对应的页面元素，并对其进行修改,以后需要改变页面时只需要找到页面对应的变量,让变量改动页面会自动跟着改变。

4.VUE框架的各种指令

4.1 {{变量}}, 插值

让此处的文本和变量进行绑定, 不写在标签里面也可以使用

4.2 v-text=“变量”

让元素的文本内容和变量进行绑定

4.3 v-html=“变量”

让元素的html标签内容和变量进行绑定

4.4 v-bind:属性名=“变量”

让元素某个属性的值和变量进行绑定可以省略v-bind 直接写:属性名进行绑定。

4.5 v-model=“变量”

让控件的值和变量进行双向绑定,控件的值改变变量的值会跟着改变,同时变量的值改变也会影响控件的值，应用场景: 当需要获取控件的值的时候使用双向绑定。

4.6 事件绑定：

v-on:click=“f()”
v-on:事件名="方法”事件绑定, 绑定的方法必须写在Vue对象中的methods属性里面

@click=“f()” （简写）
@事件名=“方法”

eval();此方法可以将字符串以js代码的形式运行。

4.7 v-for=“(对象,下标) in 数组”

让显示的元素内容和数组进行绑定

4.8 v-if=“true”

让元素是否显示和变量进行绑定，true显示，false不显示

4.9 v-else

和v-if状态取反。

4.10 v-show=“true”

让元素是否显示和变量进行绑定，true显示，false不显示(隐藏元素)

ElementUl

目前比较流行的前端框架,基于HTML,CSS,JavaScript,Vue的一款前端框架，可以让程序员高效的开发出前端页面。

1. 如何使用

1.1 复制安装代码并修改对应文件路径

1.1.1 ElementUl框架样式文件

https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css

1.1.2 Vue框架文件

https://cdn.staticfile.org/vue/2.6.14/vue.min.js

1.1.3 ElementUl框架文件

https://cdn.staticfile.org/element-ui/2.15.9/index.min.js

1.2 复制组件代码到对应区域

2. 常用组件

2.1 导航菜单

default-active设置默认激活的位置
mode= "horizontal"设置横向展示如果去掉则变成纵向

2.2 布局

el-row表示行
el-col表示列
span设置占多少分栏
offset设置分栏的偏移数量

2.3 走马灯（轮播图）

v-for中in的后面写数字则直接遍历数字