Vue — это просто и красиво.

Как пользователь Vue, я больше ориентируюсь на его простоту. Для меня Vue — это комбинация Angular и React. Программирование в Angular действительно отличается от других фреймворков. Angular основан на управлении данными. Например, чтобы скрыть элемент в других фреймворках, вам нужно получить ссылку на элемент, а затем установить для его отображения в стиле css значение «нет». В то время как в Angular вам просто нужно использовать директиву ngHide (Angular 1), и вы передаете истинное значение, и оно скроет ваш элемент. Если вы передали переменную, то при изменении значения этой переменной на true или false элемент будет автоматически отображаться или скрываться. Очень удобно! Эта функция называется директивой в Angular, и Vue имеет эту функцию директивы, которая ведет себя так же, как и в Angular. Таким образом, Vue имеет встроенный Angular.

Что мне действительно нравится в React, так это концепция Props, свойства компонента. React также добавляет типы данных для реквизита. Это означает, что вы можете добавлять атрибуты в свой компонент, и React автоматически проверит значения атрибутов. Vue также имеет эту концепцию Props, типы данных и проверку значения Props. С этой концепцией реквизита добавление атрибутов к компонентам очень просто. Это означает, что создать новый компонент в Vue очень просто. Но в Angular это было сложно.

Поэтому я решил пойти дальше и запустить Vue.

Подготовка среды

* Необходима установка Node. Проверьте работу на v8 (бывают случаи, когда он старый и не шевелится)

1. Установка vue-cli
$ npm i -g vue-cli

2. Подтвердите, можно ли использовать команду vue (ОК, когда появится версия)
$ vue --version

3. Создайте проект, используя шаблон Vue.js.
$ vue init webpack-simple my-project
Поскольку меня спрашивают о названии проекта, я пока нажимаю на вход.

$ cd my-project
$ npm i

С помощью приведенной выше команды можно опробовать различные шаблоны Vue в папке моего проекта.

4. Запустите браузер подтверждения
$ npm run dev

Внутри App.vue

< template > ... </ template >  　Write HTML
 < script > ... </ script >  　　　Write js
 < style > ... </ style >　　　　 Describe CSS

Глядя на содержимое App.vue, вы можете видеть, что структура файла vue примерно разделена на три части.

Привязка данных

В Vue.js {{...}}часть, описанная с помощью HTML, и значение, описанное в Data in script, связаны.

<h1> {{msg}} </h1> 
<a  : href = "url" > link sample </a>
<script> 
export  default  { 
  name :  'app' , 
  data  ()  { 
    return  { 
      msg :  'Welcome to Your Vue.js App' , 
      url :  'https: google.com' 
    } 
  } 
} 
</script>

Если вы хотите поместить значение в атрибут тега, поместите его перед именем атрибута :.

Обработка событий

Пример 1 _ Кнопка счетчика

<a @ the click = "countUp" > EventButton </ a > 
<p> {{counter}} </p>
<Script> 
export  default  { 
  name :  'app' , 
  data  ()  { 
    return  { 
      counter :  1 
    } 
  }, 
  methods :  { 
      countUp ()  { 
          this . Counter ++ ; 
      } 
  }
} 
</script >

Обработка, связанная с обработкой, описана в методах.
Это увеличит число eventButtonкогда будет выполнено нажатие {{counter}}.

Пример 2 _ Показать/скрыть элементы

<a  Atto Click = "Toggle" > Message Show Button </a> 
    <the p-  V-If = "ShowMessage" > Message </ the p- >
<Script> 
Export  Default  { 
  Name :  'App' , 
  Data  ()  { 
    Return  { 
      ShowMessage :  True 
    } 
  }, 
  Methods :  { 
      Toggle ()  { 
          This . ShowMessage  =  ! This . ShowMessage 
      } 
  }
} 
</script >

message Show ButtonВы можете нажать сообщение, чтобы отключить сообщение.

Использование компонентов

Компоненты можно создавать с помощью файлов .vue.

Определите образец компонента во вновь созданном Example.vue.

<template> 
    <div>
        Sample component
    </div> 
</template>

Ссылки на компоненты, определенные в отдельных файлах, можно сделать с помощью операторов импорта.

Просмотрите Example.vue в App.vue

<script> 
import  ExampleComponent  from  '. 
/ Example.vue' </script>

После импорта он становится тегом, который можно использовать, зарегистрировав имя.

Зарегистрируйте ExampleComponent, прочитанный в App.vue, как компонент в теге myComponent.

<script> 
import  ExampleComponent  from  '. / Example.vue' 
    export  default  { 
        components :  { 
          myComponent :  ExampleComponent 
        } 
    } 
</script>

Использование зарегистрированных компонентов

< myComponent > </ myComponent >

↓ HTML-результат

< div >
    Sample component
</ div >

Разработка SPA на Vue.js

Для перехода между состояниями экрана в JS-приложении обычно используется метод с использованием библиотеки роутинга.
В Vue.js обычно создается SPA с использованием библиотеки маршрутизатора под названием VueRouter.

1. Установите ВьюРоутер

npm i vue-router --save

2. src/main.jsЗаписать VueRouter на 2.

main.js

import  VueRouter  from  'vue-router' 
Vue . use ( VueRouter )
var  : router  =  new new  VueRouter ({ 
    routes  :  [ 
      // here describe the root 
    ] 
})

3. Опишите маршрут

Const  Foo  =  {  Template :  '<Div> Foo </ Div>'  } 
Const  Bar  =  {  Template :  '<Div> Bar </ Div>'  } 
// import to reference from another file 
Import  ExampleComponent  From  './Example .vue ' 
import  Post  from  ' ./Post.vue '

var  : router  =  new new  VueRouter ({ 
    routes  :  [ 
　　　　// address described in association component to be displayed 
      {  path :  '/ foo' ,  component :  Foo  }, 
      {  path :  '/ bar' ,  component :  Bar  }, 
      {  path :  '/' ,  component :  ExampleComponent  }, 
      {  path :  '/ post /: id' ,  component :  Post  } 
    ] 
})

4. Использовать маршрут

источник / App.vue

<Template > 
　< Router-Link  To = "/" > Top </ Router-Link > 
        < Router-Link  To = "/ Foo" > Foo Page </ Router-Link > 
        < Router-Link  To = "/ Bar" > Page Bar </ Router-Link > 
        < Router-Link  To = "/ post / 2355" > post 2355 </ Router-Link > 
        <router-link  to = "/ post / 0655" >Posting 0655 </ router-link >
        < router-view > </ router-view >
　　　　
</ template >

Переключитесь на компонент, указанный по URL-адресу в месте установки. Элементы доступны для
переключения корневого URL router-link. Опишите корневой URL-адрес в элементе to вместо href.

Загрузить на рабочий сервер

Поскольку vue не может быть распознан браузером, это нормально, если он
npm run buildвыдается dist/build.jsUP только на два HTML-сервера.

Постскриптум (src/Post.vue)

Похоже, Post.vue непреднамеренно забыли описать его. Постараюсь вскоре написать об этом статью.
src / Post.vue

< template > 
    < div > 
        < h1 > {{title}} </ h1 > 
        < p > ID of post: {{$ route.params.id}} </ p > 
    </ div > 
</ template >
< script > 
    export  default  { 
        data ()  { 
            return { 
                title :  "article title" 
            }
        } 
    } 
</ script >