从JS到Vue

Ten peaches

于 2024-08-05 18:52:17 发布

阅读量539

点赞数 19

分类专栏： JavaWeb 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/2403_85375987/article/details/140931259

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JavaScript-Vue

JS

引入方式

     <!-- 内部脚本 -->
     <!--  <script>
        alert('Hello,JS');
     </script> -->
     <!-- 外部脚本 -->
      <script src="js\demo.js"></script>

基础语法

输出语句

方式一:弹出警告框

window.alert("Hello JS");

方式二:写入HTML页面中

document.write("Hello JS");

方式三:控制台输出

console.log("Hello JS");

变量

var 定义的是一个全局变量，还可以重复声明

{
         var a = 0;
         var a = "A";
     }
     alert(a);

let 定义的是一个局部变量，不可以重复声明

{
         let a = 0;
       //a = "A";

         alert(a);
     }

const 定义的是一个常量

const pi = 3.14;
    //pi = 3.15;

    alert(pi);

数据类型

//原始数据类型
        alert(typeof 3); //number
        alert(typeof 3.14);//number
    
        alert(typeof "A"); //string
        alert(typeof 'Hello');//string
    
        alert(typeof true);//boolean
        alert(typeof false);//boolean
    
        alert(typeof null);//object
    
        var a ;
        alert(typeof a);//undefined?

运算符

空格也为true

 var age = 20;
         var _age = "20";
         var $age = 20;
        
         alert(age == _age); //true
         alert(age === _age); //false
         alert(age === $age); //true
    
    
    
         //类型转换 - 其他类型转为数字
         alert(parseInt("12")); //12
         alert(parseInt("1222A45")); //1222
         alert(parseInt("A45")); //NaN
    
        // 类型转换 - 其他类型转为boolean
         if(0){ //false
             alert("0 转换为false");
         }
   
         if(NaN){ //false
             alert("NaN 转换为false");
         }
    
         if(-1){ //true
             alert("除0和NaN其他数字都转为 true");
         }
    
         if(""){ //false
             alert("空字符串为 false, 其他都是true");
         }
            
         if(null){ //false
            alert("null 转化为false");
         }
    
        // if(undefined){ //false
        //     alert("undefined 转化为false");
        // }

函数

//定义函数-1
         function add(a,b){
            return  a + b;
         }
    
        //定义函数-2
        var add = function(a,b){
            return  a + b;
        }
    
    
        //函数调用
        var result = add(10,20);
        alert(result);

对象

Array

forEach不会遍历中间的undefined，splice第一个参数是从索引几开始，第二个参数是删除几个

//定义数组
     var arr = new Array(1,2,3,4);
     var arr = [1,2,3,4];

     console.log(arr[0]);
     console.log(arr[1]);

    //特点: 长度可变 类型可变
     var arr = [1,2,3,4];
     arr[10] = 50;

     console.log(arr[10]);
     console.log(arr[9]);
     console.log(arr[8]);

     arr[9] = "A";
     arr[8] = true;

     console.log(arr);



    var arr = [1,2,3,4];
    arr[10] = 50;
     for (let i = 0; i < arr.length; i++) {
         console.log(arr[i]);
     }

     console.log("==================");

    //forEach: 遍历数组中有值的元素
     arr.forEach(function(e){
         console.log(e);
     })

     //ES6 箭头函数: (...) => {...} -- 简化函数定义
     arr.forEach((e) => {
         console.log(e);
     }) 

    //push: 添加元素到数组末尾
     arr.push(7,8,9);
     console.log(arr);

    //splice: 删除元素
    arr.splice(2,2);
    console.log(arr);

String

 //创建字符串对象
    //var str = new String("Hello String");
    var str = "  Hello String    ";

    console.log(str);

    //length
    console.log(str.length);

    //charAt
    console.log(str.charAt(4));

    //indexOf
    console.log(str.indexOf("lo"));//3

    //trim
    var s = str.trim();
    console.log(s);

    //substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
    console.log(s.substring(0,5));

JSON

定义json

var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
    alert(jsonstr.name);

json字符串--js对象

var obj = JSON.parse(jsonstr);
    alert(obj.name);

js对象--json字符串

alert(JSON.stringify(obj));

BOM

Window

获取

     window.alert("Hello BOM");
     alert("Hello BOM Window");

方法

confirm - 对话框 -- 确认: true , 取消: false


     var flag = confirm("您确认删除该记录吗?");
     alert(flag);

定时器 - setInterval -- 周期性的执行某一个函数

     var i = 0;
     setInterval(function(){
         i++;
         console.log("定时器执行了"+i+"次");
     },2000);

定时器 - setTimeout -- 延迟指定时间执行一次

     setTimeout(function(){
         alert("JS");
     },3000);

Location

    alert(location.href);

    location.href = "https://www.itcast.cn";

DOM

获取元素

1. 获取Element元素

1.1 获取元素-根据ID获取

     var img = document.getElementById('h1');
     alert(img);

1.2 获取元素-根据标签获取 - div

     var divs = document.getElementsByTagName('div');
     for (let i = 0; i < divs.length; i++) {
         alert(divs[i]);
     }

1.3 获取元素-根据name属性获取

     var ins = document.getElementsByName('hobby');
     for (let i = 0; i < ins.length; i++) {
         alert(ins[i]);
     }

1.4 获取元素-根据class属性获取

     var divs = document.getElementsByClassName('cls');
     for (let i = 0; i < divs.length; i++) {
         alert(divs[i]);
     }

2. 查询参考手册, 属性、方法

    var divs = document.getElementsByClassName('cls');
    var div1 = divs[0];
    
    div1.innerHTML = "传智教育666";

案例

<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    //1. 点亮灯泡 : src 属性值
    var img = document.getElementById('h1');
    img.src = "img/on.gif";


    //2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML += "<font color='red'>very good</font>"; 
    }


    //3. 使所有的复选框呈现选中状态
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked = true;//选中
    }

</script>

事件