Привет! Эта статья призвана помочь новичкам освоить основные понятия и шаблоны JavaScript и VueJS. В конце статьи упоминаются несколько примеров VueJS (все бесплатные и с открытым исходным кодом). Для новичков VueJS — это ведущая технология внешнего интерфейса, используемая для кодирования интерактивных пользовательских интерфейсов на основе JavaScript.

Спасибо за прочтение! Темы охватывали:

  • 👉 Что такое Javascript
  • 👉 Short introduction to JS
  • 👉 JS Variables, типы данных, функции, массивы
  • 👉 VueJS Concepts
  • 👉 Ternary Operator, Destructuring, Spread Syntax
  • 👉 Open-Source Примеры VueJS

✨ Что такое JavaScript

JavaScript стал действительно горячей темой в языке программирования. Это неудивительно, ведь JavaScript несколько лет подряд оставался самым используемым языком программирования.

С технической точки зрения, JavaScript настолько мощен как язык программирования, потому что ядро ​​Javascript может работать во всех основных веб-браузерах и кросс-платформенно поверх Windows, Linux или macOS через движок NodeJS.

Javascript хорошо известен для разработки веб-приложений, но JavaScript также можно использовать для различных целей: для нативных мобильных приложений мы можем использовать такие фреймворки, как React Native или Ionic, для серверной веб-разработки мы можем использовать NodeJS или машинное обучение. .

✨ Введение в JavaScript

Чтобы хорошо разбираться в JavaScript и реализовать его в веб-браузере, вам необходимо начать изучать основы JavaScript, такие как variables, data types, arrays, functions, циклы и структуры управления. Вот некоторые основные концепции и помощники JavaScript, которые вы должны знать:

👉 Помощник JavaScript — Console.log()

Эта служебная функция используется для проверки выполнения и вывода кода Javascript.

<!DOCTYPE html>
<html>
<body>
 <h1>Basic Javascript</h1>
 <p>To open the console (Press F12).</p>
 <script>
  console.log('Hello.')
 </script>
</body>
</html>

👉 Переменные JavaScript

Переменные используются для хранения информации и ссылок в программе. В JavaScript мы можем использовать ключевые слова var, let и const. Если вы хотите, чтобы значение нельзя было изменить, используйте const, но если значение переменной можно изменить, используйте let.

<!DOCTYPE html>
<html>
<body>
 <h1>Basic Javascript</h1>
 <p>To open the console (Press F12).</p>
 <script>
   const number1 = 1;
   let number2   = 2;
 
   console.log('Hello.');
   console.log(number1);
   console.log(number2);

 </script>
</body>
</html>

👉 JavaScript Типы данных

Типы данных описывают различные типы данных, которые будут обрабатываться и храниться в переменных. Вот краткий список типов данных в JavaScript: String, Number, Array, Object и boolean.

<!DOCTYPE html>
<html>
<body>
 <h1>Basic Javascript</h1>
 <p>To open the console (Press F12).</p>
 <script>
   // Number
   let one = 11;
 
   // String
   let myname = 'James';
 
   // Boolean
   let isExist = true;
 </script>
</body>
</html>

👉 Функции JavaScript

Функция представляет собой набор операторов, которые выполняют задачу или вычисляют значение и могут многократно повторяться.

<!DOCTYPE html>
<html>
<body>
 <h1>Basic Javascript</h1>
 <p>To open the console (Press F12).</p>
 <script>
   function myFunc() {
     return 'hello';
   }
 </script>
</body>
</html>

👉 JavaScript Массивы

Массив — это специальная переменная, которую можно включить для хранения набора нескольких элементов под одним именем переменной.

<!DOCTYPE html>
<html>
<body>
 <h1>Basic Javascript</h1>
 <p>To open the console (Press F12).</p>
 <script>
   const my_array = [1, 2] // this is an array type
 </script>
</body>
</html>

✨ Концепции JS, используемые в VueJS

Перед использованием VueJS рекомендуется глубоко изучить и понять несколько концепций JS, широко используемых в VueJS. Давайте упомянем несколько концепций JS, которые помогают разработчикам быть опытными при написании проектов VueJs.

👉 JavaScript — условный (тернарный) оператор

В VueJ будет много условий для условного отображения или скрытия элементов или текста с помощью оператора if...else, который выглядит менее кратким. ternary operator работает точно так же, как оператор if, но короче и красивее декларативно.

// If / Else version 
   let value = '';
   const numb = 2;
   
   if(numb === 2) {
     value = 'number 2'
   } else {
     value = 'another number'
   }
 
   // Ternary Operator Version
   value =  numb !== 2 ? 'another number' : 'number 2'
   console.log(value) // number 2

👉 JavaScript —сокращение значения свойства объекта

Это для определения объекта, ключи которого имеют то же имя, что и переменные, переданные в качестве свойств, вы можете использовать сокращение. Это делает ваш код короче.

let one = 1;
   let two = 2;
   let three = 3;
 
   // Old Way
   const _object = {
     one: one,
     two: two,
     three: three,
   }
 
   // New way
   const object = {
     one,
     two,
     three,
   }

👉 JavaScript —деструктуризация

Деструктуризация — это механизм, который позволяет с легкостью извлекать значения массива или объекта.

// Object
   const student = {
     name: 'James',
     age: 5
   }
   // Destructuring Object	
   const { name, age } = student;
 
   // Array
   const people = ['James', 'Steve']
   
   // Destructuring Array
   const { first, second } = people;

👉 JavaScript —расширенный синтаксис

Синтаксис с тремя точками ... можно рассматривать как разновидность синтаксиса collection, где он работает с набором значений или итерируемым объектом.

