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를 사용합니다. 위의 예에서 우리는#vue_det. .html에있는 div 요소의 ID입니다.

<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는 속성을 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);

다음은 브라우저에 표시되는 세부 정보입니다.

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 : 함수, 설정 : 함수}}

예

<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.

Variable 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로 변경되고 다음 브라우저 콘솔에 동일한 내용이 반영됩니다.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved