Web前端基础02

已于 2022-04-30 13:59:20 修改
阅读量1k 收藏
点赞数
文章标签： java
于 2022-04-27 20:17:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuyi980531/article/details/124458511
版权

DOM文档对象模型

  • 包含和页面元素相关的内容

1、通过选择器获取页面中的元素对象

let 元素对象 = document.querySelector("选择器")

2、获取和修改元素的文本内容

元素对象.innerText = "xxx"; 修改文本内容

元素对象.innerText 获取文本内容

3、获取和修改input控件的值

控件对象.value="xxx"; 修改

控件对象.value 获取

4、创建元素对象

let 元素对象 = document.createElement("标签名");

5、添加元素对象到某个元素里面

document.body.appendChild(元素对象);

父元素.appendChild(元素对象);

父元素.append(元素对象,元素对象,元素对象);

前端MVC设计模式

  • MVC设计模式,其实就是将前端实现某个业务的所有代码划分为三部分
  • Model: 模型, 指数据模型,这个数据一般来自于服务器
  • View: 视图, 指页面标签内容
  • Controller:控制器, 指将数据展示到视图中的过程代码
  • 前端MVC设计模式弊端: 需要在Controller控制器部分频繁进行DOM(遍历查找元素的代码)操作, 会影响执行效率.

M,V,VM设计模式 

  • Model: 模型, 指数据模型,这个数据一般来自于服务器
  • View: 视图, 指页面标签内容
  • ViewModel:视图模型, 将页面中可能发生改变的元素和某个变量在内存中进行绑定,当变量的值发生改变时会从内存中直接找到对应的元素让其改变.

Vue 

  • Vue框架是目前最流行的前端框架
  • Vue对象相当于MVVM设计模式中的VM, 负责将页面中可能发生改变的元素和变量进行绑定, 绑定完之后会不断监听变量的改变, 当变量的值发生改变时会自动找到对应的元素并改变其显示内容.
  • 相关指令:
  • {{变量}}:插值, 让此处的文本内容和变量进行绑定
  • v-text="变量", 让元素的文本内容和变量进行绑定
  • v-html="变量", 让元素的html内容和变量进行绑定
  • v-bind:属性名="变量", 让元素的xxx属性和变量进行绑定 可以省略掉v-bind
  • v-model="变量", 双向绑定, 当变量的值发生改变页面会跟着改变, 页面的内容改变时变量也会跟着改变,只有使用form表单中的控件时才会涉及到双向绑定.
  • v-on:事件名="方法", 事件绑定 简写@事件名="方法" , 调用的方法必须声明在Vue里面的methods里面
  • v-for="(变量,i) in 数组"; 遍历数组 同时重复生成当前标签,数量和数组中对象的数量一致
  • v-if="变量" , 变量值为true时显示元素 ,为false时 删除元素
  • v-else 和v-if结合使用 取反
  • v-show="变量" , 变量值为true时显示元素 ,为false时 隐藏元素(需要频繁切换显示状态时使用)

 Demo相关：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //创建标签
    let d = document.createElement("div");
    //给div设置显示文本
    d.innerText = "我是div";
    //把div添加到body里面  append是添加多个标签
    document.body.appendChild(d)
    //创建h1和h2
    let h1 = document.createElement("h1");
    let h2 = document.createElement("h2");
    h1.innerText = "这是h1";
    h2.innerText = "这是h2";
    document.body.append(h1,h2);
    //创建图片并添加
    let i = document.createElement("img");
    //给元素设置属性
    i.src="../b.jpg";
    //添加到页面中
    document.body.append(i);
</script>
</body>
</html>

帅哥美女添加练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="添加帅哥" onclick="f(1)">
<input type="button" value="添加美女" onclick="f(2)">
<script>
    let input = document.querySelector("#i1");//得到文本框对象
    function f(x) {
        let imgName = x==1?"../b.jpg":"../b.jpg";//得到图片名
        for (let i = 0; i <input.value; i++) {
            let img = document.createElement("img");
            img.src = imgName;
            img.width = 200;
            img.height = 200;
            document.body.append(img);
        }
    }
</script>
</body>
</html>

