VueJS - Экземпляры
Чтобы начать с VueJS, нам нужно создать экземпляр Vue, который называется root Vue Instance.
Синтаксис
var app = new Vue({
// options
})Давайте посмотрим на пример, чтобы понять, что должно быть частью конструктора Vue.
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<h1>{{mydetails()}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_instance.js"></script>
</body>
</html>vue_instance.js
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
address : "Mumbai"
},
methods: {
mydetails : function() {
return "I am "+this.firstname +" "+ this.lastname;
}
}
})Для Vue есть параметр под названием el. Требуется идентификатор элемента DOM. В приведенном выше примере у нас есть идентификатор#vue_det. Это идентификатор элемента div, который присутствует в .html.
<div id = "vue_det"></div>Теперь все, что мы собираемся сделать, повлияет на элемент div и ничего за его пределами.
Затем мы определили объект данных. Он имеет значение имя, фамилия и адрес.
То же самое назначается внутри div. Например,
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
</div>Значение Firstname: {{firstname}} будет заменено внутри интерполяции, т.е. {{}} значением, присвоенным в объекте данных, т.е. Ria. То же самое и с фамилией.
Затем у нас есть методы, в которых мы определили функцию mydetails и возвращаемое значение. Он назначается внутри div как
<h1>{{mydetails()}}</h1>Следовательно, внутри {{}} вызывается функция mydetails. Значение, возвращаемое в экземпляре Vue, будет напечатано внутри {{}}. Проверьте вывод для справки.
Вывод
Теперь нам нужно передать параметры конструктору Vue, который в основном представляет собой данные, шаблон, элемент для монтирования, методы, обратные вызовы и т. Д.
Давайте посмотрим на параметры, которые нужно передать в Vue.
#data- Этот тип данных может быть объектом или функцией. Vue преобразует свои свойства в геттеры / сеттеры, чтобы сделать его реактивным.
Давайте посмотрим, как данные передаются в опциях.
пример
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj", lname: "Singh"}
// direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
</script>
</body>
</html>Вывод
console.log(vm.fname); // печатает Раджа
console.log(vm.$data); печатает весь объект, как показано выше
console.log(vm.$data.fname); // печатает Раджа
Если есть компонент, на объект данных должна быть сделана ссылка из функции, как показано в следующем коде.
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj", lname: "Singh"};
// direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
// must use function when in Vue.extend()
var Component = Vue.extend({
data: function () {
return _obj
}
});
var myComponentInstance = new Component();
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);
</script>
</body>
</html>В случае компонента данные представляют собой функцию, которая используется с Vue.extend, как показано выше. Данные - это функция. Например,
data: function () {
return _obj
}Чтобы обращаться к данным из компонента, нам нужно создать его экземпляр. Например,
var myComponentInstance = new Component();Чтобы получить детали из данных, нам нужно сделать то же самое, что и с родительским компонентом выше. Например.
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);Ниже приведены сведения, отображаемые в браузере.
Props- Тип для реквизита - это массив строки или объекта. Он принимает синтаксис на основе массива или объекта. Они называются атрибутами, используемыми для приема данных от родительского компонента.
Пример 1
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})Пример 2
Vue.component('props-demo-advanced', {
props: {
// just type check
height: Number,
// type check plus other validations
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})propsData - Используется для модульного тестирования.
Type- массив строки. Например, {[ключ: строка]: любой}. Его нужно передать при создании экземпляра Vue.
пример
var Comp = Vue.extend({
props: ['msg'],
template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})Computed- Тип: {[ключ: строка]: Функция | {get: Function, set: Function}}
пример
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new Vue({
data: { a: 2 },
computed: {
// get only, just need a function
aSum: function () {
return this.a + 2;
},
// both get and set
aSquare: {
get: function () {
return this.a*this.a;
},
set: function (v) {
this.a = v*2;
}
}
}
})
console.log(vm.aSquare); // -> 4
vm.aSquare = 3;
console.log(vm.a); // -> 6
console.log(vm.aSum); // -> 8
</script>
</body>
</html>Computed имеет две функции aSum и aSquare.
Функция aSum просто возвращает this.a+2. Функция aSquare снова две функцииget и set.
Переменная vm является экземпляром Vue и вызывает aSquare и aSum. Также vm.aSquare = 3 вызывает функцию set из aSquare, а vm.aSquare вызывает функцию get. Мы можем проверить вывод в браузере, который выглядит как на следующем снимке экрана.
Methods- Методы должны быть включены в экземпляр Vue, как показано в следующем коде. Мы можем получить доступ к функции с помощью объекта Vue.
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new Vue({
data: { a: 5 },
methods: {
asquare: function () {
this.a *= this.a;
}
}
})
vm.asquare();
console.log(vm.a); // 25
</script>
</body>
</html>Методы являются частью конструктора Vue. Сделаем вызов метода с помощью объекта Vuevm.asquare (), стоимость имущества a обновляется в asquareфункция. Значение a изменяется с 1 на 25, и то же самое отображается в следующей консоли браузера.
