Объект Vue

Последнее обновление: 27.07.2017

Для создания приложения в 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.

Третий метод принимает параметр - число и вычисляет для него факториал.

Методы в Vue.js

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850