员工列表练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1" placeholder="姓名">
<input type="text" id="i2" placeholder="工资">
<input type="text" id="i3" placeholder="工作">
<input type="button" value="添加" onclick="f()">
<table border="1">
    <tr>
        <th>姓名</th><th>工资</th><th>工作</th>
    </tr>
</table>
<script>
    //获取三个文本框
    // let i1 = document.querySelector("#i1");
    // let i2 = document.querySelector("#i2");
    // let i3 = document.querySelector("#i3");
    //通过标签名获取table
    let table = document.querySelector("table");
    function f() {
        //创建tr和td
        let tr = document.createElement("tr");
        let nameTd = document.createElement("td");
        let salaryTd = document.createElement("td");
        let jobTd = document.createElement("td");
        //把用户输入的内容添加到td里面
        nameTd.innerText = i1.value;
        salaryTd.innerText = i2.value;
        jobTd.innerText = i3.value;
        //把td装进tr
        tr.append(nameTd,salaryTd,jobTd);
        //把tr装进table
        table.append(tr);
    }
</script>
</body>
</html>

自定义对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品名</th>
        <th>价格</th>
        <th>库存</th>
    </tr>
</table>
<script>
  //定义一个空的Person类
  function Person(){}
  //实例化Person对象
  let p1 = new Person();
  //动态添加属性
  p1.name = "刘德华"
  p1.age = 50;
  //动态添加方法
  p1.run = function (){
    console.log(this.name+":"+this.age);
  }
  //调用对象的方法
  p1.run();

  //定义一个自带属性和方法的对象
  function Car(){
      this.name = "宾利";
      this.price = 500;
      this.run = function (){
          console.log(this.name+":"+this.price);
      }
  }
  let c1 = new Car();
  c1.run();

  //直接实例化空对象的方式
  let p2 = {};
  p2.name = "貂蝉";
  p2.age = 66;
  p2.run = function (){
      console.log(this.name+":"+this.age);
  }
  p2.run();

  //直接实例化带属性和方法的对象
  let p3 = {
      name:"吕布",
      age:18,
      run:function (){
          console.log(this.name+":"+this.age);
      }
  }
  p3.run();

  //将商品信息封装到一个对象中，在数组里面装多个表示商品信息的对象
  let arr = [{title:"小米4",price:5000,num:100},
      {title:"小米1",price:5000,num:100},
      {title:"小米2",price:5000,num:100},
      {title:"小米3",price:5000,num:100},]
  //得到table对象
  let table = document.querySelector("table");
  //遍历数组
  for (let item of arr){
      let tr = document.createElement("tr");
      let titleTd = document.createElement("td");
      let priceTd = document.createElement("td");
      let numTd = document.createElement("td");
      //给td添加显示的商品信息
      titleTd.innerText = item.title;
      priceTd.innerText = item.price;
      numTd.innerText = item.num;
      tr.append(titleTd,priceTd,numTd);
      //把tr装进table
      table.append(tr);
  }
</script>
</body>
</html>

综合练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
  <caption>个人信息</caption>
  <tr>
    <td>照片：</td>
    <td><img id="head_img" src="head.jpg" width="50px" alt=""></td>
  </tr>
  <tr>
    <td>名字：</td><td id="name_td">xxx</td>
  </tr>
  <tr>
    <td>年龄：</td><td id="age_td">xxx</td>
  </tr>
  <tr>
    <td>好友：</td>
    <td><ul id="friend_ul"></ul></td>
  </tr>
</table>
<input type="button" value="请求数据" onclick="f()">
<script>
  function f(){
    //模拟从服务器获取的数据
    let person = {name:"苍老师",age:50,url:"../b.jpg",friend:["克井","传奇","成恒"]};
    //获取页面中的元素对象
    let head_img = document.querySelector("#head_img");
    let name_td = document.querySelector("#name_td");
    let age_td = document.querySelector("#age_td");
    let friend_ul = document.querySelector("#friend_ul");
    //把对象中的数据取出并赋值给页面中的元素对象
    head_img.src = person.url;
    name_td.innerText = person.name;
    age_td.innerText = person.age;
    //遍历好友数组
    for (let friendName of person.friend) {
      //创建li
      let li = document.createElement("li");
      li.innerText = friendName;
      //把li添加到ul里面
      friend_ul.append(li);
    }
  }
