Что такое VueJS? Каковы основные особенности VueJS? 6

66. Как передать в директиву несколько значений?

Директива может принимать любое допустимое выражение javascript. Поэтому, если вы хотите передать несколько значений, вы можете передать литерал объекта JavaScript.
Давайте передадим объектный литерал в директиву аватара, как показано ниже

Теперь давайте настроим директиву аватара глобально,

Vue.directive('avatar', function (el, binding) {
console.log(binding.value.width) // 500
console.log(binding.value.height) // 400
console.log(binding.value.url) // path/logo
console.log(binding.value.text) // "Iron Man"
})

67. Что такое сокращение функции в хуках директив?

В некоторых случаях вам может потребоваться такое же поведение для хуков привязки и обновления независимо от других хуков. В этой ситуации вы можете использовать сокращение функции,
Vue.directive('theme-switcher', function (el, binding) {
el.style.backgroundColor = binding.value
})

68. В чем преимущество функций рендеринга перед шаблонами?

В VueJS шаблоны очень мощные и рекомендуются для создания HTML как части вашего приложения. Однако некоторые особые случаи, такие как создание динамического компонента на основе ввода или значения слота, могут быть выполнены с помощью функций рендеринга. Кроме того, эти функции предоставляют полную программную мощь экосистемы javascript.

69. Что такое функция рендеринга?

Функция рендеринга - это обычная функция, которая получает метод createElement в качестве первого аргумента, используемого для создания виртуальных узлов. Внутренне шаблоны Vue.js фактически компилируются для рендеринга функций во время сборки. Следовательно, шаблоны - это просто синтаксический сахар функций рендеринга.
Давайте рассмотрим пример простой разметки Div и соответствующей функции рендеринга. Разметку HTML можно записать в теге шаблона, как показано ниже:

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

render: function (createElement) {
return createElement('div', {
'class': {
'is-rounded': this.isRounded
}
}, [
createElement('p', 'Welcome to Vue render functions')
]);
}
Примечание. Компоненты реакции построены с помощью функций рендеринга в JSX.