发表于： 2023-05-08 20:14:37
0 277
vue知识点:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MVVM模型</title>
<!-- 引入vue -->
<script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<!--
MVVM模型
1.M: 模型(Model) : data中的数据
2。V: 视图(view) : 模板代码
3。VM: 视图模型(viewModel): Vue实例
观察发现:
1.data中所有的属性，最后都出现在了vm身上
2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
-->
<div id="root">
<h1>名字:{{name}}</h1>
<h1>地址:{{address}}</h1>
<h1>测试一下:{{1+1}}</h1>
<h1>测试一下2:{{$options}}</h1>
<h1>测试一下3:{{_events}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
//创建 Vue 实例
const vm = new Vue({
el:'#root',
data:{
name:'张三',
address:'成都',
a:1
}
})
console.log(vm)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>回顾Object.defineProperty方法</title>
</head>
<body>
<script>
let number = 18
let person = {
name: '张三',
sex: '男'
}
Object.defineProperty(person, 'age',{
// value:18,
// enumerable:true, //控制属性是否可以枚举，默认值为false
// writable:true, //控制属性是否可以被修改，默认值是false
// configurable:true //控制属性是否可以被删除，默认值是false
//当有人读取 person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get(){
console.log('有人读取了属性');
return number
},
//当有人读取 person的age属性时，set函数(setter)就会被调用，且会收到修改的值
set(value){
console.log('有人修改了属性值',value)
number = value
}
})
console.log(Object.keys(person))
console.log(person)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>何为数据代理</title>
<script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<!-- 数据代理：通过一个对象代理对另一个对象中的属性操作(读/写) -->
<script type="text/javascript">
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue中的数据代理</title>
<script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<!--
1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作 (读/写) data中对应的属性
-->
<div id="root">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
name:'修真院',
address:'成都'
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>事件的基本使用</title>
<script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<!--
事件的基本使用:
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名;
2.事件的回调需要配置在methods对象中，最终会在vm上;
3.methods中配置的函数，不要用箭头函数! 否则this就不是vm了;
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象:
5.@click="demo”和 @click="demo($event)” 效果一致，但后者可以传参;
-->
<div id="root">
<h2>欢迎来打{{name}}学习</h2>
<!-- <button v-on:click="showInfo">点击提示信息</button> -->
<!-- v-on: 简写 -->
<button @click="showInfo1">点击提示信息1(不传参)</button>
<button @click="showInfo2($event,66)">点击提示信息2(传参)</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
name:'修真院'
},
methods: {
showInfo1(event){
alert('同学你好!')
// console.log(this) //此处的event是vm
},
showInfo2(event,number){
alert('同学你好!!')
console.log(event,number)
// console.log(this) //此处的event是vm
}
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>事件修饰符</title>
<script type="text/javascript" src="../vue_basic/vue.js"></script>
<style>
* {
margin-top: 20px;
}
.demo1 {
width: 100px;
height: 100px;
background-color: red;
}
.box1 {
padding-top: 5px;
background-color: red;
}
.box2 {
padding-top: 5px;
background-color: orange;
}
.list {
width: 200px;
height: 200px;
background-color: skyblue;
overflow: auto;
}
li {
height: 100px;
}
</style>
</head>
<body>
<!--
vue中的事件修饰符:
1.prevent: 阻止默认事件 (常用) ;
2.stop: 阻止事件冒泡 (常用) ;
3.once: 事件只触发一次(常用);
4.capture: 使用事件的捕获模式;
5.self: 只有event.target是当前操作的元素时才触发事件;
6.passive: 事件的默认行为立即执行，无需等待事件回调执行完毕;
-->
<div id="root">
<h2>欢迎来到{{name}}</h2>
<!-- prevent: 阻止默认事件 (常用) ; -->
<a href="http://www.jnshu.com" @click.prevent="showInfo">点击跳转到{{name}}</a>
<!-- stop: 阻止事件冒泡 (常用) ; -->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息1</button>
<!-- 修饰符可以连续写 -->
<!-- <a href="http://www.jnshu.com" @click.stop.prevent="showInfo">点我提示信息1</a> -->
</div>
<!--事件只触发一次(常用) -->
<button @click.once="showInfo">点我提示信息2</button>
<!-- 使用事件捕获的模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是当前操作的元素时才触发事件 -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
<!-- @scroll是给滚动添加的事件 @wheel是给滚轮添加的事件 -->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
name:'修真院'
},
methods: {
showInfo(e){
//阻止默认行为 preventDefault()
// e.preventDefault()
alert('同学你好！')
// console.log(e.target)
},
showMsg(Msg){
console.log(Msg)
},
demo(){
for (let i = 0; i < 1000; i++) {
console.log("#");
}
console.log("累坏了");
}
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>键盘事件</title>
<script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<!--
1.Vue中常用的按键别名:
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 =>space
换行 => tab （特殊 必须配合 keydown 使用）
上 => up
下 => down
左 =>left
右 =>right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
3.系统修饰键 (用法特殊) : ctrl、alt、shift、meta
(1).配合keyup使用: 按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用: 正常触发事件。
4.也可以使用keyCode去指定具体的按键 (不推荐)
5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
-->
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
<!-- <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo"> -->
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
name:'修真院'
},
methods: {
showInfo(e){
// if(e.keyCode !== 13) return
console.log(e.target.value)
}
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>键盘事件</title>
<script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<!--
1.Vue中常用的按键别名:
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 =>space
换行 => tab （特殊 必须配合 keydown 使用）
上 => up
下 => down
左 =>left
右 =>right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
3.系统修饰键 (用法特殊) : ctrl、alt、shift、meta
(1).配合keyup使用: 按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用: 正常触发事件。
4.也可以使用keyCode去指定具体的按键 (不推荐)
5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
-->
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
<!-- <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo"> -->
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
name:'修真院'
},
methods: {
showInfo(e){
// if(e.keyCode !== 13) return
console.log(e.target.value)
}
},
});
</script>
</body>
</html>
返回列表
评论