</script>
</body>
</html>

 HelloVue：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <h1>{{info}}</h1>
</div>
<!--引入网络版Vue框架文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入本地vue.js文件-->
<!--<script src="vue.js"></script>-->
<script>
    let v = new Vue({
        el:"#app", /*告诉Vue对象管理哪个元素*/
        data:{
            info:"Hello Vue!"
        }
    })

    setTimeout(function (){
        v.info = "值改变了！";
    },3000);
</script>
</body>
</html>

文本相关指令：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <!--{{变量}}:插值，让此处的文本和data里面的变量进行绑定-->
  <h1>{{info}}</h1>
  <!--v-text=变量，让元素的文本内容和变量进行绑定-->
  <p v-text="info"></p>
  <!--v-html=变量，让元素的标签内容和变量进行绑定-->
  <p v-html="info"></p>
</div>
<script src="../js/vue.js"></script>
<script>
  let v = new Vue({
    el:"div",
    data:{
      info:"文本相关练习<b>加粗</b>"
    }
  })
</script>
</body>
</html>

属性绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <!--v-bind属性绑定-->
  <!--<input type="text" v-bind:value="msg">-->
  <!--v-bind属性绑定 简写-->
  <input type="text" :value="msg">
  <a :href="url">超链接</a>
  <img :src="imgUrl" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
  let v = new Vue({
    el:"div",
    data:{
      msg:"属性绑定测试",
      url:"http://www.baidu.com",
      imgUrl:"../b.jpg"
    }
  })
</script>
</body>
</html>

