Создал файл TemplateSyntax.vue и писал примры из руководства

src/App.vue

@@ -1,14 +1,22 @@
-<template>
+<script setup>
-  <HelloWorld msg="Hello Vue 3.0 + Vite" />
-</template>
 
-<script>
+import TemplateSyntax from './sample_examples/TemplateSyntax.vue'
-import HelloWorld from './components/HelloWorld.vue'
 
-export default {
+import { ref } from 'vue'
-  name: 'App',
+
-  components: {
+// Создаем реактивное состояние
-    HelloWorld
+const count = ref(0)
-  }
+
+// Функция для увеличения значения
+function increment() {
+  count.value++
 }
 </script>
+
+<template>
+  <TemplateSyntax />
+  <hr />
+  <!-- Родной пример -->
+  <button @click="increment">{{ count }}</button>
+</template>
+

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);
 }

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')

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>