vue.js 코어의 가장 기본적인 기능은 무엇인가요?

vue.js 코어의 가장 기본적인 기능은 간결한 템플릿 구문을 사용하여 DOM으로 데이터를 선언적으로 렌더링할 수 있는 시스템입니다. vue.js의 핵심 기능을 사용하면 요소 표시 여부를 쉽게 제어할 수 있습니다.

이 기사의 운영 환경: windows10 시스템, vue 2.5.2, thinkpad t480 컴퓨터.

Vue.js의 핵심은 간결한 템플릿 구문을 사용하여 DOM으로 데이터를 선언적으로 렌더링할 수 있는 시스템입니다.

아래에서 자세히 살펴보겠습니다.

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

텍스트 보간 외에도 다음과 같이 요소 속성을 바인딩할 수도 있습니다.

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

요소 표시 여부를 제어하는 ​​것도 매우 간단합니다.

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

각각 특별한 기능을 가진 다른 명령이 많이 있습니다. 예를 들어, v-for 지시문은 배열의 데이터를 바인딩하여 항목 목록을 렌더링할 수 있습니다.

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

사용자가 애플리케이션과 상호 작용할 수 있도록 하려면 v-on 지시문을 사용하여 이벤트 리스너를 추가하고 호출할 수 있습니다.

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

에 정의된 Vue 인스턴스 메소드에서 Vue는 양식 입력과 애플리케이션 상태 간의 양방향 바인딩을 쉽게 달성할 수 있는 v-model 지시문도 제공합니다.

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다. 이는 작고 독립적이며 재사용이 가능한 컴포넌트를 사용하여 대규모 애플리케이션을 구축할 수 있게 해주는 추상화이기 때문입니다. 주의 깊게 생각해 보면 거의 모든 유형의 애플리케이션 인터페이스가 컴포넌트 트리로 추상화될 수 있습니다.

Vue에서 컴포넌트는 본질적으로 사전 정의된 옵션이 있는 Vue 인스턴스입니다. Vue에 컴포넌트를 등록하는 것은 쉽습니다:

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: &#39;<li>这是个待办项</li>&#39;
})

이제 이를 사용하여 다른 컴포넌트 템플릿을 만들 수 있습니다:

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

하지만 이는 모든 할일 항목에 대해 동일한 텍스트를 렌더링하므로 멋져 보이지 않습니다. 상위 범위에서 하위 구성 요소로 데이터를 전달할 수 있어야 합니다. prop을 허용하도록 구성 요소 정의를 수정해 보겠습니다.

Vue.component('todo-item', {
 // todo-item 组件现在接受一个
 // "prop"，类似于一个自定义特性。
 // 这个 prop 名为 todo。
 props: ['todo'],
 template: &#39;<li>{{ todo.text }}</li>&#39;
})

이제 v-bind 지시문을 사용하여 할 일 항목을 루프 출력의 각 구성 요소에 전달할 수 있습니다.

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item v-for="item in groceryList" v-bind:todo="item" ></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: &#39;<li>{{ todo.text }}</li>&#39;
})

var app7 = new Vue({
  el: &#39;#app-7&#39;,
  data: {
    groceryList: [
      { id: 0, text: &#39;蔬菜&#39; },
      { id: 1, text: &#39;奶酪&#39; },
      { id: 2, text: &#39;随便其它什么人吃的东西&#39; }
    ]
  }
})

학습 권장 사항: php 교육

위 내용은 vue.js 코어의 가장 기본적인 기능은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!