Shulou(Shulou.com)06/03 Report--

This article to share with you is about the front-end framework vue how to get started, Xiaobian feel quite practical, so share to everyone to learn, I hope you can read this article after some harvest, not much to say, follow Xiaobian to see it.

Vue is a very popular front-end MVVM framework, which is built with data-driven and component-based ideas, and is called the three front-end frameworks along with angular and react. Compared to angular and react, vue is lighter, high-performance, and easy to use. You can also move to vue official website to see its introduction and core function introduction. Simple and crude understanding is: when developing with vue, it is to manipulate data, and then vue will handle it, and change DOM with data drive. With vue, we can focus on how to process the data, and when the data changes, the page display will change. Compared with jquery, which operates DOM elements, it can effectively improve development efficiency, and personally feel that it has nearly two or three times the improvement.

I. Installation

We can install vue either by npm or by introducing script tags directly. For convenience of explanation, we only need to introduce tags into html pages in the second way. Personal test developers can use bootcdn resources.

II. Core Ideas

"Data binding" is the core idea of vue. Here, I give an example of hello world to illustrate this idea.

HTML code

{{ message }}

JavaScript code

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

page effect

我们在html代码里面设置了一个id为"app"的div，然后在javascript里面实例化了一个属性el为"#app"的vue对象，表示这个vue对象用来处理该div的显示。

接着在vue对象的data属性里面设置了一个message字段，把这个字段和页面的p元素和input元素双向绑定起来。

这样只要message字段改变，p元素的内容就会改变。只要input的输入内容改变，message字段就会改变，从而导致p元素的内容改变。所以我们改变页面中输入框的值，p元素里面的内容也随之改变。

三、vue实例基本组成

new Vue({ el: '#app', data: { message: 'Hello Vue!', url: 'www.salasolo.com' }, methods:{ showMsg: function(){ alert(this.message) }, jumpUrl: function(){ location.href = this.url } },})

可以看到，一个vue实例有三个基本的属性，el属性用来指定绑定的页面容器，data属性里面存放页面展示的数据，methods放置页面调用的一些方法。

四、数据绑定

使用下面的语法可以将页面元素的内容和vue实例的data属性里面的字段绑定起来。

1.文本

消息: {{ message }}

2.原始html

3.列表

{{item}}

4.条件

我是人类我不是人类

5.属性

这是一个链接

6. expression

1+1=: {{ 1+1 }}

V. Event binding

Use the following syntax to bind interaction events of page elements to methods in the methods attribute of vue instances.

1. click event

Click to invoke showMsg method

2. selection event

Option 1 Option 2

VI. Comprehensive examples

HTML code

product list Product Name Product Picture Product Quantity Operation {{item.name}}

{{item.quantity}} 删除此商品

javascript代码

new Vue({ el: '#app', data: { list:[] }, created:function(){ this.loadProductList(); }, methods:{ loadProductList:function(){ $.post('/product/apiGetList',function(data){ this.list = data.data.list; }); }, deleteProduct:function(index){ var _this = this; $.post('/product/apiDelete',{productId:_this.list[index]['productId']},function(){ alert('删除成功'); }); } },})

上面这段代码表示，在页面初始化时，通过ajax请求后端服务器得到商品列表数据赋值给vue实例数据的list字段，然后在页面中使用vue模版语法循环渲染出来，并给每个商品绑定了一个删除按钮点击事件，点击后调用vue实例的deleteProduct执行商品删除操作。

以上就是前端框架vue该怎么入门，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.