备战蓝桥

web考察点

javascript

1.map()

通过调用作为输入数组中每个元素的参数提供的回调函数来创建一个新数组
const arr2 = arr1.map((item)=>{
return item*2})

2.数组

let arr=[] //创建数组
arr[0] //通过索引访问
arr.forEach((item,index,array)=>{}) //遍历数组
arr.push("")//添加元素到数组末尾
arr.pop() //删除数组末尾的元素
arr.shift() //删除头部的元素
arr.unshift() //添加元素到数组头部
arr.indexOf('') //找出某个元素在数组中的索引
arr.splice(索引,从索引开始的几个) //返回未被删除的元素

arr.prototype.at() //返回给定索引处的数组项。接受从最后一项开始倒数的负整数。
arr.prototype.concat() //用于合并两个或者多个数组 此方法不会改变现有数组 而是返回一个新数组
arr.prototype.copyWith() //浅拷贝数组的一部分到同一数组中的另一个位置并返回它 不会改变原数组的长度
.filter() //创建一个新数组 其包含通过所提供的函数实现的测试的所有元素
.find() //返回数组测试函数第一个元素的值
.includes() //判断一个数组是否包含一个指定的值 如果包含则返回true
.join() //将一个数组的所有元素连接成一个字符串返回这个字符串
.keys() //返回包含每个索引键的对象
.reverse() //将数组中的位置颠倒 并返回该数组 该方法会改变原数组
.some() //测试数组中是不是至少有一个元素通过了被提供的函数测试
.sort() //对数组元素进行原地排序并返回此数组
.splice() //通过删除或替换现有的元素或者原地添加新的元素来修改数组 并以数组形式返回被修改的内容
.toString() //转成字符串

则要求在取值范围为[min,max]之间生成的随机数写法可以写成
Math.floor(Math.random() * (max - min + 1)) + min

ECharts

1. echarts.init 初始化一个实例
   setOption 生成一个图
   

   
     
       
       ECharts
       
       
     
     
       
       
   
       
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('main'));
         // 指定图表的配置项和数据
         var option = {
           title: {
             text: 'ECharts 入门示例'
           },
           tooltip: {},
           legend: {
             data: ['销量']
           },
           xAxis: {
             data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
           },
           yAxis: {},
           series: [
             {
               name: '销量',
               type: 'bar',
               data: [5, 20, 36, 10, 10, 20]
             }
           ]
         };
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
       
     
   
   

   pie饼图 bar柱状图 scatter散点图 radar雷达图 effectScatter散点图 tree树图 
   

   3.异步加载数据

   $.get('data.json').done((data)=>{
   	//填入数据
   	myChart.setOption({
   	xAxis:{
   	data:data.列表名
   	},
   	series:[{
   	name:"系列",
   	data:data.data
   	}]
   	})
   })
   

   4.tooltip

   tooltip.trigger='item'(数据项图形)/'axis'(坐标轴触发)/'none'(什么都不触发)
   tooltip.axisPointer 配置坐标轴指示器的快捷方式
   	.link 一个联动效果的数组 
   	.triggerOn='mousemove(鼠标移动)|click(点击)|none'
   	.show=true
   	.type='line(直线)|shadow(阴影)|none(无指示器)'
   

   link: [
       {
           // 表示所有 xAxisIndex 为 0、3、4 和 yAxisName 为 'someName' 的坐标轴联动。
           xAxisIndex: [0, 3, 4],
           yAxisName: 'someName'
       },
       {
           // 表示左右 xAxisId 为 'aa'、'cc' 以及所有的 angleAxis 联动。
           xAxisId: ['aa', 'cc'],
           angleAxis: 'all'
       },
       ...
   ]
   

   4.dataZoom 放大缩小

   默认dataZom控制x轴 即对x轴进行数据窗口缩放/平移
   dataZoom:[
   {
   	type:'slider|inside',
   	start:10,//左边在10%的位置
   	end:60,  //右边
   	xAxisIndex:[0, 2], // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
   	yAxisIndex:[0, 2], // 表示这个 dataZoom 组件控制 第一个 和 第三个 yAxis
   },
   {
   //可以多个dataZoom组件
   }
   ]
   

   5.鼠标事件

   echarts 支持常规的鼠标事件类型，包括 'click'、 'dblclick'、 'mousedown'、 'mousemove'、 'mouseup'、 'mouseover'、 'mouseout'、 'globalout'、 'contextmenu' 事件

   myChart.on('click/mousedown/mousemove/mouseup',function(params){
   })
   

elementui

1.弹出框

open() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
    }

Vue.js

1.模板语法

双大括号 文本插值
v-once 执行一次性插值 数据改变 插值处的内容不会更新
v-html 输出真正的html

2.属性

v-bind 

3.指令

v-if 根据值的真假来移除/插入元素
v-bind:参数 响应式更新HTML attribute 参数与内部表达式的值绑定 缩写:参数=
v-on:参数 监听DOM事件 参数是监听的事件名例如点击
参数也可以是[] 即为动态参数 缩写 @参数= 

