Супер забавная новая функция Vue: введение переменных JS в CSS

внешний интерфейс Vue.js CSS
Супер забавная новая функция Vue: введение переменных JS в CSS

фантастика

Когда я работал над проектом, я часто думал об этом так:

<template>
  <h1>{{ color }}</h1>
</template>

<script>
export default {
  data () {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
h1 {
  color: this.color;
}
</style>

Конечно, думая об этом и зная, что это невозможно, JS и CSS относятся к разным контекстам, причем тут CSS?

Итак, как вы можете использовать переменные JS в CSS? Тогда вы можете использовать JS только для управления DOM, а затем запихивать переменные в стиль.Например, используйте ref для получения элемента DOM, а затем dom.style.color = this.color.

или в шаблоне:

<template>
  <h1 :style="{ color }">Vue</h1>
</template>

<script>
export default {
  data () {
    return {
      color: 'red'
    }
  }
}
</script>

Однако этот метод все еще имеет недостатки, например, не рекомендуется писать стили в атрибуте стиля, а повторное использование переменных очень проблематично, например, если группа DOM-элементов хочет использовать эту переменную, они должны дать этой переменной Настроить имя класса, а затем document.getElementsByClassName() в смонтированном.После получения коллекции DOM необходимо перебрать каждый элемент и добавить к нему dom.style.color = this.color, что тратит много производительности.

На самом деле, сам CSS имеет много дефектов и не является полным по Тьюрингу, поэтому это привело к появлению различных препроцессоров: Sass, Less, Stylus и т. д.

Они предоставляют множество возможностей для CSS: циклы, условные операторы, переменные, функции и т. д.

Одной из очень полезных функций является то, что变量! Таким образом, CSS также ввел понятие переменных.Так как есть переменные CSS, многие вещи действительно удобны.Управление переменными CSS через JS, а затем использование переменных CSS, где это необходимо, намного эффективнее, чем предыдущий метод.

Что такое CSS-переменные

В JS переменные обычно имеют следующие характеристики:

  • утверждение
  • использовать
  • объем
  • По умолчанию

утверждение

Чтобы облегчить понимание, давайте используем JS, чтобы провести аналогию:

var color = 'red';

эквивалентен в CSS:

--color: red;

Конечно, это не то же самое, что JS, но если вы изучаете такие языки, как PHP или Sass, вы должны очень хорошо в этом разбираться.В PHP или Sass при объявлении переменных нет ключевого слова, а первое имя переменной. К биту добавляется знак доллара $, что означает, что переменная объявлена.

PHP:

$color = 'red';

Sass:

$color: color;

Но символ $ занят Sass, а символ @ занят less, поэтому CSS может придумывать только другие символы, символы CSS — это два знака минус —

использовать

Нет особого смысла объявлять переменную, она имеет ценность только тогда, когда она используется:

JS:

console.log(color)

Вы видите, что var — это просто ключевое слово для объявления переменных, а color — это имя переменной.

PHP:

echo $color;

Scss:

h1 {
  color: $color;
}

Но в PHP или Sass переменные объявляются с помощью $, и они должны использоваться с $.

Это сбивает с толку многих разработчиков, поэтому CSS использует функцию, вызываемую при использовании переменных.var():

CSS:

h1 {
  color: var(--color);
}

Хотя он такой же, как PHP и Sass, он должен иметь префикс (потому что это часть имени переменной), но разница в том, что вам нужно использоватьvar()чтобы обернуть переменную.

объем

Это легко понять, не только в JS, но и в CSS, например:

JS:

var color = 'red';

function h1 () {
  console.log(color);
}

function div () {
  var color = 'blue';
  console.log(color);
}

h1(); // red
div(); // blue

Аналогично в CSS:

body {
  --color: red;
}

h1 {
  color: var(--color); /** 这里获取到的是全局声明的变量，值为red **/
}

div {
  --color: blue;
  color: var(--color); /** 这里获取到的是局部声明的变量，值为blue **/
}

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

По умолчанию

Иногда нам нужно объявить переменную, а затем в какой-то момент присвоить ей значение, обычно мы пишем:

let a

function xxx () {
  if (xxx) {
    a = xxx
  }
}

этоaПо умолчанию переменная равнаundefined, что эквивалентно этому:

let a = undefined

CSSПеременные также могут иметь значения по умолчанию, то естьvar()Второй параметр функции:

div {
  width: var(--width, 100px)
}

если не определено--widthпеременная, то будет взято значение второго параметра, что нам очень подходит для инкапсуляции компонентов.

Китайские переменные CSS

Однажды я увидел две библиотеки с большими мозгами только для того, чтобы обнаружить, что CSS-переменные тоже можно проигрывать вот так:

Из их названий видно, что все они начинаются с китайского языка, поэтому велика вероятность, что это CSS-переменные, сделанные на китайском языке.

Другими словами, переменные CSS очень инклюзивны. В отличие от предыдущего программирования, которое должно быть названо на английском языке, китайский на этот раз также может работать отлично. Если вы мне не верите, давайте попробуем:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在这里用link标签引入中文布局 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">

  <!-- 在这里用link标签引入中文渐变色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0 }
    ul { list-style: none }

    /* 全屏显示 */
    html, body, ul { height: 100% }

    /* 在父元素上写入九宫格 */
    ul {
      display: grid;
      grid: var(--九宫格);
      gap: 5px
    }

    /* 给子元素上色 */
    li {
      background: var(--极光绿)
    }
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

результат операции:

То есть переменные CSS можно определить так:

body {
  --蓝绿色: aquamarine;
}

Затем при вызове:

h1 {
  color: var(--蓝绿色);
}

переменные в vue

Итак, как я могу использовать его в vue3<style>используется в<script>Как насчет переменных объявленных в нем?

Сначала мы создаем проект vite (Не используйте vue-cli):

npm init vite-app vars

Затем перейдите в эту папку для установки зависимостей:

cd vars

npm i

Затем создайте компонент, тип компонента выглядит следующим образом:

<template>
  <h1>{{ color }}</h1>
</template>

<script>
export default {
  data () {
    return {
      color: 'red'
    }
  }
}
</script>

<style vars="{ color }">
h1 {
  color: var(--color);
}
</style>

Вспомните, как выглядят компоненты в фентези, которое я написал в начале статьи:

<style>
h1 {
  color: this.color;
}
</style>

Но каким бы хорошим ни был Vue, он не сможет поместить это в CSS, если вы не сделаете еще один препроцессор, но на этот раз использование переменных CSS может быть очень близко к компонентам, которые мы себе представляли:

<style vars="{ color }">
h1 {
  color: var(--color);
}
</style>

первый в<style>написать на этикеткеvars="{}", а затем запишите значение, которое вы объявили в данных, в фигурных скобках.

Если переменных несколько, они должны быть разделены запятыми:

<template>
  <h1>Vue</h1>
</template>

<script>
export default {
  data () {
    return {
      border: '1px solid black',
      color: 'red'
    }
  }
}
</script>

<style vars="{ border, color }" scoped>
h1 {
  color: var(--color);
  border: var(--border);
}
</style>

Давайте попробуем еще раз, чтобы увидеть, является ли эта переменная отзывчивой и изменяется динамически.<script>на этикеткеthis.opacityБудет ли значение вызывать изменения в представлении? Попытайся:

<template>
  <h1>Vue</h1>
</template>

<script>
export default {
  data () {
    return {
      opacity: 0
    }
  },
  mounted () {
    setInterval(_ => {
      this.opacity >= 1 && (this.opacity = 0)
      this.opacity += 0.2
    }, 300)
  }
}
</script>

<style vars="{ opacity }">
h1 {
  color: rgb(65, 184, 131);
  opacity: var(--opacity);
}
</style>

результат операции:

Вы можете видеть, что мы меняем значение this.opacity каждые 300 миллисекунд, и оно будет сопоставлено с переменными CSS.При изменении this.opacity значение --opacity изменится соответственно, и представление также изменится вместе с данными. Обновите соответственно, эта функция просто офигенная!

открытый разум

теперь, когдаchinese-gradientа такжеchinese-layoutЭти две библиотеки CSS проверили реализуемость китайских переменных CSS, и я помню, что свойства объектов также могут быть записаны на китайском языке, поэтому давайте попробуем использовать эту черную магию, чтобы написать китайский язык в vue:

<template>
  <h1>Vue</h1>
</template>

<script>
export default {
  data () {
    return {
      '透明度': 0
    }
  },
  mounted () {
    setInterval(_ => {
      this['透明度'] >= 1 && (this['透明度'] = 0)
      this['透明度'] += 0.2
    }, 300)
  }
}
</script>

<style vars="{ 透明度 }">
h1 {
  color: rgb(65, 184, 131);
  opacity: var(--透明度);
}
</style>

результат операции:

Дома! Конечно! стали! достижение! !

В будущем, если вы не знаете, как его назвать, не используйте ханью пиньинь, а просто пишите по-китайски, ха-ха! Во время последующего обслуживания вы можете сразу увидеть имя переменной (Однако рекомендуется использовать английский язык.).

принцип

Догадка также может быть угадана, высокая вероятность используется аналогичноdom.style.setProperty('--opacity', this.opacity)Такие методы, нажмите f12, чтобы открыть консоль, и, конечно же, она управляет атрибутом стиля элемента компонента:

Тем не менее, мы только что использовали var в теге 

<style vars="{ 透明度 }" scoped>
h1 {
  color: var(--透明度);
}
</style>

результат операции:

Вы можете видеть, что Vue также компилирует переменную CSS иdata-v-Следующая строка случайных символов такая же:

Затем возникает проблема, если я определяю--colorсвойства, я используюscopedЯ хочу использовать эту глобальную переменную CSS в компоненте свойства, но как только она появится вscopedИспользуемая в нем переменная CSS будет скомпилирована в:--62a9ebed-colorНо глобальное определение не--62a9ebed-colorно--color, поэтому будет ситуация, когда глобальный атрибут не может быть найден.Как решить эту проблему? На самом деле все очень просто, просто--добавитьglobal:Просто хорошо:

<style vars="{ color }" scoped>
h1 {
  color: var(--global:color);
}
</style>

Скомпилированный CSS станет таким:var(--color)Ла!

Эпилог

Как это не весело? Это обновление Vue полно искренности, но все сосредоточились на Composition-API, и не заметили этих незаметных уголков, но эти уголки могут значительно улучшить наш опыт разработки.

Кстати, CSS-переменные тоже совместимы:

отcaniuseНа сайте видно, что он не совместим с IE, при его использовании не забудьте подтвердить область совместимости вашего собственного проекта.

возобновить

В настоящее время грамматика в этой статье была изменена You Yuxi, пожалуйста, ознакомьтесь с новой грамматикой.«Vue 3.0.3: добавлена ​​​​передача переменных CSS и последнее предложение Ref»

Замечательные статьи в прошлом

Категории