VueJS comprehensive analysis

What is Vue.js

Vue.js (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue adopts a bottom-up incremental development design. Vue's core library only focuses on the view layer, and is very easy to learn and integrate with other libraries or existing projects. Vue, on the other hand, is fully capable of driving complex single-page applications developed using single-file components and libraries supported by the Vue ecosystem.

The goal of Vue.js is to implement responsive data binding and composed view components through the simplest possible API.

If you are an experienced front-end developer and want to know the difference between Vue.js and other libraries/frameworks, check out the comparison with other frameworks.

1.VueJS Purpose:

The core purpose of VueJs is to solve:

a: Solve the problem of data binding,

b: The main purpose of the vue framework is to develop large single-page applications,

c: It also supports componentization, which means that the page can be encapsulated into several components and programmed using building blocks, so that the page reusability is maximized (componentization is supported).

2.VueJS Features:

I: MVVM mode (when the data variable (model) changes, the view (view) also changes, when the view (view) changes, the data variable (model) also changes)

Use MVVM mode There are several major benefits:

　　1. Low coupling. View can change and modify independently of the Model. A ViewModel can be bound to different Views. When the View changes, the Model can remain unchanged, and when the Model changes, the View can also remain unchanged.

　2. Reusability. You can put some view logic in ViewModel so that many Views can reuse this view logic.

　 3. Independent development. Developers can focus on the development of business logic and data (ViewModel). Designers can focus on the design of the interface (View).

　 4. Testability. You can test the interface (View) against ViewModel

II: Componentization

III Command system

IIII: vue2.0 starts to support virtual dom

vue1.0 operates real dom elements. Not virtual

Virtual DOM: It can improve the refresh speed of the page

Virtual DOM has advantages and disadvantages.

A: Size - One of them is that more features means more lines of code in the code package. Fortunately, Vue.js 2.0 is still relatively small (current version 21.4kb), and a lot of things are being removed.

B: Memory - Similarly, virtual DOM needs to copy the existing DOM and save it in memory. This is a trade-off between DOM update speed and memory usage.

C: Not applicable to all situations - it would be great if the virtual DOM could be modified in batches at once. But what about separate, infrequent updates? Any

DOM updates like this will cause meaningless precomputation of the virtual DOM.

V: Through variable model

VueJS expression:

Steps:

1 Quote

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

2. Declare a piece of HTML to be managed by the framework

<div id="myapp">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

3. Initialize vue and fill in vue parameters

I. Attributes: el declares the boundary expansion of vuejs management: ng-app is similar (this is in AngularJS)

II. Attributes: data data (status || attribute), an attribute that specifically stores some data , the data must be in object format

<script type="text/javascript">
var vm = new Vue({
el:"#myapp",
data:{hello:"hello word vue app!",
message:"wyx",
result:{name:&#39;xinxin&#39;,password:&#39;123&#39;}
}
});
</script>

4. Expression: display the data in our data on the page in the form of {{}},

For example:

data:{{message:'xxxxx '}} In

view: {{message}}

<div id="myapp">
<ul>
<li>{{hello}}</li>
<li>{{message}}</li>
<li>{{result.name}}</li>
</ul>
</div>

view: {{message}} The key is bound in the code and the value is displayed on the page

data. The core function is to store The data (model) displayed on the page (a mapping relationship is created between the obtained model and the content to be displayed on the page), that is to say, if we implement front-end and back-end interaction as long as we store the obtained data in data, the page will be It will be automatically bound, thus realizing the data flow from model------>view.

3.VueJS command:

Command: In fact, it means that vue defines custom attributes starting with v-. Each different attribute has its own meaning and function. Usage of

command: v- Instruction name = "Expression judgment or model attribute or event"

v-model:

Function: Receive some data input by the user, and directly mount the data into the data attribute

Syntax : v-model ="Attribute value" {Attribute value: text value}

Processing in data: It is best to define this attribute value in data, otherwise an error will be reported at the beginning

v-if:

Function: Load fixed content through judgment, load if true, delete element if false

Where to use: Used in permission management, page module conditional loading

Syntax: v-if=" Judgment expression "Used in the same way as if

Features: The insertion or deletion of control elements is not hidden

v-show:

The element will always be rendered and remain in the dom, and the security is not as high as v-if , because the usage of v-show is the same as v-if, except that v-show sets the element display to none instead of directly removing the element.

v-ifVS. v-show

一般来说，v-if有更高的切换消耗而
v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show较好，如果在运行时条件不大可能改变则使用v-if较好。

v-else

元素必须紧跟在v-if或v-show元素的后面——否则它不能被识别。

v-bind:

缩写：：

{{}}表达式绑定数据的时候，可以直接将数据显示在页面中（html）里面，

v-bind img src 属性，

作用：v-bind 给页面中html属性进行绑定

语法：v-bind：图片里面src属性=“data 中的图片地址”

如：

<img
v-bind:src="img" />
<div v-bind:style="styles">style</div>
data:{
img:"img/logo.png",
styles:{color:&#39;red&#39;,fontSize:&#39;30px&#39;}
}

   

缩写形式：

<img :src="img" />
<div :style="styles">style</div>

   

v-bind添加的style样式是添加在内联中的。

v-on：

缩写形式：v-on:click ---- >@click

@+事件

作用：对页面中的事件进行绑定 vue自定义了一套事件机制

angularjs中对pc端支持比较良好，对移动端支持一般，vue主要支持移动端，也支持pc端

事件开发中，事件 v-on: 绑定在页面（view）中，再vue实例里面，在methods中去监听

在页面中 我们做的行为： v-on:click="函数名称"

函数应该写在vue实例的methods属性里面

methods也要写成对象：

methods:{
clickBtn:function(){
}
}

   

例：f8901362721699ea6890ed926129bc8b点击65281c5ac262bf6d81768915a4a77ac0

methods:{
clickBtn:function(){
alert('触发了button绑定的事件');
}
}

   

在事件中传递值,事件中通过$event传递事件列表，在methods里面就可以直接获取事件列表里面的值

当一个行为所触发了一个事件，发生事件交互的时候所产生的一种结果(出现一个事件列表)

vue中的事件列表$event