Для создания приложения в Vue.js используется объект Vue. При создании этого объекта в его конструктор передается параметр, с помощью которых производится инициализация приложения:
var vm = new Vue({ // параметры })
Касательно кода html приложение Vue.js представляет некоторую область на веб-странице. Для определения этой области на веб-станице можно определить какой-либо элемент. А для связи с объектом Vue в нем определяется параметр el:
<!DOCTYPE html> <html> <head> <title>Изучаем Vue.js</title> <meta charset="utf-8" /> </head> <body> <div id="app"> </div> <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script> <script> var app = new Vue({ el: '#app' }) </script> </body> </html>
С помощью параметра data можно определить данные, которые должно хранить приложение, то есть его состояние:
var app = new Vue({ el: '#app', data: { name: 'Tom', age: 25 } })
Здесь через параметр data определяются свойства name и age.
Данные можно определять в виде внешнего объекта и затем передавать параметру data:
var userData = {name: 'Tom', age:25}; var app = new Vue({ el: '#app', data: userData }); app.age=30; app.name='Bob';
Кроме того, используя объект Vue, мы можем обращаться к его свойствам по имени, получать и присваивать им значение: app.age=30
Кроме хранения состояния Vue может определять поведение в виде параметра methods. Этот параметр указывает на набор методов. Каждый метод представляет стандартную функцию JavaScript. Например, определим ряд методов:
<!DOCTYPE html> <html> <head> <title>Изучаем Vue.js</title> <meta charset="utf-8" /> </head> <body> <div id="app"> <p>{{name}}</p> <p>{{welcome()}}</p> <p>Name: {{displayName()}}</p> <p>Factorial of 6 is equal to {{factorial(6)}}</p> </div> <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data:{name: 'Tom', age:25}, methods:{ welcome: function(){ return "Welcome"; }, displayName: function() { return this.name; }, factorial:function(n){ var result=1; for(var i=1; i<=n;i++){ result = result * i; } return result; } } }) </script> </body> </html>
Здесь определено три метода. Первый метод welcome просто возвращает некоторое значение. Второй метод возвращает значение свойства name. Для обращения к свойствам объекта Vue в методах используется ключевое слово this.
Третий метод принимает параметр - число и вычисляет для него факториал.