Why use Vuejs

Vue.js is a JS library that is simple to use and easy to use. It can implement responsive data binding and combined view components

Vue.js is actually a JavaScript UI Library, it is a progressive framework for building data-driven web interfaces. The goal is to use APIs to implement responsive data binding and combined view components as simply as possible. In the following article, I will introduce in detail why to use Vue. .js

【Recommended course: Vue.js】

Reason for using vue.js

vue.js is easy to get started, simple and has many tools including API, performance, etc. It only requires one script to experience it Wonderful

The entry point of every Vue application is created through an instance. That instance will then configure the rest of the application and get the child members as the application expands

Example:

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
  <p>{{ message }}</p>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;这是我的第一个Vue.js文件!&#39;
  }
})
</script>

Rendering

Configure the instance by passing in an object that contains information about the application and where it should be loaded.

el attribute: Specifies which element it should be installed on, and the value is the set ID element.

data attribute: To be bound to the specified data in the view data, this attribute has an object with a value accessible through the template.

Note: The div app with ID is where we install the application

Use double curly braces to bind data to the template, and use message to specify it in the data object during binding configuration value.

Data Binding

Conditions

A very useful feature in JS frameworks is the ability to Bind data to views before making decisions. We can tell Vue to only bind if the value resolves to true

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
  <h2 v-if="demo1">为true时显示demo1</h2>
  <h2 v-else="demo2">为true时显示demo2</h2>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data:{
   demo1:true
  }
})
</script>

Loop

It can provide us with a simple API to loop through a set of bound data. The v-for directive uses it for this purpose. We only need an array of data:

Need to use the form of site in sites Special syntax, sites is the source data array and site is an alias for the array element iteration

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
  <ul>
  	<li v-for="site in sites">{{site.name}}</li>
  </ul>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data:{
   sites:[
{name:&#39;张三&#39;},
{name:&#39;李四&#39;},
{name:&#39;王五&#39;}
   ]
  }
})
</script>

Two-way binding

Two-way binding in Vue is very simple, and only one instruction is needed to implement v-model. Let’s implement two-way binding by attaching the v-model directive to the text input and displaying the data at the same time to see the value in the input box

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
 <p>
 	<input type="text" v-model="mentor">{{mentor}}
 </p>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data:{
  message:&#39;这是双向绑定&#39;,
  mentor:&#39;&#39;,
  mentors:[]
  }
})
</script>

Summary: That’s it This is the entire content of this article, I hope it will be helpful to everyone’s study.

The above is the detailed content of Why use Vuejs. For more information, please follow other related articles on the PHP Chinese website!