Day 2 javaweb

不吃香菜的牛

已于 2023-10-25 17:19:45 修改

阅读量87

点赞数

文章标签： javascript 前端开发语言

于 2023-10-22 22:27:08 首次发布

本文链接：https://blog.csdn.net/CaiZijian2002/article/details/133959337

版权

P21 JS的数组 Array

    var arr = [1,2,3,4];
    arr[10] = 50;

    arr.forEach(function(e){
        console.log(e);
    
    })

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

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

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

P22 字符串对象 String

JS创建字符串的方法有两种：

var 变量名 = new String("...");//方法一

var 变量名 = "...";//方法二 

    var str = "帅哥是蔡子健";
    console.log(str);
    //length
    console.log(str.length);

    //charAt 返回在指定位置的字符
    console.log(str.charAt(4));

    //indexOf 检索字符串的位置
    console.log(str.indexOf("帅"));

    //trim 去除两边的空格
    var s = str.trim;
    console.log(s);

    //substring(start,end) --开始索引，结束索引(含头不含尾)
    console.log(str.substring(3,5));//这里是"蔡子"因为含头不含尾

P23 JSON（JavaScript object notation）也即JavaScript对象标记法，JSON是通过JavaScript对象标记书写的文本

JSON其key值必须用双引号标注

    var user={
        name:"Tom",
        age:10,
        gender:"male",
        // eat:function(){
        //     alert("用膳");
        // }
        //可以简写
        eat(){
            alert("用膳");
        }
    }
    alert(user.name);
    user.eat()

P24 BOM

    //Window对象
    //获取  window可以省略
    window.alert("下午好！");
    alert("下午好！window");

    //方法
    // confirm 对话框 --确定 true --取消 false
    var flag = confirm("您确认删除该记录吗？");
    alert(flag);

    // 定时器 -setInterval 每隔一段时间执行某一个函数，后面的2000为2s
    var i = 0;
    window.setInterval(function(){
        i++;
        console.log("现在是"+i+"次计数");
    },2000);

    // setTimeout 延迟指定时间执行一次
    setTimeout(() => {
        alert("蔡子健超级帅！");
    }, 3000);
    
    //location 地址栏对象
    // window.location.属性
    // href:设置或者返回完整的URL
    alert(location.href);//获取地址栏中的网址输出到alert中
    location.href("www.baidu.com");//将www.baidu.com复制到地址栏并跳转

P25 DOM对象（document object model文档对象类型）

P27 事件绑定

常见事件

P30 Vue-指令

浅尝v-model

<body>
    <!-- //编写视图 -->
    <!-- vue的核心：双向绑定 -->
    <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：为html标签绑定属性值

<body>
    <!-- //编写视图 -->
    <!-- vue的核心：双向绑定 -->
    <div id="app" >
        
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

    </div>

</body>
<script>
    //定义vue对象，定义数据类型
    new Vue({
        el:"#app",//vue接管区域
        data:{
            url:"https://www.baidu.com"
        }
    })
    
</script>

将文本框内容和按钮链接绑定

<div id="app" >
        
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <!-- //将表单元素绑定到url上 -->
        <input type="text" v-model="url">
        

</div>

v-on

<body>
    <!-- //编写视图 -->
    <!-- vue的核心：双向绑定 -->

    <div id="app">
        <input type="button" value="点我一下" v-on:click="handle()">
    </div>

</body>
<script>
    //定义vue对象，定义数据类型
    new Vue({
        el:"#app",//app接管区域
        data:{
             
        },
        methods:{
            handle:function(){
                alert("你点我了!");
            }
        }
    })

注意！"methods"的s别少了，v-on:click和onclick不一样！

v-if和v-show

v-for

P33 Vue的生命周期

不吃香菜的牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day 2 javaweb

P23 JSON（JavaScript object notation）也即JavaScript对象标记法，JSON是通过JavaScript对象标记书写的。P25 DOM对象（document object model文档对象类型）JSON其key值必须用双引号标注。P22 字符串对象 String。P21 JS的数组 Array。
复制链接

扫一扫