4.计算属性是基于它们的响应式依赖进行缓存的

Reversed message: "{{ reversedMessage() }}"

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

5.class style

我们可以传给 v-bind:class 一个对象，以动态地切换 class

6.条件渲染/列表渲染

v-if v-else v-else-if v-show v-for
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
v-for

• {{ item.message }}

扩展:

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

  7.按键修饰符

  v-on:keyup.按键名=''
  

  8.表单输入绑定

  value 表单值
  v-model 
  	.lazy 在“change”时更新而非“input”
  	.number 自动将用户的输入值转为数值类型
  	.trim 自动过滤用户输入的首尾空白字符
  

  9.组件

  注册

  全局注册
  Vue.component('my-component-name', { /* ... */ })
  局部注册
  new Vue({
    el: '#app',
    components: {
      'component-a': ComponentA,
      'component-b': ComponentB
    }
  })
  import ComponentA from './ComponentA.vue'
  export default {
    components: {
      ComponentA
    },
    // ...
  }
  

  prop

  单向数据流
  所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
  1.这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用
  props: ['initialCounter'],
  data: function () {
    return {
      counter: this.initialCounter
    }
  }
  2.这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
  props: ['size'],
  computed: {
    normalizedSize: function () {
      return this.size.trim().toLowerCase()
    }
  }
  .sync修饰符
  在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。
  推荐以 update:myPropName 的模式触发事件取而代之
  this.$emit('update:title', newTitle)
  
  注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 v-model。
  

  10.插槽

  v-slot 只能添加在  上
  
      
  Here might be a page title
    
  

  11.父子组件

  

  prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。

  父组件-子组件 v-bind绑定

  子组件-父组件 $on(eventName)监听事件 $emit(eventName,optionalPayload)触发事件

  12.动态组件

  重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个  元素将其动态组件包裹起来。
   是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素， 要求同时只有一个子元素被渲染。
  
  
    
  
  

  13.动画

  14.组合式api(vue3.0)

  
    {{ readersNumber }} {{ book.title }}
  
  
    import { ref, reactive } from 'vue'
    export default {
      setup() {
        const readersNumber = ref(0)
        const book = reactive({ title: 'Vue 3 Guide' })
        // 暴露给模板
        return {
          readersNumber,
          book
        }
      }
    }
  
  

  15.生命周期

  beforeCreate 实例初始化
  created 实例创建完成后立即被同步调用
  beforeMount 挂载开始之前被调用 该钩子在服务器端渲染期间不被调用
  mounted 实力挂载完成后被调用
  beforeUpdate 在数据发生改变后 dom被更新之前调用
  updated 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
  

  16.路由

    
  Hello App!
    
  
      
      
      
      Go to Home
      Go to About
    
    
    
    
  

  重定向路由
  const routes = [{ path: '/home', redirect: { name: 'homepage' } }]
  

  动态路由
  const User = {
    template: 'User',
  }
  // 这些都会传递给 `createRouter`
  const routes = [
    // 动态字段以冒号开始
    { path: '/users/:id', component: User },
  ]
  

  嵌套路由
  const routes = [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功
          // UserProfile 将被渲染到 User 的  内部
          path: 'profile',
          component: UserProfile,
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 将被渲染到 User 的  内部
          path: 'posts',
          component: UserPosts,
        },
      ],
    },
  ]
  

  路由守卫
  const router = createRouter({ ... })
  router.beforeEach((to, from, next) => {
    if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
    else next()
  })
  

  路由元信息
  

  基于jquery ajax 实现 天气预报

  $.ajax('json地址').then()
  

  function getweather() {
       //TODO：请补充代码
       $.ajax('./js/weather.json').then(res=>{
           var dataArr=res.result;
          for(let index=0; index
              const element=dataArr[index];
              $("body  article > section > div:nth-child("+(index+1) + ")"+"> img").attr('src',element.weather_icon);
              $("body > article > section > div:nth-child("+(index+1) + ")"+'> div > div:nth-child(1)').text(element.weather);
              $("body > article > section > div:nth-child("+(index+1) + ")"+'> div > div:nth-child(2)').text(element.temperature);
              $("body > article > section > div:nth-child("+(index+1) + ")"+'> div > div:nth-child(3)').text(element.winp);
              $("body > article > section > div:nth-child("+(index+1) + ")"+'> div > div:nth-child(4) > span:nth-child(1)').text(element.days);
              $("body > article > section > div:nth-child("+(index+1) + ")"+'> div > div:nth-child(4) > span:nth-child(2)').text(element.week);
          }
          
       })
  }
  getweather();
  

  1.:nth-child(index)

  选取某个父元素下第index个子元素，有可能匹配到多个该子元素，index数字从1算起；

  2.:eq(index)

  选取索引为index的元素，只能匹配到一个元素，index数字从0算起；

  vue 知乎数据可视化 首页

  知识点

  axios vue

  main.js

  import axios from 'axios'
  Vue.prototype.$axios = axios
  

  主要运用 v-for循环渲染页面

    
      
        
  {{item.title}}
          
  {{item.desc}}
        
      
    
  
  
  export default {
    data() {
      return {
        listInfo:[],
      };
    },
    methods:{
      inter(){
      this.$axios.get('/static/data/list.json').then(res=>{
          this.listInfo=res.data.data.listInfo;       
      })
    }},
    created(){
      this.inter();
    }
  };
  
  
  .list-item {
    padding: 20px 0;
    overflow: hidden;
    border-bottom: 1px solid #dcdcdc;
  }
  .list-pic {
    float: right;
    width: 125px;
    height: 100px;
    display: block;
    border-radius: 4px;
  }
  .list-info {
    width: 500px;
    float: left;
  }
  .title {
    padding: 10px 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
  .desc {
    line-height: 22px;
    font-size: 13px;
    color: #999;
  }
  
  

  restful api开发

  app.get('/list',function(req,res){
      fs.readFile(path.resolve(__dirname,'./users.json'),'utf8',function(err,data){
          data=JSON.parse(data);
          res.json(data);
      })
  })
  

  搜一搜吧

  
    
      
      
      Document
      
      
    
    
      
  
        
  
          
        
        
  
          
  
            
              
              {{ post.title }}
            
          
        
      
      
        class Post {
          constructor(title, link, img) {
            this.title = title;
            this.link = link;
            this.img = img;
          }
        }
        const app = new Vue({
          el: "#app",
          data: {
            search: "",
            postList: [
              new Post(
                "小猫咪",
                "https://unsplash.com/s/photos/cat",
                "./images/cat.png"
              ),
              new Post(
                "小狗狗",
                "https://unsplash.com/@joeyc",
                "./images/dog.png"
              ),
              new Post(
                "北极熊",
                "https://unsplash.com/@hansjurgen007",
                "./images/bar.png"
              ),
              new Post(
                "狮子",
                "https://unsplash.com/@hansjurgen007",
                "./images/lion.png"
              ),
              new Post(
                "小鸟",
                "https://unsplash.com/@eugenechystiakov",
                "./images/birds.png"
              ),
              new Post(
                "狐狸",
                "https://unsplash.com/@introspectivedsgn",
                "./images/fox.png"
              ),
            ],
          },
          computed: {
            filteredList() {
              this.filteredList=[]
              // TODO: 请补充代码
              //如果未输入 则返回
              if(this.search=='') return this.postList;
              var item=this.postList.filter(items=>{
                if(items.title.match(this.search)){
                  return items
                  
                }
                
              })
              return item
              
            },
          },
        });
      
    
  
  

  开心开心 主要是计算属性不太熟 看来得回去看vue了(2021/2/21)

  return this.postList.filter(item=>item.title.search(this.search)!==-1)
  

  jq实现手风琴特效

  一定要仔细审题 是点击还是鼠标进入实现

  这个题目是点击

  $(function(){
      var Hover = $('.option');
      Hover.each(function(){
      $(this).click(function(){
          Hover.removeClass("active")
          $(this).addClass("active")
      })})
  })
  

  $(function(){
  $(".option").on('click',function(){
      $(this).siblings().removeClass("active")
      $(this).addClass("active")
  })})
  

  在JQuery中可以很方便地用 elem.siblings() 方法实现查找相邻元素，但在JS中并没有这样的方法，可以用previousSibling和nextSibling结合来实现。
  

  js 关于你的欢迎语

  知识点:js的表单赋值value

  innerHTML和value区别

  innerHTML:

  • 既可以获取(标签)里面的内容,也可以获取格式

  • 可以设置标签里面的内容,将内容存储到标签当中

  • 不能获取表单控件

    value:用于获取表单控件(form)

    为什么value不能写在外边，而是写在里面？

    1.因为网页刚刚加载完，获取的东西为空。

    2.在单击事件后，获取用户输入的值

    bug:

    js的function获取input值为 [object htmlinputelement]？

    答:在获取输入框的值的时候没有添加value属性，导致获取的一个DOM节点，最后输出在浏览器上面显示的即为HTMLInputElement,不是实际的输入值

    html dom 卡片化标签页

    类似

    var tab_list = document.querySelector('.tab_list');
                var lis = tab_list.querySelectorAll('li');
                var items = document.querySelectorAll('.item');
                //for循环绑定点击事件
                for (var i = 0; i
                    //给li设置索引号
                    lis[i].setAttribute('index', i);
                    lis[i].onclick = function() {
                        //其余li清除class
                        for(var i =0; i
                            lis[i].className = '';
                        }
                        //留下被点击的
                        this.className = 'current';
                        //显示内容
                        var index = this.getAttribute('index');
                        //隐藏其他，显示被点击的对应的item
                        for (var i = 0; i