Do you know vue? Where did you first hear about this framework? It was only after I met Laravel that I became interested in such a framework! No way, in the development I have been trying to mix the mode of development, well probably if you also like this development you also feel very tired. Don’t talk nonsense, let’s first learn a preliminary, later I try to stick to a week to write a technical article to share. Ps: I’m not a big tech guy either. I’ve been in and out of tech circles for two years. Do not become what formidable character, only can do not forget the original purpose. If there are mistakes in writing articles, or misunderstanding, welcome to correct communication!

What is a vue?

Vue (pronounced vju/curliest, similar to View) is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library only focuses on the view layer.

What do YOU need to get started?

The easiest way to do this is through CDN like JQ. So you can follow this article to have fun.

Corresponding to :CDN address

<! Version, development environment, contains with the help of the command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > <! - production version, optimized the size and speed -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue" > < / script >Copy the code

// In the course of our study, don’t worry, you’d better try the first CND link address so that you can get the fastest contact in the shortest time

Below: We will briefly explain some of the basic applications and features of VUE

Declarative rendering

<! <div id="app"> {{message}} </div> <script> var app = new vue ({// element binding El :"#app", data:{message:" this is a demo message "}}); </script>Copy the code

Look right! In fact, the simplest application of vUE framework is such, just according to the official provided by the instantiation function, just need to locate the corresponding element tag, and the specified data binding. Instantly display what you need. I also rarely go to screenshots for you to run the results. As a student you begin to type again, or directly CV good!

# With text interpolation, we can also bind element features like this

<! <span v-bind:title="message"> </span> </div> <script> var app2=new Vue({el:"#app2", data:{message:" page loaded "+new Date().tolocaleString ()}}); </script>Copy the code

The above example actually shows that v-bind binds the title element of the SPAN tag. Similarly, if you need to bind different tags then you can extend this example.

Conditions and cycles

A lot of times when we’re rendering a page, we’re going to use judgments to control whether an element is displayed or not, or whether there’s a list table that you need to render. Then we need to use conditional statements or loop statements in the VUE framework.

# With the V-if command we can display an element or not

</p> </div> var app3 = new vue ({el:"#app3", data:{ seen:true, } }); </script>Copy the code

The logic is pretty simple, just checking whether the corresponding value is true or false controlled by the V-if element. Control display, true for display, false for hiding!

The # V-for directive can bind an array of data to render a list of items:

<div id="app4"> <ul> <li v-for="todo in todos"> {{todo.id}} | {{ todo.text }} </li> </ul> </div> <script> var app4= new Todos :[{id:"1", text:" this is the first line ",}, {id:"2", text:" this is the second line ",}, {id:"2", text:" this is the second line ",}, {id:"3", text:" 3",}]}}); </script>Copy the code

Todos is a list of data that needs to be looping, and then v-for to render the data. For specific examples, refer to the code I give you

Processing user input

Well, the concept is that the user input data can be processed through vUE. A simple example is to reverse user input by clicking events

The following code binds a click event to the button by adding an event listener

<! -- Processing user input --> <! To allow users to interact with your application, we can use the V-ON directive to add an event listener that calls the methods defined in the Vue instance: -- > < div id = "app5" > < p > {{message}} < / p > < button v - on: click = "rm" > message inversion < / button > < / div > < script > var app5 = new Vue ({ El :"#app5", data:{message:" this is the message to be reversed ",}, {rm:function () {// Messag this.message=this.message.split(" ").reverse().join(" "); }}}); </script>Copy the code

As with example code, methods call back to triggered functions. Go ahead and do whatever you want in the function! jsust do it!

# Two-way binding V-Model

What is bidirectional binding? This is a two-way binding between form input and application state, where changes in one change in the other!

<! -- Bidirectional binding --> <! -- V-model instruction, It can easily implement bidirectional binding between form input and application state --> <div id="app6"> <p>{{message}}</p> <input V-model ="message"> </div> <script> var app6=new Vue ({el: "# app6", data: {message: "this is the demo data two-way binding"}})}); </script>Copy the code

Well, a simple example of bidirectional binding code is just like this. If you can’t understand it, run it again. You’ll find that some things are meant to be spoken about

Componentized application building

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

Vue.component('todo-item',{// "prop", similar to a custom feature. props:['todo'], template:'<li></li>' }); </script>Copy the code

Vue.component_props: functions for customisingfunctions of different components template: functions for component_props: functions for customisingfunctions of different components

Let's look at a complete component example. <! Componentized build --> <! Component systems are another important concept for Vue because it is an abstraction that allows us to build large applications from small, independent, and often reusable components. If you think about it, almost any type of application interface can be abstracted as a component tree: --> <div id="app7"> <! -- Now we provide todo objects for each Todo-Item. Todo objects are variables, i.e. their contents can be dynamic. We also need to provide a "key" for each component, more on that later. --> <ol> <! --> <todo-item v-for="item in list" V-bind :todo="item" v-bind:key="item.id"> </todo-item> </ol> Vue.component('todo-item',{// "prop", similar to a custom feature. props:['todo'], template:'<li>{{todo.text}}</li>' }); Var app7 = new Vue ({el: "# app7", data: {list: [{id: 1, the text: "apple"}, {id: 2, the text: "snow pear"}, {id: 3, the text: 'watermelon'}]},}) < / script >Copy the code

This is a simple component module. Now you may be wondering, what is the use of vue component modules? Let’s take a look at the official response:

In a large application, it is necessary to divide the entire application into components to make development more manageable. In fact, in simple terms, just like in the modular development, for some common modules, if we want to reuse, we will encapsulate, and introduce calls in other places that need to be used. It also allows logical changes between modules to be unaffected.

conclusion

In fact, the basic understanding of VUE, we have just been roughly understood. Probably in the next article we will briefly cover the installation and trial of vue, after all, knowledge is needed to develop specific components and applications.