Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to realize the non-engineering of iViewUI Framework in Vue.js

2025-01-26 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

It is believed that many inexperienced people are at a loss about how to realize the non-engineering of iViewUI framework in Vue.js. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

To quickly experience the MVVM pattern, I chose a non-engineering approach to get started, and chose to use Vue.js and the iView UI framework built on it.

I. MVVM mode

The remarkable feature of Vue.js is that it decouples the view and the data, that is to say, the change of the view no longer needs imperative programming to change explicitly, as long as the data is modified, it can be synchronized automatically immediately, which is a big change in the mode of thinking, and the other is that component thinking can be found everywhere, so developing an application is equivalent to building blocks.

In fact, the advantages described above for Vue.js are also a portrayal of MVVM mode, which was originally derived from MVC, that is, when the view layer changes, it will be automatically updated to the view model, and vice versa. This is often referred to as bi-directional binding. Let's take the previous picture:

Whether the diagram is easy to understand or not, generally speaking, the MVVM mode splits the view and the data, so that we only have to care about the data itself when we develop, and then the view DOM aspect will be solved automatically by Vue.js.

II. Non-engineering start

In order to support a basic application, the following necessary documents need to be introduced:

Vue.min.2.5.3.js,vue.js library

Iview.2.7.0.css,iView style Fil

Iview.min.2.7.0.js,iView library

Iview / locale/zh-CN.js language pack

Iview / font font package

Download Vue.js

Go to the Vue project on Github and download the Zip source code directly:

You can find the vue.js file in the dist directory:

Just choose a version according to different circumstances, and step 1 is done.

Download iView series files

You can find this link at the beginning of the components / installation page of the iView official website: https://unpkg.com/iview/**, through which you can see the dist** directory:

The necessary files are all here, and they can't be packaged and downloaded. My stupid approach is to click on them one by one and then copy the contents.

There is another way to obtain iView-related js and css. Take a closer look at the CDN addresses given on the official website as follows:

Http://unpkg.com/iview/dist/iview.min.js

Http://unpkg.com/iview/dist/styles/iview.css

I tried to access them in a browser:

There was a change in the address, but it didn't matter.

At this point, put each file in the desired location:

The arrangement of the documents in the picture is not very strict, everyone can do it according to their own habits.

III. Case drills

After completing the above preparations, you can formally develop with iView UI, and then demonstrate the basic operation of the shopping cart based on the table table component.

Introduction of resources

With the preparation of the initial work, you can introduce these resources one by one in the new page.

HTML head part

Shopping cart instance iview.lang ('zh-CN')

Quote in the usual way, style comes first, followed by vue.js and iView.js, and iView Chinese language pack zh-CN.js, and then immediately call the lang method to make it take effect.

Bind data

First of all, bind the data to take a look at the overall effect, regardless of the other behavior operations:

HTML body part

The two core attributes of the component i-table are columns and data,columns are column definitions, and data is data.

Both attributes add a colon (:) syntax sugar, which refers to the v-bind instruction, indicating that the value of this property is dynamically bound, so that when data is found to change during operation, the table view will change quickly.

IViewUI_cart.js script part

Var cart = new Vue ({el:'# app', data: function () {return {cartList: [{id: 1, name: 'iPhone X', price: 8300.05, count: 1}, {id: 2, name:' MacBook Pro', price: 18800.75, count: 3}, {id: 3, name: 'Mate 10 Porsche', price: 16600.00, count: 8}], columns: [{title:' name' Key: 'name'}, {title:' unit price', key: 'price'}, {title:' quantity', key: 'count'}]}}, methods: {}})

The file is the business script corresponding to the page. The whole file is responsible for new a Vue instance and assigns it to the variable cart. The data you can see contains two attributes, namely, the cartList representing the data source and the columns of the column definition, which are mapped to the core attributes of the above i-table.

Again, it is worth noting that data, whose value needs to be written in the form of an anonymous function, namely:

Function () {return {}}

In this way, the Render function body that appears in its columns can normally access the methods defined in methods through this. Of course, this demo is accessed through the cart object, so it is not affected by this.

After running the page, the data can be bound successfully.

Add button required for operation

Once the data is presented, you can add the necessary buttons:

This step is simple, just modify the columns property, append an "action" column, and add three buttons:

{title: 'quantity', key: 'count'}, {title:' operation', render: (h, params) = > {return h ('Button', {props: {type:' primary', size: 'small'}, style: {marginRight:' 5px'}, on: {click: () = > {console.info ('reduce quantity'); cart.reduceQuantity (params.row.id) },'-'), h ('Button', {props: {type:' primary', size: 'small'}, style: {marginRight:' 5px'}, on: {click: () = > {console.info ('increase quantity'); cart.increaseQuantity (params.row.id) },'+'), h ('Button', {props: {type:' error', size: 'small'}, style: {marginRight:' 5px'}, on: {click: () = > {console.info ('delete current item'); cart.deleteItem (params.row.id);}, 'delete')];}

The Render function is used here, and the internal mechanism of this function is slightly more complex, so as a preliminary demonstration, you only need to follow the example.

When it comes to the Render function, you also need to emphasize the internal call to the method defined in methods. If you try to call a method through this (such as reduceQuantity), then the value of data in the Vue instance needs to be expressed in an anonymous function; on the contrary, if it is called through the Vue instance cart, there is no worry, that is, the value of data can be expressed in the usual object curly braces ({}).

Add the methods required for the operation

The action button has been successfully added, so you need a corresponding method to execute. In Vue.js, the methods are defined in the methods property.

Subtract the quantity

First, let's take a look at the definition of "subtract quantity":

Methods: {reduceQuantity: function (id) {for (let I = 0; I)

< this.cartList.length; i++) { if (this.cartList[i].id === id) { this.cartList[i].count--; break; } } }} 通过遍历找到目标记录,并将其 count 属性减一,如同 MVVM 的定义,当数据变更的时候,视图也跟随着变化。 但凡是存在于购物车内的商品,其数量至少应该为 1,为防止减到 0,不妨再加一个判断使其逻辑更为完美: methods: { reduceQuantity: function (id) { for (let i = 0; i < this.cartList.length; i++) { if (this.cartList[i].id === id) { if (this.cartList[i].count >

1) {this.cartList [I] .count -;} break;}}

Increase the quantity

Methods: {increaseQuantity: function (id) {for (let I = 0; I)

< this.cartList.length; i++) { if (this.cartList[i].id === id) { this.cartList[i].count++; break; } } }} 只需要针对 count 属性做 +1 操作即可。 删除 deleteItem: function (id) { for (let i = 0; i < this.cartList.length; i++) { if (this.cartList[i].id === id) { // 询问是否删除 this.$Modal.confirm({ title: '提示', content: '确定要删除吗?', onOk: () =>

{this.cartList.splice (I, 1);}, onCancel: () = > {/ / do nothing}});}

In the delete logic, when traversing the target record, the user is asked whether he really wants to delete the current record. Here, the $Modal dialog box is used. If the user clicks OK, then the actual deletion is performed to see the effect:

Very beautiful and elegant iView Modal dialog box, pleasing to the eye, fell in love at first sight.

After reading the above, have you mastered how to realize the non-engineering of the iViewUI framework in Vue.js? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.

Views: 285

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report