javascript和vue基础

//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 属性引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--内联:在标签的事件属性中添加js代码-->
<input type="button" value="按钮" onclick="alert('点击了')">
<script>
    console.log("内部代码执行成功！！！1")
</script>
<!--引入外部s文件，script标签引入文件后不能写js代码-->
<script src="my.js"></script>
</body>
</html>

1.5，方法

function 方法名(参数列表){方法体}

let 方法名 = function(参数列表){方法体}

let 方法名 = new Function("参数 1","参数 2","参数 3","方法体");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1，无参无返回值方法
    function f1() {
        console.log("f1");
    }

    f1();
    //2，有参无返回值
    function f2(name,age) {
        console.log(name+":"+age);
    }

    f2("zs",10086);
    //无参有返回值
    function f3() {
        return "返回值";
    }
    console.log(f3());

    //有参有返回值
    function f4(x,y) {
        return x*y;
    }
    let a = f4(9,9);
    console.log(a);

    let f5 = function (name,age) {
        console.log(name+":"+age);
    }
    f5("ls",28);

    let f6 = new Function("name","age","console.log(name+':'+age)");
    f6("ww",99);
</script>
</body>
</html>

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/vue@2.6.14/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 属性里面， @ 事件名="方法" 简写

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^