Фреймворк Vue.js

Lesson 5, Advanced JS, Bondarchuk

by shurikation

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Test</title>
</head>
<body>
  <div id="root">
    <h2>Hi, {{fullName}}</h2> 2.. и можем использовать как переменную - подставив ее в код
    <h2>Hi, {{`Mr.`+ fullName.toUpperCase()}}</h2> Можем передавать функции
    <input type="text" v-model>
    <ul>
      <li></li>
    </ul>
    <button></button>
  </div>
</body>
</html>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

//React - поддерживается фэйсбуком
//Fngular - поддерживается google

//Vue - это один человек, опен сурс проект теперь, получает 20к долларов на донатах
//Пожалуй, наиболее простой из этой тройки

//Подключаем в HTML пока что
//Можно через npm 
//А пока - через исходники - скачиваем vue.js или через CDN - быстрые сервра предназанченные на отдачу быструю статических данных. Это плюс в производительности, этот файл кэшируется, если человек зашел на сайт загрузил его он уже есть в кэше. CDN - оень хорошо оптимизированы, в отличие от вашего кастомного браузера, время отклика и так далее.

//jsDelivr
//Один из CDN хороших
//https://cdn.jsdelivr.net/npm/package@version/file

//Вместо package - vue
//version - 2.5.17

//Готовится к выходу 3 версия, будьте осторожны, мануалы по Вью, учитывайте версию и их совместимост

//вмессто flie - dist/vue.js
//Открываем html в браузере - в Network - подключились два файла

//Одного Vue без плагинов, расширений сложно написать большой проект. Для этого есть интрументы автоматизации. Но пока в учебных целях - только вручную.

const application = new Vue();
console.log(application); //если вывелся объект, то все ок

//Пример стандартный jsfiddle:
new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})

//Важно Научиться подставлять данные в этот шаблон new Vue
//Создадим div с id='root', добавим эту инфу в объект:

let app = new Vue({
	el: '#root', //1.Cвязал el с ХТМЛ элементом с ид рут, и вообще весь этот объект. Идем в верстку...
  data: {
  	fullName: 'Luke Skywalker'
  }
});

<div id="root">
    <h2>Hi, {{fullName}}</h2> 2.. и можем использовать как переменную - подставив ее в код
    <h2>Hi, {{`Mr.`+ fullName.toUpperCase()}}</h2> Можем передавать...