What is the most basic function of vue.js core

The most basic function of vue.js core is a system that allows declarative rendering of data into the DOM using concise template syntax. The core function of vue.js allows us to easily control whether an element is displayed or not.

The operating environment of this article: windows10 system, vue 2.5.2, thinkpad t480 computer.

At its core, Vue.js is a system that allows declarative rendering of data into the DOM using concise template syntax.

Let’s take a closer look.

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

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

In addition to text interpolation, we can also bind element properties like this:

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

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

It is also quite simple to control whether an element is displayed or not:

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

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

There are many others directives, each with a special function. For example, the v-for directive can bind array data to render a list of items:

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

In order for users to interact with your application, we can use the v-on directive to add an event listener through which Call the method defined in the Vue instance:

<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 also provides the v-model directive, which can easily achieve two-way binding between form input and application state.

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

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

The component system is another important concept of Vue, as it is an abstraction that allows us to build large applications using small, independent and often reusable components. If you think about it carefully, almost any type of application interface can be abstracted into a component tree:

In Vue, a component is essentially a Vue with predefined options Example. Registering a component in Vue is simple:

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

Now you can use it to build another component template:

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

But this will render the same text for each to-do item, which looks like Not cool. We should be able to pass data from the parent scope to the child component. Let's modify the component definition to accept a prop:

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

Now we can use the v-bind directive to pass the to-do items to each component of the loop output:

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

Learning recommendation: php training

The above is the detailed content of What is the most basic function of vue.js core. For more information, please follow other related articles on the PHP Chinese website!