html directive 内容传递,directive2.html

RunJS

body{background:#fefefe;}

.edit_area{

width:400px;

height:100px;

border:1px solid #ccc;

color:#222;

}

Data[text]:{{text}}

Data2[text2]:{{text2}}

input01

input02

+function(){

Vue.directive('editdiv', {

bind: function(el, binding, vnode) {

el.innerText = binding.value;

binding.hander = function() {

console.log(vm);

console.log(el.innerText);

vm.text=el.innerText;

};

el.addEventListener("keyup", binding.hander);

},

update: function(el, binding, vnode) {

console.log("update...");

el.innerText = binding.value;

TweenMax.to('#data',1,{scrambleText:binding.value});

},

unbind: function(el, binding, vnode) {

console.log("unbind...");

el.removeEventListener("keyup", binding.hander);

}

})

//注册组件

Vue.component("editor-text1", {

template: "#editor-with-text1",

props: ['textval'],

});

Vue.component("editor-text2", {

template: "#editor-with-text2",

props: ['textval'],

});

//开启根节点

var vm=new Vue({

el: '#container',

data:{

text:'12345',

text2:'45657'

}

});

}()

一键复制

编辑

Web IDE

原始数据

按行查看

历史