双向绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!--只有value才有双向绑定 v-model绑定value-->
    <!--当需要获取input值的时候使用双向绑定-->
  <input type="text" v-model="msg">
  <h1>{{msg}}</h1>
    <!--一组&nbsp代表一个空格-->
    a&nbsp;&nbsp;&nbsp;&nbsp;b
    <hr>
    <input type="radio" v-model="gender" value="男">男
    <input type="radio" v-model="gender" value="女">女
    <h2>{{gender}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  let v = new Vue({
    el:"div",
    data:{
      msg:"双向绑定测试",
      gender:"男"
    }
  })
</script>
</body>
</html>

事件绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <input type="button" value="按钮1" v-on:click="f()">
  <input type="button" value="按钮2" @click="f1()">
  {{info}}
</div>
<script src="../js/vue.js"></script>
<script>

  let v = new Vue({
    el:"div",
    data:{info:"事件绑定"},
    methods:{
        /*方法定义的两种形式*/
        f:function (){
            v.info="按钮1点击了"
        },
        f1(){
            v.info="按钮2点击了"
        }
    }
  })
</script>
</body>
</html>

猜数字游戏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <input type="text" v-model="num" placeholder="请输入0-100之间的整数">
  <input type="button" value="猜一猜" @click="f()">
  <h1>结果：{{info}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
  let x = parseInt(Math.random()*101);
  let v = new Vue({
      el:"div",
      data:{
          info:"", num:""
      },
      methods:{
          f(){
              if(v.num>x){
                  v.info="猜大了！"
              }else if(v.num<x){
                  v.info="猜小了！"
              }else {
                  v.info="猜中了！"
              }

          }
      }
  })
</script>
</body>
</html>

计算器练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <input type="text" v-model="num1">
  <input type="text" v-model="num2">
  <input type="button" value="加" @click="f('+')">
  <input type="button" value="减" @click="f('-')">
  <input type="button" value="乘" @click="f('*')">
  <input type="button" value="除" @click="f('/')">
  <h1>结果：{{info}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
  let v = new Vue({
    el:"div",
    data:{
      info:"", num1:"", num2:""
    },
    methods:{
      f(x){
        /*eval:将字符串按照代码方式运行*/
        v.info = eval(v.num1+x+v.num2);
      }
    }
  })
</script>
</body>
</html>

循环遍历：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <table border="1">
        <caption>国产优秀纯电汽车</caption>
        <tr>
            <th>编号</th>
            <th>名字</th>
            <th>价格</th>
            <th>类型</th>
        </tr>
        <!--car代表数组中的每一个对象，i代表遍历的下标-->
        <tr v-for="(car,i) in arr">
            <td>{{i+1}}</td>
            <td>{{car.name}}</td>
            <td>{{car.price}}</td>
            <td>{{car.type}}</td>
        </tr>
    </table>

    <h1 v-for="car in arr">{{car.name}}---{{car.price}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:{
            arr:[{name:"比亚迪汉EV",price:250000,type:"轿车"},
                {name:"极氪001",price:300000,type:"轿跑"},
                {name:"蔚来ET7",price:500000,type:"轿车"}]
        }
    })
</script>
</body>
</html>

 

 

员工列表练习：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <input type="text" placeholder="姓名" v-model="name">
  <input type="text" placeholder="工资" v-model="salary">
  <input type="text" placeholder="工作" v-model="job">
  <input type="button" value="添加" @click="f()">
  <table border="1">
    <caption>员工列表</caption>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>工资</th>
      <th>工作</th>
      <th>操作</th>
    </tr>
    <tr v-for="(e,i) in arr">
      <td>{{i+1}}</td>
      <td>{{e.name}}</td>
      <td>{{e.salary}}</td>
      <td>{{e.job}}</td>
      <td><input type="button" value="删除" @click="del(i)"></td>
    </tr>
  </table>
</div>
<script src="../js/vue.js"></script>
<script>
  let v = new Vue({
    el:"div",
    data:{
      name:"",
      salary:"",
      job:"",
      arr:[{name:"张三",salary:500,job:"销售"},
        {name:"李四",salary:300,job:"人事"}]
    },
    methods:{
      f(){
        //往arr数组中添加一个对象
        v.arr.push({name:v.name,salary:v.salary,job:v.job})
        v.name="";
        v.salary="";
        v.job="";
      },
      del(i){
        //删除arr数组中i下标位置的对象
        v.arr.splice(i,1)
      }
    }
  })
</script>
</body>
</html>

 

 

个人信息练习：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <table border="1">
    <caption>个人信息</caption>
    <tr>
      <td>照片：</td>
      <td><img :src="person.imgUrl" width="50px" alt=""></td>
    </tr>
    <tr>
      <td>名字：</td><td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄：</td><td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友：</td>
      <td><ul>
        <li v-for="name in person.friend">{{name}}</li>
      </ul></td>
    </tr>
  </table>
  <input type="button" value="请求数据" @click="f()">
</div>
<script src="../js/vue.js"></script>
<script>
  let v = new Vue({
    el:"div",
    data:{
      person:{name:"xxx",age:"xxx",imgUrl:"../day05/head.jpg",friend:["xxx","xxx"]}
    },
    methods:{
      f(){
        //模拟从服务器获取的数据
        let person = {name:"苍老师",age:50,imgUrl:"../day05/a.jpg",friend:["克井","传奇","成恒"]};
        v.person = person;
      }
    }
  })
</script>
</body>
</html>

 显示隐藏相关：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <!--v-if让元素是否显示和变量进行绑定，不显示时是把元素删除了-->
  <h1 v-if="isVisible">刘德华</h1>
  <!--v-else和v-if结合使用 和上面条件取反-->
  <h1 v-else>刘苍松</h1>
  <!--v-show让元素是否显示和变量进行绑定，不显示时是把元素隐藏了
  (频繁切换显示状态时使用)-->
  <h2 v-show="isVisible">张学友</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  let v = new Vue({
    el:"div",
    data:{
      isVisible:true
    }
  })
</script>
</body>
</html>

 综合练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <!--true登录 不显示  false没登录 显示-->
  <!--在-->
  <div v-if="!isLogin">
    <a href="javascript:void(0)">注册</a>
    <!--如果超链接点击时 不离开此页面需要添加javascript:void(0)，废掉它的跳转功能-->
    <!--href="" 空字符串表示跳转刷新-->
    <a href="javascript:void(0)" @click="isLogin=true">登录</a>
  </div>
  <div v-else>
    <input type="text" v-model="newName">
    <!--如果在el：所确定的范围里，也就是在body>div里访问data里面的东西不用加v.arr.push(newName)
    直接arr.push(newName)，如果在methods:{}所定义的方法里面需要加v.。-->
    <input type="button" value="添加" @click="arr.push(newName)">
    <a href="javascript:void(0)" @click="isLogin=false">登出</a>
  </div>
  <ul>
    <li v-for="name in arr">{{name}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  let v = new Vue({
    el:"body>div",
    data:{
      newName:"",
      arr:["刘备","关羽"],
      isLogin:false
    }
  })
</script>
</body>
</html>

 

 

 员工列表练习EUI版本：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="css/eui.css">
</head>
<body>
<div id="app">
  <input type="text" placeholder="姓名" v-model="name">
  <input type="text" placeholder="工资" v-model="salary">
  <input type="text" placeholder="工作" v-model="job">
  <input type="button" value="添加" @click="add()">
  <h1>员工列表</h1>
  <el-table
          :data="arr"
          style="width: 100%">
    <el-table-column
            type="index"
            label="编号"
            width="180">
    </el-table-column>
    <el-table-column
            prop="name"
            label="名字"
            width="180">
    </el-table-column>
    <el-table-column
            prop="salary"
            label="工资"
            width="180">
    </el-table-column>
    <el-table-column
            prop="job"
            label="工作"
            width="180">
    </el-table-column>
    <el-table-column label="操作">
      <!--scope代表每行对应的数据里面的index属性代表下标,
            里面的row代表每行对应的数组中的对象-->
      <template slot-scope="scope">
        <el-popconfirm @confirm="handleDelete(scope.$index, scope.row)"
                title="这是一段内容确定删除吗？"
        >
          <el-button size="mini"
                     type="danger" slot="reference">删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        name:"",
        salary:"",
        job:"",
        arr:[{name:"孙悟空",salary:5000,job:"程序员"},
          {name:"猪八戒",salary:3000,job:"销售"},
          {name:"沙僧",salary:1000,job:"人事"}]
      }
    },
    methods:{
      add(){
        if(v.name.trim()==""||v.salary.trim()==""||v.job.trim()==""){
          v.$message.error("输入错误！");
          return;
        }
        v.arr.push({name:v.name,salary:v.salary,job:v.job})
      },
      handleDelete(index, row) {
        console.log(index, row);
        //删除arr数组中i下标位置的对象
        //1代表删除几行 一次删一行
        v.arr.splice(index,1);
      }
    }
  })
