VueJS-インスタンス

VueJSを開始するには、 root Vue Instance と呼ばれるVueのインスタンスを作成する必要があります。

構文

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 *です。これは、lに存在する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コンストラクターに渡す必要があります。

Vueに渡されるオプションを見てみましょう。

＃data *-このタイプのデータはオブジェクトまたは関数です。 Vueは、プロパティをgetter/setterに変換して、リアクティブにします。

オプションでデータがどのように渡されるかを見てみましょう。

例

<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);

以下は、ブラウザに表示される詳細です。

コンソール

小道具-小道具のタイプは、文字列またはオブジェクトの配列です。配列ベースまたはオブジェクトベースの構文を取ります。これらは、親コンポーネントからのデータを受け入れるために使用される属性と言われています。

例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* -これは単体テストに使用されます。

タイプ-文字列の配列。たとえば、\ {[key：string]：any}。 Vueインスタンスの作成中に渡す必要があります。

例

var Comp = Vue.extend({
   props: ['msg'],
   template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
   propsData: {
      msg: 'hello'
   }
})

計算-タイプ：\ {[key：string]：Function | \ {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 の2つの関数があります。

関数aSumは this.a + 2 を返すだけです。関数aSquareの2つの関数 get および set 。

変数vmはVueのインスタンスであり、aSquareおよびaSumを呼び出します。また、vm.aSquare = 3はaSquareからset関数を呼び出し、vm.aSquareはget関数を呼び出します。次のスクリーンショットのようなブラウザで出力を確認できます。

Vueのインスタンス

メソッド-次のコードに示すように、メソッドは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に変更され、同じことが次のブラウザーコンソールに反映されます。

asquare関数

Vuejs-instances

VueJS-インスタンス

構文

vue_instance.js

出力

例

出力

例1

例2

例

例

目次