javascript和vue基础
目录
一，JavaScript
1，变量,数据类型,运算符,各种语句,数组,方法,
1.1，变量
1.2，数据类型
1.3，运算符
1.4，如何在 HTML 页面中添加 JS 代码
1.5，方法
1.6，和页面相关的方法
1.7，NaN
1.8，JavaScript 对象分类
1.9，前端 MVC 设计模式
2.0，前端 MVVM 设计模式
二，VUE
1，VUE 框架的工作流程
2，VUE 框架中的各种指令
一，JavaScript
作用：给页面添加动态效果
其语言特点如下：
基于面向对象的语言
属于弱类型语言
属于脚本语言, 不需要编译由浏览器解析执行.
安全性强：JS 语言只能访问浏览器内部的数据，浏览器以外的禁止访问
交互性强：由于 JS 语言是嵌入到 HTML 页面中,最终执行在客户端的浏览器中的语言，和用户是直接接触，Java 语言是运行在服务器的语言，用户需要进行交互的话必须通过网络才可以，所以JS 语言的交互性会更强.
1，变量,数据类型,运算符,各种语句,数组,方法,
1.1，变量
JS 语言属于弱类型语言,声明变量的时候不需要指定类型
通过 let 或 var 声明变量
let 声明的变量，作用域和 java 语言类似
var 声明的变量，作用域是全局的
//JS-let:
for(let i=0;i<10;i++){
let j = i+1;
}
let x = i+j; // 运行时访问不到 i 和 j 因为超出作用域
// JS-var:
for(var i=0;i<10;i++){
var j = i+1;
}
var x = i+j; // 此时可以访问到 i 和 j 的值,因为 var 声明的变量相当于是全局的1.2，数据类型
JavaScript 中只有对象类型
常见的对象类型：
number 数值：相当于 Java 中所有数值类型的总和
string 字符串：可以用单引号或双引号修饰
boolean 布尔值：true/false
undefined 未定义：当变量只声明不赋值的时候变量为未定义类型
typeof 变量：获取变量类型
1.3，运算符
算术运算符：+ - * / %，运算规则和Java相同，但是除法和 java 不一样, JS 语言会自动根据结果转换整数或小数
关系运算符： > < >= <= != == ===
==和===区别：
==先统一等号两边变量的类型 再比较值
===先比较两个变量的类 型,类型一致后再比较值. "666"==666 true "666"===666 false
逻辑运算符：&& || !
赋值运算符：=，+= ，-=， *= ，/= ，%=
三目运算符：条件?值 1：值 2
各种语句：
if else
while
for
switch case
1.4，如何在 HTML 页面中添加 JS 代码
三种添加方式：
内联：在标签的事件属性中添加 js 代码，事件触发时执行
内部：在页面的任意位置写 script 标签，标签体内写 js 代码
外部：在单独的 js 文件中写 js 代码，在 html 页面中通过 script 标签的 src 属性引入
Title
1.5，方法
function 方法名(参数列表){方法体}
let 方法名 = function(参数列表){方法体}
let 方法名 = new Function("参数 1","参数 2","参数 3","方法体");
Title
1.6，和页面相关的方法
-
通过选择器找到页面中的元素对象 let 元素对象 = document.querySelector("选择器");
-
获取和修改元素的文本内容 元素对象.innerText = "xxxx"; 修改 元素对象.innerText 获取
-
获取和修改控件的值 文本框对象.value = "xxx"; 修改 文本框对象.value 获取
1.7，NaN
Not a Number, 代表不是一个数字
isNaN(变量) 返回值 true 代表是 NaN false 代表不是 NaN
NaN 和任何数值进行任何运算 结果都是 NaN
1.8，JavaScript 对象分类
内置对象：包括 string , number,boolean 等
BOM：浏览器对象模型
DOM：文档对象模型
1.8.1，BOM
Browser Object Model: 浏览器对象模型, 包含和浏览器相关的内容.
window 对象: 此对象里面的属性和方法称为全局属性和全局方法, 访问时可以省略 window.
window 中常见的方法：
isNaN(); 判断变量是否是 NaN
parseInt()/parseFloat(); 将字符串转成整数或小数, 还可以将小数转成整数
alert(); 弹出提示框
confirm();弹出确认框
prompt(); 弹出文本框
let timer = setInterval(方法,时间间隔); 开启定时器
clearInterval(timer); 停止定时器
setTimeout(方法,时间间隔); 开启只执行一次的定时器
window 中常见的属性:
location: 位置
location.href 获取和修改浏览器的请求地址
location.reload() 重新加载/刷新
history: 历史
history.length 得到历史页面数量
history.back() 返回上一页面
history.forward() 前往下一页面
1.8.2，DOM
Document Object Model 文档对象模型, 包含和页面相关的内容
通过选择器找到页面中的元素对象 let 元素对象 = document.querySelector("选择器");
获取和修改元素的文本内容 元素对象.innerText = "xxxx"; 修改 元素对象.innerText 获取
获取和修改控件的值 文本框对象.value = "xxx"; 修改 文本框对象.value 获取
创建元素对象 let 元素对象 = document.createElement("标签名");
添加元素对象 已经在页面中显示的元素对象.append(元素对象);
获取页面 body 元素对象 document.body
1.9，前端 MVC 设计模式
MVC 设计模式就是将实现一个业务的所有代码划分为 3 部分.
M: Model 模型, 数据模型 指和数据相关的代码
V:View 视图, 指和页面相关的代码
C:Controller 控制器, 指将数据展示到页面中的过程代码
MVC 设计模式的 Controller 中需要频繁的进 DOM 操作(查找页面中元素,创建元素等),会浪 费资源,MVVM 设计模式可以解决此问题
2.0，前端 MVVM 设计模式
MVVM 设计模式也是将实现一个业务的所有代码划分为 3 部分.
M:Model 模型, 数据模型 指和数据相关的代码
V:View 视图, 指和页面相关的代码
VM: ViewModel 视图模型, 负责将页面中可能发生改变的元素和变量在内存中进行绑定, 当需要改变页面中元素时,只需要修改变量, 视图模型会不断监听变量值的改变, 当值发生改变 时会从内存中找到对应元素让其跟着改变
二，VUE
目前最流行的前端框架, 此框架基于 MVVM 设计模式
两种使用方式:
1， vue.js 文件引入 html 页面中使用
2， 脚手架环境下使用
引入外部的 js 文件两种方式:
1，把 js 文件下载到本地 然后引入的到自己的页面中
2，直接引入一个 CDN 服务的地址
国外比较稳定的两个 CDN
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/[email protected]/dist/vue.min.js
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
1，VUE 框架的工作流程
VUE 框架中创建的 Vue 对象相当于是 MVVM 设计模式中的 VM 视图模型，该对象会将页面 中可能发生改变的元素和变量在内存中进行绑定，并且会一直监听变量值的改变， 当值发生改变时会从内存中的对应关系找到对应的页面元素，并对其进行修改，以后需要改变页面时只需要找到页面对应的变量，让变量改动页面会自动跟着改变
2，VUE 框架中的各种指令
{{变量}}：用于插值: 让此处的文本和变量进行绑定，不写在标签里面也可以使用
v-text="变量"：让元素的文本内容和变量进行绑定
v-html="变量"：让元素的 html 标签内容 和变量进行绑定
v-bind:属性名="变量"：让元素某个属性的值和变量进行绑定，可以省略
v-bind 直接写：属 性名进行绑定
v-model="变量"：让控件的值和变量进行双向绑定，控件的值改变变量的值会跟着改变，同时变量的值改变也会影响控件的值，
应用场景: 当需要获取控件的值的时候使用双向绑定
v-for="(对象,下标) in 数组" 让显示的元素内容和数组进行绑定
v-if="变量" 让元素是否显示和变量进行绑定，true 显示, false 不显示(删除元素)
v-else 让元素的显示状态和 v-if 元素的状态相反
v-show="变量" 让元素是否显示和变量进行绑定，true 显示, false 不显示(隐藏)
v-on:事件名="方法" 事件绑定，绑定的方法必须写在 Vue 对象中的 methods 属性里面， @ 事件名="方法" 简写