从JS到Vue

标签：function arr Vue console log alert var JS

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>

事件

事件绑定

方式一:通过 HTML标签中的事件属性进行绑定

    function on(){
        alert("按钮1被点击了...");
    }

方式二:通过 DOM 元素属性绑定

    document.getElementById('btn2').onclick = function(){
        alert("按钮2被点击了...");
    }

常见事件

<body onl oad="load()">

    <form action="" style="text-align: center;" onsubmit="subfn()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
        
        <input id="b1" type="submit" value="提交">

        <input id="b1" type="button" value="单击事件" onclick="fn1()">
    </form>  

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onm ouseover="over()" onm ouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>

</body>

<script>
    //onload : 页面/元素加载完成后触发
    function load(){
        console.log("页面加载完成...")
    }

    //onclick: 鼠标点击事件
    function fn1(){
        console.log("我被点击了...");
    }

    //onblur: 失去焦点事件
    function bfn(){
        console.log("失去焦点...");
    }

    //onfocus: 元素获得焦点
    function ffn(){
        console.log("获得焦点...");
    }

    //onkeydown: 某个键盘的键被按下
    function kfn(){
        console.log("键盘被按下了...");
    }

    //onmouseover: 鼠标移动到元素之上
    function over(){
        console.log("鼠标移入了...")
    }

    //onmouseout: 鼠标移出某元素
    function out(){
        console.log("鼠标移出了...")
    }

    //onsubmit: 提交表单事件
    function subfn(){
        alert("表单被提交了...");
    }

</script>

案例

<body>

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

    <input type="button" value="点亮" onclick="on()"> 
    <input type="button"  value="熄灭" onclick="off()">

    <br> <br>

    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    <br> <br>

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

    <input type="button" value="全选" onclick="checkAll()"> 
    <input type="button" value="反选" onclick="reverse()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick
    function on(){
        //a. 获取img元素对象
        var img = document.getElementById("light");

        //b. 设置src属性
        img.src = "img/on.gif";
    }

    function off(){
        //a. 获取img元素对象
        var img = document.getElementById("light");

        //b. 设置src属性
        img.src = "img/off.gif";
    }



    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblur
    function lower(){//小写
        //a. 获取输入框元素对象
        var input = document.getElementById("name");

        //b. 将值转为小写
        input.value = input.value.toLowerCase();
    }

    function upper(){//大写
        //a. 获取输入框元素对象
        var input = document.getElementById("name");

        //b. 将值转为大写
        input.value = input.value.toUpperCase();
    }



    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function checkAll(){
        //a. 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");

        //b. 设置选中状态
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = true;
        }

    }
    
    function reverse(){
        //a. 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");

        //b. 设置未选中状态
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = false;
        }
    }



</script>

Vue

快速入门

要先在head标签范围内导入vue.js文件

<body>

    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>

指令

v-bind和v-model

v-on

v-if与v-show

v-for

案例

<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>

生命周期

<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>

标签：function,arr,Vue,console,log,alert,var,JS
From： https://blog.csdn.net/2403_85375987/article/details/140931259

JS

引入方式

基础语法

输出语句

变量

数据类型

运算符

函数

对象

Array

String

JSON

BOM

Window

Location

DOM

获取元素

案例

事件

事件绑定

常见事件

案例

Vue

快速入门

指令

v-bind和v-model

v-on

v-if与v-show

v-for

案例

生命周期

相关文章

赞助商

阅读排行