for(let i =0;i< 10;i++){
  if(i>5)break
  console.log(i)
}

const dataAsRefs = toRefs(data);

<template>
  <div>Hello, {{ name }}!</div>
  <input v-model="name" />
  <button :disabled="!isNamePresent" @click="submitName">Submit</button>
</template>

<script setup>
import { ref, computed } from 'vue'

const name = ref('')
const isNamePresent = computed(() => name.value.length > 0)

function submitName() {
  console.log(name.value)
}
</script>

<!-- Form.vue -->
<template>
  <form @submit.prevent="submitHandler">
    <label>Name
      <input type="text" />
    </label>
    <button>Submit</button>
  </form>
</template>

<script setup>
function submitHandler() {
  // Do something
}
</script>

<!-- App.vue -->
<template>
  <div>Hello, {{ name }}!</div>
  <Form />
</template>

<script setup>
import { ref } from 'vue'
import Form from './components/Form.vue'

const name = ref('')

function submitForm() {
  console.log(name.value)
}
</script>

<!-- Form.vue -->
<template>
  <form @submit.prevent="submitHandler">
    <label>Name
      <input v-model="name" type="text" />
    </label>
    <button>Submit</button>
  </form>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['update:modelValue', 'submit']);

const name = computed({
  get () {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val);
  }
})

function submitHandler() {
  emit('submit')
}
</script>

<!-- App.vue -->
<template>
  <div>Hello, {{ name }}!</div>
  <Form v-model="name" @submit="submitForm" />
</template>

<script setup>
import { ref } from 'vue'
import Form from './components/Form.vue'

const name = ref('')

function submitForm() {
  console.log(name.value)
}
</script>

git pull origin someBranch
git push origin someBranch

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}

<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

ul li:nth-child(-n+2)

var io = new IntersectionObserver(callback, option);

// 开始观察
io.observe(document.getElementById('example'));

// 停止观察
io.unobserve(element);

// 关闭观察器
io.disconnect();

io.observe(elementA);
io.observe(elementB);

function query(selector) {
  return Array.from(document.querySelectorAll(selector));
}

var observer = new IntersectionObserver(
  function(changes) {
    changes.forEach(function(change) {
      var container = change.target;
      var content = container.querySelector('template').content;
      container.appendChild(content);
      observer.unobserve(container);
    });
  }
);

query('.lazy-loaded').forEach(function (item) {
  observer.observe(item);
});

var intersectionObserver = new IntersectionObserver(
  function (entries) {
    // 如果不可见，就返回
    if (entries[0].intersectionRatio <= 0) return;
    loadItems(10);
    console.log('Loaded new items');
  });

// 开始观察
intersectionObserver.observe(
  document.querySelector('.scrollerFooter')
);

obj.scrollIntoView(
  {
      behavior: 'smooth',
      block: 'nearest',
      inline: 'center'
  }
)

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");

    // If there's no active class
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }

    // Add the active class to the current/clicked button
    this.className += " active";
  });
}

var iframe = document.getElementById("myFrame");
var elmnt = iframe.contentWindow.document.getElementsByTagName("H1")[0];
elmnt.style.display = "none";

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

<defs>
  <linearGradient
    id="grad1"
    x1="0%"
    y1="0%"
    x2="100%"
    y2="0%"
  >
    <stop
      offset="0%"
      style="stop-color:#8095F0;stop-opacity:1"
    />
    <stop
      offset="100%"
      style="stop-color:#51FCB5;stop-opacity:1"
    />
  </linearGradient>
</defs>

'fill-color': ['interpolate-hcl', ['linear'], ['feature-state', 'population'], 0, 'red', 1e6, 'blue']


for (const district of districts) {
  map.setFeatureState({ source: 'mysource', sourceLayer: 'mysourcelayer', id: district.id }, { population: district.population});
}

