<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script></script>
<script src="../../js_script/vue-2.3.0.js"></script>
<script>
Vue.directive('test', {
bind: function() {
},
inserted: function(el, binding, vnode) {
var data = binding.value;
el.innerHTML = data.age + '............';
},
update: function(el, binding, vnode) {
// 監聽的值有變動，會進來這
var data = binding.value;
el.innerHTML = data.age + '............';
},
componentUpdated: function() {
debugger;
},
unbind: function() {
debugger;
}
});
</script>
</head>
<body>
<div id="div_1">
<div>
<input type="text" v-model="age" />
</div>
<div v-test="{age: age, list: ageList}">
</div>
</div>
<script>
var view_div_1 = new Vue({
el: '#div_1',
data: {
age: 15,
ageList: [5, 10, 15]
}
});
</script>
</body>
</html>
2017年6月23日 星期五
vue.js directive
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言