</script>
</html>

 

fuyi980531
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端部分知识点总结
weixin_70634087的博客
10-26 388
当某个元素的所有子元素全部浮动时，自动识别的高度会为0，后面的元素会定上来导致显示异常，通过给元素添加overflow:hidden解决。层叠行：元素不同的样式可以层叠，多个选择器可以能选择到同一个元素，如果作用的样式不同则全部层叠生效，如果作用的样式相同由优先级来决定。VM:视图模型，负责将页面中可能发生改变的元素和某个变量进行绑定，并且会一直监听这变量值的改变，当变量的值发生改变时，inline:行内元素值，特点：共占一行，不能修改元素宽高，包括：span,b ,i,s,u,a。
web前端基础案例
09-30
总结来说，这个"Web前端基础案例"教程旨在帮助初学者建立起对Web前端开发的全面理解，通过实践案例强化技能，从而能够独立创建具有基本功能和样式的静态网页。随着进一步的学习，你将能掌握更复杂的前端框架和技术，...
el-table实现纯前端导出（适用于el-table任意表格）
敲代码无敌小奶龙的博客
09-01 3034
el-table实现纯前端导出（适用于el-table任意表格）
将页面任意table内容导出为Excel
YY222222ZZ的博客
04-27 922
主要思路是获取table中行与列封装为二维数组,传入后端解析后保存为Excel。后端就比较简单了,根据前端传来的数组,一行一行的创建单元格。下面是工具类,内容主要都在循环中。
Vue.js条件渲染指令v-if及v-show
m0_61961937的博客
04-21 7858
是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁和重建，v-if也是惰性的，如果在初始渲染时条件为假，则什么都不做，直到第一次变为真时，才会开始渲染条件块。可以看出v-if隐藏的内部元素不会被显示，Vue.js不会尝试生成对应的html代码，而v-show是通过css的display：none来控制的。一般来说，v-if每次插入或者移除元素时都必须生成元素内部的DOM树，因此具有更高的切换开销，而v-show有更高的初始渲染开销。值得注意的是，v-show。
DOM节点操作
weixin_46124651的博客
03-23 628
DOM(document object model)文档对象模型 作用如下： 1、动态操作元素的属性 2、动态的操作元素的样式属性 3、动态的实现元素的节点操作 获取元素节点 getElementById() 根据元素id获取一个元素节点 <div id='box1'>111</div> <script> let box1=getElementById('box1'); </script> getElements..
Web前端基础day02.zip
08-12
CSS（Cascading Style Sheet）:层叠样式表,作用:是用于美化页面的 ... 内联样式:在标签的style属性中添加样式代码,不可以复用 使用较少 内部样式: 在head标签里面添加style标签 标签体内写样式代码，可以在当前页面复用...
超详细的web前端基础学习笔记
06-28
#### 超详细的web前端基础学习笔记 ##### 前端课程介绍 - **HTML**：HTML (HyperText Markup Language) 是一种标记语言，用于定义网页的结构与内容。它如同网页的骨架，为网页提供基本框架。 - **CSS**：CSS ...
Web前端开发基础学习资料
06-21
更加便捷的查找自己想要的学习资料！ Web学习更轻松
Web前端基础笔记1
08-08
【Web前端基础笔记1】 在Web开发领域，前端技术扮演着至关重要的角色，它负责构建用户与网站交互的界面。本笔记主要关注HTML（Hyper Text Markup Language），这是创建网页内容的基础语言。 1. HTML概述 HTML是一...
Java网页页面的设计工具5
xiugouspring的博客
08-29 409
VM: 视图模型undefined 负责将页面中可能发生改变的元素和变量在内存中进行绑定undefined 当需要改变页面中元素时undefined只需要修改变量undefined 视图模型会不断监听变量值的改变undefined 当值发生改变时会从内存中找到对应元素让其跟着改变。MVC设计模式的Controller中需要频繁的进DOM操作(查找页面中元素undefined创建元素等)undefined会浪费资源undefinedMVVM设计模式可以解决此问题。开启只执行一次的定时器。......
vue习题
qq_45179355的博客
06-03 1万+
一 单选题，每道小题1分，共9道小题，9分1. 下面选项中，可以用来创建store实例对象的是（）。A new Vuex.Store({})B new Vue({})C new Vuex({})D new Store({})2. 以下代码 {{this.$store.state.name}}var store = new Vuex.Store({ state:{name:'store'}})var vm = new Vue({...
2.vue
weixin_60968779的博客
07-02 1万+
vue学习
Vue.js day01 vue基础 常用指令、事件与案件修饰符、分支、循环
weixin_45734686的博客
12-14 269
day01 Vue 是什么？ Vue 是一套用于构建用户界面的渐进式框架 vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合 使用Vue将helloworld 渲染到页面上 指令 本质就是自定义属性 Vue中指定都是以 v- 开头 v-cloak 防止页面加载时出现闪烁问题 <style type="text/css"> /* ...
JSD-2204-HTML-CSS-JavaScript-Day04
TheNewSystrm的博客
06-30 317
JSD-2204-HTML-CSS-JavaScript-Day03
VUE框架 详解入门
热门推荐
晴天的博客
03-19 2万+
vue框架快速入门到实操
Vue的使用2
weixin_51722520的博客
08-30 1040
vue绑定,创建,数组,循环
J031_使用TCP协议支持与多个客户端同时通信
lzn20161229的博客
08-03 500
使用TCP协议支持与多个客户端同时通信。
C++ - 函数重载
最新发布
jiaowenjie的专栏
08-06 267
/打印的是第二个函数的地址。//打印的是第一个函数的地址。-> 重载函数在本质上是相互独立的不同函数。-> 函数返回值不能作为函数重载的依据。-> 重载函数的函数类型不同。**3.函数默认参数和函数重载****函数重载的注意事项：****4.函数重载的本质**
枚举工具类
qq_43049583的博客
08-04 488
java枚举工具类
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值