vue3基础入门（一）
程序员文章站
2022-05-17 21:09:18
...
<!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>Document</title>
<script src="https://unpkg.com/[email protected]"></script>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<div id="root"></div>
<script>
/**
* 事件修饰符：stop,prevent,capture,self,once,passive
* 按键修饰符：enter,tab,delete,esc,up,down,left,right
* 鼠标修饰符：left,right,middle
* 精确修饰符：exact
* .prevent 阻止浏览器默认行为（跳转等）
* .stop 阻止冒泡 （例如点击一个元素多次触发click事件）
* @click="handleClick(2, $event), handleclick2() 绑定多个方法 用,隔开
* .self 自身触发自身事件
* .once 只触发一次
* @scroll.passive 提升浏览器自身事件性能
*
* 表单修饰符：
* .lazy 当blur出发时
* .number 转为数字类型
* .trim 去除输入内容前后空格
*
*/
const app = Vue.createApp({
template: `<div>
<form action="htttp://www.baidu.com" @click.prevent="handleClick(2, $event), handleclick2()">
<span v-bind:[attr]="msg">{{msg}}</span>
<button>提交</button>
</form>
<div>时间1：{{time}}</div>
<div>时间2：{{getDate()}}</div>
<div @click.self="handleclick2" style="width:100px;height:100px;background:pink">
<div @click.stop="testClick">阻止冒泡</div>
<div @click="testClick">阻止冒泡</div>
</div>
<demo class="red" name='1'/>
<p>{{count}}</p>
<input v-model="checkvalue" type="checkbox" false-value="hello" true-value="world"/> {{checkvalue}}
</div>`,
data(){
return {
msg: 'hello world',
attr: 'title', // 动态属性
count: 0,
checkvalue: 'hello' // 自定义双向绑定checkbox值
}
},
computed: {
time() { // 当计算属性依赖的变量发生变更时，才会发生改变
return Date.now()
}
},
methods: {
handleClick(num, event) {
this.count += num;
console.log(event);
},
handleclick2() {
console.log('handleclick2');
},
testClick(){
alert('只触发了一次');
},
getDate() { // 页面发生改变才会重新渲染
return Date.now();
}
},
})
app.component('demo', {
template: `<div :class="$attrs.class">
样式绑定 $attrs:{{$attrs}}
</div>` // 绑定父组件上的传来的class属性
})
app.mount('#root')
</script>
</body>
</html>
上一篇： python 多个装饰器的调用顺序
下一篇： python二分查找算法的递归实现方法