<!DOCTYPE html>
<html>
<body>
<style>
</style>
<div class="ellipsis">
<div id="fileList"></div>
</div>
<input id="setText"></input>
<span id="showText"></span>
</body>
</html>
<script>
// nextTick
function k_nextTick(fn) {
setTimeout(fn, 0)
}
function k_nextTickUse() {
k_nextTick(() => {
alert('111')
})
}
// k_nextTickUse()
/*
* nextTick，官方会调用Promise.then（异步回调）、MutationObserver（观测API） 和 setImmediate（NODE），
* 为了兼容，他会在都不能调用的时候，直接调用定时器，直接把当前任务放在Event Loop队列中 https://cn.vuejs.org/v2/api/#Vue-nextTick
*/
// v-if 和v-show
/*
* 这个没什么好些的，show就是display: none;样式上的消失，if就是从渲染函数上标记是否渲染
* 当一个DOM不需要重复的展开关闭（一次性，或者只需要判断是否存在），用if最佳，当一个DOM需要重复展开关闭（如搜索框），用show最佳
* https://cn.vuejs.org/v2/api/#v-show
*/
// v-for
var upDataList = [{name: 1}, {name: 2}]
function renderFn() {
let refs = document.getElementById('fileList')
refs.innerHTML = ''
let kNote = ''
upDataList.map((item, index) => {
kNote = kNote + `<div>${item.name}<div>`
})
refs.innerHTML = kNote
}
// renderFn()
/*
* 这个用到了模板语法，就拿到虚拟DOM队列，然后循环遍历出来，没去研究模板语法，是通过字符串替换等手段去完成一个渲染
* https://blog.csdn.net/future_todo/article/details/52725177
*/
// 双向绑定
var modelText = {name: 'a'}
var modelTextWatch = modelText.name
let inputDOM = document.querySelector('#setText')
Object.defineProperty(modelText, 'name', {
get: function () {
return modelTextWatch
},
set: function (newVal) {
modelTextWatch = newVal
document.querySelector('#setText').value = modelTextWatch
document.querySelector('#showText').innerText = modelTextWatch
}
})
inputDOM.addEventListener("input", (event) => {
let value = event.target.value
modelText['name'] = value
})
/*
* 双向绑定用到了Object.defineProperty这个API，遍历对象的所有属性，然后用get，set来规定他绑定的动作，然后用监听来监听操作
* 这也是为什么vue双向绑定只支持<input><select><textarea>和components（这个是因为vue自己又写了套监听逻辑，所以才可以的）
* https://cn.vuejs.org/v2/api/#v-model
*/
// 点击后n秒内不允许再次点击（vue+element的东西）
// Vue.directive('delay-click', {
// inserted: function (el, binding, vnode) {
// let delayTime = binding.value || 5000
// el.addEventListener('click', () => {
// el.setAttribute('disabled', true)
// el.classList.add('is-disabled')
// setTimeout(() => {
// el.removeAttribute('disabled')
// el.classList.remove('is-disabled')
// }, delayTime)
// })
// }
// })
</script>