От автора: чтобы начать работу с VueJS, нам нужно создать экземпляр Vue, который называется корневым экземпляром Vue и обозначается как new vue.
var app=newVue({
// options
})
Давайте рассмотрим пример, чтобы понять, что должно входить в конструктор Vue.
<html>
<head>
<title>VueJsInstance</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>
var vm=newVue({
el:'#vue_det',
data:{
firstname:"Ria",
lastname :"Singh",
address :"Mumbai"
},
methods:{
mydetails:function(){
return"I am "+this.firstname+" "+this.lastname;
}
}
})
Для Vue этот параметр называется el. Он принимает id элемента DOM. В вышеприведённом примере у нас есть id #vue_det. Это id элемента div, который присутствует в html.
<div id="vue_det"></div>
А теперь, что бы мы не сделали, это повлияет на элемент div, но больше ни на что вне этого элемента. Затем мы определили объект данных. Он содержит значения firstname, lastname и address. То же самое присваивается в div. Например:
<div id="vue_det">
<h1>Firstname:{{firstname}}</h1>
<h1>Lastname:{{lastname}}</h1>
</div>
Имя Firstname : {{firstname}} будет заменено внутри интерполяции, то есть {{}} на значение, присвоенное объекту данных, то есть Ria. То же самое касается и last name. Дальше у нас есть методы, в которых мы определили функцию mydetails и возвращаемое значение. Оно присвоено внутри div как:
<h1>{{mydetails()}}</h1>
Отсюда следует, что внутри {{}} вызывается функция mydetails. Значение, возвращаемое в экземпляре Vue будет выведено внутри {{}}.
Результат будет следующий:
Теперь нам нужно передать конструктору Vue параметры, которыми, в основном, являются данные, шаблон, элемент для монтирования, методы, обратные вызовы и так далее. Давайте рассмотрим, которые должны быть переданы Vue.
#data – Этот тип данных может быть объектом или функцией. Vue конвертирует его свойства в методы доступа, чтобы сделать его реактивным.Ниже можно увидеть, как данные передаются в параметры.
Пример:
<html>
<head>
<title>VueJsIntroduction</title>
<script type="text/javascript"src="js/vue.js"></script>
</head>
<body>
<script type="text/javascript">
var _obj={fname:"Raj",lname:"Singh"}
// прямое создание экземпляра
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); // выводит Raj
console.log(vm.$data); выводит полный объект, как показано выше
console.log(vm.$data.fname); // выводит Raj
Если есть компонент, то объект данных должен быть передан из функции, как это показано в следующем коде:
<html>
<head>
<title>VueJsIntroduction</title>
<script type="text/javascript"src="js/vue.js"></script>
</head>
<body>
<script type="text/javascript">
var _obj={fname:"Raj",lname:"Singh"};
// прямое создание экземпляра
var vm=new Vue({
data:_obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
// нужно использовать функцию, когда помещено в 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 – Тип для props – это массив строк или объекта. Он принимает синтаксис, основанный на массиве или объекте. Они считаются атрибутами, которые принимают данные от родительного компонента.
Пример 1:
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
Пример 2:
Vue.component('props-demo-advanced',{
props:{
// только проверка типа
height:Number,
// проверка типа плюс дополнительная валидация
age:{
type:Number,
default:0,
required:true,
validator:function(value){
return value>=0
}
}
}
})
propsData – используется для поэлементного тестирования. Type – массив строки. Например, { [key: string]: any }. Должен быть передан во время создания экземпляра Vue. Пример
var Comp=Vue.extend({
props:['msg'],
template:'<div>{{ msg }}</div>'
})
var vm=new Comp({
propsData:{
msg:'hello'
}
})
Computed − Тип: { [key: string]: Функция | { get: Function, set: Function } }
Пример:
<html>
<head>
<title>VueJsIntroduction</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, просто нужна функция
aSum:function(){
return this.a+2;
},
// и get, и 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>VueJsIntroduction</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. Давайте вызовем метод, используя объект Vue vm.asquare (), значение свойства a обновляется в функции asquare. Значение a изменяется от 1 до 25, то же самое отображается в консоли браузера.
Источник: https://www.tutorialspoint.com/
Редакция: Команда webformyself.
В Unity используется производительный язык программирования C#. Благодаря C# и Mono – кроссплатформенной реализации .NET,…
