Was sind die grundlegendsten Funktionen des vue.js-Kerns?

Die grundlegendste Funktion des vue.js-Kerns ist ein System, das die deklarative Darstellung von Daten im DOM mithilfe einer prägnanten Vorlagensyntax ermöglicht. Die Kernfunktion von vue.js ermöglicht es uns, einfach zu steuern, ob ein Element angezeigt wird oder nicht.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue 2.5.2, Thinkpad T480-Computer.

Im Kern ist Vue.js ein System, das die deklarative Darstellung von Daten im DOM mithilfe einer prägnanten Vorlagensyntax ermöglicht.

Lassen Sie uns unten einen genaueren Blick darauf werfen.

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

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

Zusätzlich zur Textinterpolation können wir auch Elementeigenschaften wie diesen binden:

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

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

Es ist auch ganz einfach zu steuern, ob ein Element angezeigt wird oder nicht:

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

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

Es gibt viele andere Befehle, jeder mit speziellen Funktionen. Beispielsweise kann die v-for-Direktive die Daten eines Arrays binden, um eine Liste von Elementen darzustellen:

<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: '整个牛项目' }
    ]
  }
})

Um Benutzern die Interaktion mit Ihrer Anwendung zu ermöglichen, können wir die v-on-Direktive verwenden, um einen Ereignis-Listener hinzuzufügen und ihn aufzurufen auf der Vue-Instanz Methoden definiert in:

<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 stellt auch die V-Model-Direktive bereit, mit der problemlos eine bidirektionale Bindung zwischen Formulareingabe und Anwendungsstatus erreicht werden kann.

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

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

Das Komponentensystem ist ein weiteres wichtiges Konzept von Vue, da es eine Abstraktion ist, die es uns ermöglicht, große Anwendungen mit kleinen, unabhängigen und oft wiederverwendbaren Komponenten zu erstellen. Wenn man genau darüber nachdenkt, kann fast jede Art von Anwendungsschnittstelle in einen Komponentenbaum abstrahiert werden:

In Vue ist eine Komponente im Wesentlichen eine Vue-Instanz mit vordefinierten Optionen. Das Registrieren einer Komponente in Vue ist einfach:

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

Jetzt können Sie damit eine weitere Komponentenvorlage erstellen:

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

Aber dadurch wird für jedes Aufgabenelement derselbe Text gerendert, was nicht cool aussieht. Wir sollten in der Lage sein, Daten vom übergeordneten Bereich an die untergeordnete Komponente zu übergeben. Ändern wir die Komponentendefinition, um eine Requisite zu akzeptieren:

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

Jetzt können wir die v-bind-Direktive verwenden, um die Aufgabenelemente an jede Komponente der Schleifenausgabe zu übergeben:

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

Lernempfehlungen: php-Training

Das obige ist der detaillierte Inhalt vonWas sind die grundlegendsten Funktionen des vue.js-Kerns?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!