From e1612b74bc1929d5e2a01dd8471006e487f060c5 Mon Sep 17 00:00:00 2001
From: Denis M <mds@gd.com>
Date: Thu, 11 Dec 2025 16:25:36 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=20=D1=84?=
 =?UTF-8?q?=D0=B0=D0=B9=D0=BB=20TemplateSyntax.vue=20=D0=B8=20=D0=BF=D0=B8?=
 =?UTF-8?q?=D1=81=D0=B0=D0=BB=20=D0=BF=D1=80=D0=B8=D0=BC=D1=80=D1=8B=20?=
 =?UTF-8?q?=D0=B8=D0=B7=20=D1=80=D1=83=D0=BA=D0=BE=D0=B2=D0=BE=D0=B4=D1=81?=
 =?UTF-8?q?=D1=82=D0=B2=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                            | 28 +++++---
 src/index.css                          | 11 ++-
 src/main.js                            | 11 ++-
 src/sample_examples/TemplateSyntax.vue | 98 ++++++++++++++++++++++++++
 4 files changed, 136 insertions(+), 12 deletions(-)
 create mode 100644 src/sample_examples/TemplateSyntax.vue

diff --git a/src/App.vue b/src/App.vue
index a2def34..ac972b7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,22 @@
-<template>
-  <HelloWorld msg="Hello Vue 3.0 + Vite" />
-</template>
+<script setup>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
+import TemplateSyntax from './sample_examples/TemplateSyntax.vue'
 
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
+import { ref } from 'vue'
+
+// Создаем реактивное состояние
+const count = ref(0)
+
+// Функция для увеличения значения
+function increment() {
+  count.value++
 }
 </script>
+
+<template>
+  <TemplateSyntax />
+  <hr />
+  <!-- Родной пример -->
+  <button @click="increment">{{ count }}</button>
+</template>
+
diff --git a/src/index.css b/src/index.css
index 852de7a..80f7d9f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,7 +2,16 @@
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+
   color: #2c3e50;
   margin-top: 60px;
+  margin-top: 60px;
 }
+
+div{
+  line-height: 24px;
+}
+
+code{
+  color: rgb(49, 139, 190);
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 50a4dab..d9054da 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,4 +2,13 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import './index.css'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+
+app.config.errorHandler = (err) => {
+    alert(err)
+}
+
+// Регистрация компонентов
+// app.component('table',vuetable)
+
+app.mount('#app')
diff --git a/src/sample_examples/TemplateSyntax.vue b/src/sample_examples/TemplateSyntax.vue
new file mode 100644
index 0000000..054f45d
--- /dev/null
+++ b/src/sample_examples/TemplateSyntax.vue
@@ -0,0 +1,98 @@
+
+<script setup>
+    import { ref } from 'vue'
+    const ref_var1 = ref("Значение реактивной переменной!")
+    const ref_html = ref("<b>Текст html</b>")
+
+    //attr
+    const id_el = "attr_23"
+    const isset = 0
+    var count = 20
+
+    const tr_el = {
+        id:"row1",
+        class:"sytle_element",
+        style:"color:#333"
+    }
+
+    const event = "click"
+
+    const date = '2025-12-11'
+
+    function formatDate(date) {
+        const dateObj = new Date(date);
+       
+        return dateObj.getDate()+"."+Number(dateObj.getMonth()+1)+"."+dateObj.getFullYear()
+    }
+
+    function clk(params) {
+        alert("df")
+    }
+</script>
+
+
+
+<template>
+    <h1>Синтаксис шаблонов</h1>
+    
+    <h3>Вывод переменных</h3>
+    <div>Реактиваня перемення!: {{ref_var1}}</div>
+    <div> Вывод текста используя двойные фигурные скобки: {{ ref_html }}</div>
+    <div> Вывод текста используя директиву v-html (как html): <span v-html="ref_html"></span></div>
+    
+    <h3>Атрибуты</h3>
+    <div :id="id_el">К данному элементу добавили атрибут id="{{ id_el }}"</div>
+    <br>
+    <button :disabled="isset">
+        У кнопки есть атрибут disabled с переменной isset. Если она имеет какое либо значение, 
+        тогда будет true и элемент бедет недоступен. Если надо убрать элемент работает false || 0
+    </button>
+    <br><br>
+    
+    <div v-bind="tr_el">К данному элементу добавлены атрибут использую объект <b>tr_el = {{ tr_el }}</b></div>
+
+    <h3>Использование JS-выражений</h3>
+  
+    <div> <code>{&nbsp;{  count +1  }&nbsp;}</code> =  {{ count + 1 }}</div>
+    <!--  
+        В примере выше выводится результат сложения count + 1, при этом сама переменная не увеличивается она все 20. 
+        Как видно в результате ниже (N) 
+    -->
+    <div> Только выражения: <code>{&nbsp;{ count > 20 ? 'Y' : 'N' }&nbsp;}</code> res: {{ count > 20 ? 'Y' : 'N' }}</div>
+
+    <!-- НЕПРАВИЛЬНО -->
+    <!-- это определение переменной, а не выражение: -->
+    <code>{&nbsp;{ var a = 1 }&nbsp;} </code>- работать не будет
+
+    <h5>Вызов функции (Методы)</h5>
+    <div>Дата <time :datetime="date">{{ formatDate(date) }}</time></div>
+
+    <h3>Директивы</h3>
+
+    <div> <code>v-if="var"</code> - Директив для отображения/скрытия тега. Дириктива полностью убирает элемент из ДОМа, выводя вместо него комментарий (!-- v-if -->) <b v-if="isset">ТЕКС в B</b> </div>
+
+    <pre>
+        Дириктива для объявления атрибутов элементам: <code>v-bind:id="id_213"</code>
+        <code>v-bind:</code> - Называется директивой
+        <code>:id</code> - Называется аргументом
+    </pre>
+
+    <h3>Аргументы и динамические аргументы</h3>
+
+    <div>Дириктива для событий  <code>@click="clk"</code> . Пример: <span @click="clk">Нажми</span></div>
+
+    <div>Динамический аргумент <code>@[event]="clk"</code> [<span @[event]="clk">Элемент с событием</span>]</div>
+
+    <h3>Модификаторы</h3>
+    
+    <div> <code>@submit.prevent</code> - Эквивалентин: <code>event.preventDefault()</code>.  Пример: <form @submit.prevent="onSubmit" type="button" >Форма</form> </div>
+
+</template>
+
+<style>
+pre{
+    background: lightyellow;
+    border: dashed 1px #aaa;
+    padding: 0;
+}
+</style>
\ No newline at end of file