一、Vue事件
1、为组件绑定原生事件
可以通过@click.native的方式来进行绑定
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue原生事件绑定</title>
</head>
<body>
<div id="app">
<child @click.native="childClick"></child>
</div>
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>-->
<script src="js/vue.js"></script>
<script>
Vue.component("child", {
template: "<div>CHILD</div>",
});
let vm = new Vue({
el: "#app",
data: {
},
methods: {
childClick: function () {
alert("click")
},
}
});
</script>
</body>
</html>
二、Vue指令
1、v-bind 指令的 .prop 事件修饰符详解
1.1、.prop的用途：
- v-bind 默认绑定到 DOM 节点的 attribute 上，使用 .prop 修饰符后，会绑定到 property
- 通过自定义属性存储变量，避免暴露数据
- 防止污染 HTML 结构
1.2、注意：
- 使用 property 获取最新的值；
- attribute 设置的自定义属性会在渲染后的 HTML 标签里显示，property 不会。
示例：
<input id="input" type="foo" value="11" :data="inputData"></input>
// 标签结构: <input id="input" type="foo" value="11" data="inputData 的值"></input>
// input.data === undefined
// input.attributes.data === this.inputData
<input id="input" type="foo" value="11" :data.prop="inputData"></input>
// 标签结构: <input id="input" type="foo" value="11"></input>
// input.data === this.inputData
// input.attributes.data === undefined
网友评论