'fill-color': ['match', ['get', 'id'],
  1020, 'red',
  1033, 'green',
  1038, 'red',
  1049, 'white',
  // ...

"icon-image": [
  "case",
  ["all", ["==", ["get", "matched"], "True"], ["!=", ["get", "vehicle"], ["get", "standstill_vehicle"]]],
  "orangemarker",
  ["==", ["get", "matched"], "True"],
  "greenmarker",
  "redmarker",
]

this.map.setPaintProperty("somelayer", "fill-color",
    ["case",
        ["==",  ["get", "some_prop"], someval], "#34c0dd",
         "#499bbc"
    ]);

const layers = [{
  id: 'countries',
  type: 'fill',
  source: 'countries',
  paint: {
    'fill-color': [
      'match', ['get', 'filter_prop', ['global']],
      'pop_est',
      ['step', ['get', 'pop_est'],
        0, '#f8d5cc',
        1000000, '#f4bfb6',
        5000000, '#f1a8a5',
        10000000, '#ee8f9a',
        50000000, '#ec739b',
        100000000, '#dd5ca8',
        250000000, '#c44cc0',
        500000000, '#9f43d7',
        1000000000, '#6e40e6',
      ],
      'gdp_md_est',
      ['step', ['get', 'gdp_md_est'],
        0, '#f8d5cc',
        1000, '#f4bfb6',
        5000, '#f1a8a5',
        10000, '#ee8f9a',
        50000, '#ec739b',
        100000, '#dd5ca8',
        250000, '#c44cc0',
        5000000, '#9f43d7',
        10000000, '#6e40e6',
      ],
      '#ffffff',
    ],
  },
}];

['step', ['zoom'],
['case', ['all', ['!', ['feature-state', 'hidden']], ['get', 'red'], 1, 0],
10,
['case', ['all', ['!', ['feature-state', 'hidden']], ['any', ['get', 'red'], ['get', 'green']], 1, 0],
15,
['case', [['!', ['feature-state', 'hidden']], 1, 0]],

map.addLayer({
  id: "cluster-count",
  type: "symbol",
  source: "grundbuch",
  filter: ["has", "point_count"],
  layout: {
    "text-field": "{point_count_abbreviated}",
    "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
    "text-size": 12
  },
  paint: {
    "text-color": "#ffffff"
  }
});

"line-color": [
  'case',
  ['boolean', ['feature-state', 'hover'], false],
  '#c00',

  [
    'case',
    ['!=', ['get', 'color'], null],
    ['get', 'color'],
    '#16e8e9'
  ]

],
````            

###

test.map.showCollisionBoxes = true  // 显示碰撞边界
test.map.showTileBoundaries = true  // 显示tile边界
test.map.showOverdrawInspector = true 

需要很习惯一段时间

### setFeatureState

Array.prototype.push.apply(a, [1,2]))

var arr = [1];
var newItems = [2, 3];
arr.push(...newItems);
console.log(arr);

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log('Taking a break...');
  await sleep(2000);
  console.log('Two seconds later, showing sleep in a loop...');

  // Sleep in loop
  for (let i = 0; i < 5; i++) {
    if (i === 3)
      await sleep(2000);
    console.log(i);
  }
}

demo();

function setLayerSource (layerId, source, sourceLayer) {
    const oldLayers = map.getStyle().layers;
    const layerIndex = oldLayers.findIndex(l => l.id === layerId);
    const layerDef = oldLayers[layerIndex];
    const before = oldLayers[layerIndex + 1] && oldLayers[layerIndex + 1].id;
    layerDef.source = source;
    if (sourceLayer) {
        layerDef['source-layer'] = sourceLayer;
    }
    map.removeLayer(layerId);
    map.addLayer(layerDef, before);
}

const DEFAULTS = {
	logLevel: 0,
	outputFormat: 'html'
};
function processContent(options) {
	let options = Object.assign({}, DEFAULTS, options);
}

var objA = {};
objA.name = 'a';
objA.sayName = function() {
    console.log(`My name is ${this.name} !`);
}
// var objA = {
//     name: 'a',
//     sayName: function() {
//         console.log(`My name is ${this.name} !`);
//     }
// }
objA.sayName();
console.log(objA.__proto__ === Object.prototype); // true
console.log(objA instanceof Object); // true

var objB = new Object();
// var objB = Object();
objB.name = 'b';
objB.sayName = function() {
    console.log(`My name is ${this.name} !`);
}
objB.sayName();
console.log(objB.__proto__ === Object.prototype); // true
console.log(objB instanceof Object); // true

import StarRating from 'vue-star-rating'

// ...

var starRating = new Vue({
  ...StarRating,
  parent: this,
  propsData: { /* pass props here*/ }
}).$mount()

starRating.$on('someEvent', (value) => {
  // listen to events emitted from the component
})
var popup = new mapboxgl.Popup()
      .setDOMContent(startRating.$el)

import InfoWindowContent from '../InfoWindowContent.vue'

L.popup({maxWidth: 600,
  className: 'leaflet-info-window'})
  .setLatLng(latlng)
  .setContent('<div id="info-window"></div>')
  .openOn(this.map)
const InfoWindow = Vue.extend(InfoWindowContent)
const infoWindow = new InfoWindow({
  propsData: {
    windowData: this.infoWindowData,
    windowType: this.infoWindowType
  },
  store: this.$store
})
infoWindow.$mount("#info-window")

// 添加Popup对象
const popup = new mapboxgl.Popup({
  anchor: "bottom",
  offset: offset || [1, -15],
  className: "popup"
});
popup.on("close", function(p) {
  if (p && p.target && p.target._vue) {
    p.target._vue.$destroy();
  }
});
const dom = document.createElement("div");
dom.className = "popup-content-wrapper";

popup.setLngLat(coordinates).setDOMContent(dom).addTo(map);
 // 渲染局部Vue组件（mappopupwrapper）
 popup._vue = new Vue({
   render: h =>
     h(MapPopupWrapper, {
      props: {
        width: "700px",
        type: "resource",
        target: {
          feature
        }
      }
    })
}).$mount(dom);

map.getCanvas().toDataURL()

// Find all features within a static bounding box
var features = map.queryRenderedFeatures(
  [[10, 20], [30, 50]],
  { layers: ['my-layer-name'] }
);

// Find all features within a bounding box around a point
var width = 10;
var height = 20;
var features = map.queryRenderedFeatures([
  [point.x - width / 2, point.y - height / 2],
  [point.x + width / 2, point.y + height / 2]
], { layers: ['my-layer-name'] });

// Query all rendered features from a single layer
var features = map.queryRenderedFeatures({ layers: ['my-layer-name'] });

// Find all features in one source layer in a vector source
var features = map.querySourceFeatures('your-source-id', {
sourceLayer: 'your-source-layer'
});

// If an image with the ID 'cat' already exists in the style's sprite,
// replace that image with a new image, 'other-cat-icon.png'.
if (map.hasImage('cat')) map.updateImage('cat', './other-cat-icon.png');

"icon-color": [
  "case",
  ["boolean", ["feature-state", "hover"], false],
  "#F89806",
  ["boolean", ["==", ["get", "state"], 0], false],
  "#2363F8",
  ["get", "color"]
],