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要素のIDを取ります。上記の例では、IDがあります#vue_det。これは、.htmlに存在するdiv要素のIDです。
<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に置き換えられます。姓についても同じことが言えます。
次に、関数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); // Rajを出力します
console.log(vm.$data); 上記のようにオブジェクト全体を印刷します
console.log(vm.$data.fname); // Rajを出力します
コンポーネントがある場合は、次のコードに示すように、データオブジェクトを関数から参照する必要があります。
<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−文字列の配列。たとえば、{[key：string]：any}。Vueインスタンスの作成中に渡す必要があります。
例
var Comp = Vue.extend({
props: ['msg'],
template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})Computed−タイプ：{[キー：文字列]：関数| {get：関数、set：関数}}
例
<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には2つの機能があります aSum そして aSquare。
関数aSumはただ返す this.a+2。関数aSquare再び2つの関数get そして set。
変数vmはVueのインスタンスであり、aSquareとaSumを呼び出します。また、vm.aSquare = 3はaSquareからset関数を呼び出し、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コンストラクターの一部です。Vueオブジェクトを使用してメソッドを呼び出しましょうvm.asquare ()、プロパティの値 a で更新されます asquare関数。aの値が1から25に変更され、同じことが次のブラウザコンソールに反映されていることがわかります。