// Object
   const student = {
     name: 'James',
     age: 5
   }
   const student2 = {...student};
 
   // Array
   const people = ['James', 'Steve']
   const people2 = [...people];

👉 JavaScript —нулевой оператор объединения

// Classic Check
   const value = 5;
   const a = value !== null ? value : 0;
   console.log(a); // 5
 
   // Nullish coalescing
   const b = value ?? 0;
   console.log(b) // 5

👉 JavaScript —функции со стрелками

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

// regular
   function addTwo(a) {
     return a + 2
   }
 
   // arrow function
   const addTwo = a => a + 2
 
   // regular
   function multiply(a) {
     return a * a
   }
 
   // arrow function
   const multiply = a => a * a
 
   // regular
   function getTwo() {
     return 2
   }
 
   // arrow function
   const getTwo = () => 2

👉 JavaScript —импорт и экспорт

Если вы работаете над современным приложением Javascript, велика вероятность того, что ваш код будет разбит на несколько файлов для выполнения определенных задач. Это хорошая идея, потому что ваш код будет более организованным и пригодным для повторного использования в других функциях. Эта концепция полностью применима к Vue из-за собственной компонентной архитектуры Vue.

Образец исходного файла —который exports содержит информацию

// file1.js
   export default function devide(a, b) {
     return a / b
   }

Образец файла импорта — повторное использование экспортированных данных.

// file2.js
   import { devide } from './file1.js'
   console.log( devide(6, 2) ) // 3

👉 JavaScript —Методы массива

Массив позволяет хранить набор из нескольких элементов в одном имени переменной, и я, вероятно, использую этот метод чаще всего, например:

  • map() — создает новый массив, заполненный результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.
  • filter() — создает новый массив со всеми элементами, прошедшими проверку, реализованную предоставленной функцией.
  • reduce() — выполняет предоставленную пользователем функцию обратного вызова reducer для каждого элемента массива по порядку, передавая возвращаемое значение из вычисления предыдущего элемента.
  • find() — возвращает первый элемент предоставленного массива, удовлетворяющий заданной функции тестирования. Если никакие значения не удовлетворяют функции тестирования, возвращается undefined.
  • includes() — определяет, содержит ли массив определенное значение среди своих элементов, возвращая true или false соответственно.

✨ VueJS — краткое введение

Vue — одна из самых популярных интерфейсных сред JavaScript, известная как прогрессивная внешняя среда. Это компонентная структура, построенная на основе стандартных HTML, CSS и JavaScript, что означает, что мы можем создавать приложения с помощью Vue, вставляя компоненты и передавая данные между ними.

В следующих разделах будут представлены несколько основных концепций, которые могут улучшить навыки разработчиков при кодировании приложений VueJS.

👉 VueJs интерполяция текста

Основной формой привязки данных в VueJs является интерполяция текста с использованием синтаксиса Mustache (двойные фигурные скобки). Он будет заменяться и обновляться при каждом изменении значения.

<h4>Your name: {{ yourName }}</h4>

👉 VueJsусловный рендеринг

Мы можем отображать элементы на экране с помощью директивы v-if. Директивы V-if — это коды Vue, которые мы можем применить, чтобы заставить элемент делать что-то, например, показывать или скрывать элемент.

<h4 v-if="yourName">Your name: {{ yourName }}</h4>

👉 Принять ввод с помощью V-model

В VueJs можно вводить данные через директиву v-model. Он называется two-way binding в элементе ввода формы или компоненте. С помощью V-model мы можем получить и установить данные для элемента.

<input type="text" v-model="search" placeholder="Search..." />

👉 Обработка событий в VueJS

VueJs очень эффективно обрабатывает события JavaScript. Vue предоставляет директиву v-on, которую можно заменить на @. Например, v-on:click совпадает с @click. Вот пример других директив v-on, таких как v-on:stop, v-on:prevent, v-on:self, v-on:capture, v-on:once и v-on:passive.

<button @click="doReset">Reset</button>

Те, кто терпеливо следит за содержанием, могут поиграть с несколькими VueJs Starters и Templates с открытым исходным кодом, упомянутыми в следующем разделе.

✨ Панель инструментов Vue Soft UI

Vue Soft UI Dashboard состоит из более чем 70 отдельных элементов внешнего интерфейса, таких как кнопки, поля ввода, панели навигации, вкладки навигации, карточки или оповещения, что дает вам свободу выбора и комбинирования.

Эта бесплатная панель инструментов Bootstrap 5 и VueJS 3 поставляется с предварительно созданными блоками дизайна, поэтому процесс разработки является бесшовным, переход с наших страниц на настоящий веб-сайт очень прост.

✨ Набор материалов Vue

Vue Material Kit — прекрасный ресурс, созданный на основе Vue Material и Vuejs. Это поможет вам быстро приступить к разработке UI Kit. Vue Material Kit — это официальная версия оригинального набора материалов Vuejs. Использование UI Kit довольно просто, но требует базовых знаний Javascript, Vuejs и Vue Router.

✨ Панель управления материалами Vue

Vue Material Dashboard — это бесплатный шаблон администратора, основанный на Vue3 и Bootstrap5. Если вы разработчик, который хочет создать панель администратора, удобную для разработчиков, богатую функциями и легко настраиваемую, то это то, что вам нужно.

Эта инновационная панель инструментов Vue3 и Bootstrap5 имеет красивый дизайн, вдохновленный Google Material Design, и поможет вам создавать потрясающие веб-сайты и веб-приложения, которые порадуют ваших клиентов.

Спасибо, что прочитали! Дополнительные ресурсы доступны по адресу: