vue 路由加载 理解
参考连接：
1、https://zhuanlan.zhihu.com/p/27588422 中的window.addEventListener('hashchange', () => { })
<html>
<style>
h2 {
height: 60px;
background-color: aqua;
}
p {
height: 80px;
background-color: blanchedalmond;
}
</style>
<body>
<a href="#/r1">r1</a>
<a href="#/r2">r2</a>
<a href="#/r3">r3</a>
<a href="#/r4">r4</a>
<p>该实例使用 addEventListener() 方法来向按钮添加点击事件。</p>
<button id="myBtn">点我</button>
<input id="myInp" type="text" name="week_year">
<div id="demo"></div>
<script>
document.getElementById("myBtn").addEventListener("click", function()
{
document.getElementById("demo").innerHTML = "Hello World";
});
document.getElementById("myInp").addEventListener("input", function(e,e2,e3,e4)
{
console.log(e,e2,e3,e4,'>>>>>>');
console.log(document.getElementById("myInp").value);
document.getElementById("demo").innerHTML = "Hello World";
});
window.addEventListener('hashchange', () => {
console.log('changess>>>>>>>>>>');
let r1 = `<p style="color: red;">1111111</p>`
let r2 = `<p style="color: red;">22222</p>`
let r3 = `<p style="color: red;">33333</p>`
let r4 = `<p style="color: red;">444444</p>`
let obj = {
r1,r2,r3,r4
}
document.getElementById("demo").innerHTML = obj[window.location.hash.slice(2)];
})
</script>
<!-- 双向绑定数据// -->
<!-- <div id="app"></div> -->
<!--
<script>
var obj = {}
let v=10;//定义初始值
Object.defineProperty(obj, 'x', {
// get是再每次访问obj的x属性的时候就会执行，并且这个属性得到的值来自于get的返回值
get() {
return v
},
// 每次要修改obj的x属性，就会调用set
set(newValue) {
console.log('newValue：' + newValue)
v = newValue
// 每次set的时候都调用渲染DOM的方法，这样就实现了响应式
setAppContent()
}
})
// 这个方法专门负责渲染DOM
const setAppContent = () => {
document.querySelector('#app').innerHTML = obj.x
}
setAppContent();//首先div#app的内容渲染成obj.x的值，但是只要调用了obj.x=""这个语句，obj.x的值就会被改变，然后再次调用渲染页面的方法，这样就可以实现页面有数据渲染。
</script> -->
</body>
</html>
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
