Home >Web Front-end >HTML Tutorial >How to use VUE on the front end

How to use VUE on the front end

php中世界最好的语言Original: 2017-11-27 09:32:009828browse

I have been using VUE for projects for some time. I am quite familiar with VUE now, but I have never written an introductory article about VUE. So today I will bring you a few cases to give you a good introduction to VUE. Such a useful little tool.

Related video tutorial recommendations: Vue.js Tutorial recommendations: The latest 5 vue.js video tutorial selections in 2018

1. This The vue version used in this article is 2.4.2, which may be different from the new version, so everyone should pay attention.

2. Now I also assume that you have basic knowledge of html, css, javascript, and have already read the basic introduction on the official website, and have a general understanding of vue. Learned about the commonly used vue instructions (v-model, v-show, v-if, v-for, v-on, v-bind, etc.)! If you are new to the front-end, you may be confused when reading the article. It is recommended to learn the basics first and then read it after mastering the basic knowledge!

3. For the following example, I suggest you do it while reading the article! This way your thinking will be very clear and less confusing! You won’t feel that the article is too long (the reason why the article is long is to let everyone read more information, and a lot of repeated codes are posted. These codes, html, css, etc. can be completely skipped). If you only read the article, you may not finish it, because the article is more detailed and longer!

4. These examples are taken from my own daily practice projects, and the code has been mentioned on github (vue-demos). Welcome everyone to star. !

2. What is vue

Vue is a very popular front-end MVVM framework. It is built with data-driven and componentized ideas. It is also known as the three major front-end frameworks along with angular and react. Compared with Angular and React, Vue is lighter, more performant, and easier to use. You can also move on and take a look at the introduction of vue and the official website introduction of core functions. The simple and rough understanding is: when developing with vue, you just operate the data, and then vue will process it and use the data to drive the change of the DOM (I don’t know if I understand it wrong, please give me some advice if you do).

The following is the simplest explanation example

The code is as follows

html
<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
js
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue!&#39;
  }
})

I believe it is not difficult to understand, that is, the input is bound to the message value, and then when the input is modified , the message has been changed. Due to the two-way binding, the html ({{ message }}) of the page has been modified at the same time!

Okay, let’s learn from examples!

3. Tab

Principle Analysis and Implementation

This is very simple, it is nothing more than a click to switch the display. But everyone must also realize it. If you understand this, look at the next two! This example should just be a warm-up and familiarization effect!

This step only has one step, and the principle is the same. I comment directly in the code. After reading the comments, everyone will understand!

Complete code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{
        font-family:"Microsoft YaHei";
    }
    #tab{
        width: 600px;
        margin: 0 auto;
    }
    .tab-tit{
        font-size: 0;
        width: 600px;
    }
    .tab-tit a{
        display: inline-block;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        width: 25%;
        text-align: center;
        background: #ccc;
        color: #333;
        text-decoration: none;
    }
    .tab-tit .cur{
        background: #09f;
        color: #fff;
    }
    .tab-con div{
        border: 1px solid #ccc;
        height: 400px;
        padding-top: 20px;
    }
</style>
<body>
<div id="tab">
    <div>
        <!--点击设置curId的值  如果curId等于0，第一个a添加cur类名，如果curId等于1，第二个a添加cur类名，以此类推。添加了cur类名，a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式-->
        <a href="javascript:;" @click="curId=0" :class="{&#39;cur&#39;:curId===0}">html</a>
        <a href="javascript:;" @click="curId=1" :class="{&#39;cur&#39;:curId===1}">css</a>
        <a href="javascript:;" @click="curId=2" :class="{&#39;cur&#39;:curId===2}">javascript</a>
        <a href="javascript:;" @click="curId=3" :class="{&#39;cur&#39;:curId===3}">vue</a>
    </div>
    <div>
        <!--根据curId的值显示div,如果curId等于0，第一个div显示，其它三个div不显示。如果curId等于1，第二个div显示，其它三个div不显示。以此类推-->
        <div v-show="curId===0">
            html<br/>
        </div>
        <div v-show="curId===1">
            css
        </div>
        <div v-show="curId===2">
            javascript
        </div>
        <div v-show="curId===3">
            vue
        </div>
    </div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: &#39;#tab&#39;,
        data: {
            curId: 0
        },
        computed: {},
        methods: {},
        mounted: function () {
        }
    })
</script>
</html>

That’s about it for how to use VUE. Through this case, I believe you also have some understanding of vue. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

How to use VUE on the front end

Related articles