Работа с пользовательскими атрибутами/директивами в HTML + Javascript

Question

Я проходил через vue.js и angular.js код, но не могу понять, как они обрабатывают настраиваемые директивы в html?

Например, предположу, что у меня есть следующий DIV: <div my-repeat="item in items"></div>

Чтобы добиться чего-то подобного тому, что vue.js делает, я должен сканировать DOM элементы всего документа, чтобы найти все места где my- префикса атрибутов и то каким-то образом попытайтесь выяснить, что делает остальная часть его функциональности?

Я буквально потратил несколько часов, пытаясь понять это, но не повезло. Любые идеи/направления были бы очень благодарны.

Answer 1

Я не знаю наверняка, как Vue и Угловое сделать это, но вот пример того, как можно реализовать функции, указанные в пользовательском атрибуте:

var element = document.querySelector('[function-attribute]'); 
 
var fn = new Function(element.attributes['function-attribute'].value).bind(element); 
 
fn();

<div value-attribute='something' function-attribute="alert(this.attributes['value-attribute'].value);"></div>