Everyone knows that vue.js is made by The Chinese and is easy to use, so it must be supported

Vue usedMVVMDesign patterns

That is, the model is bound to the View and the Model changes, and the view’s contents change, and vice versa

Vue mainly has the following keywords

  1. V-model Binding model
  2. V-if determines whether to display the DOM
  3. V-show determines whether the dom’s display is set to None
  4. Display the DOM when v-else if or show is false
  5. V – for iteration
  6. V-bind Indicates the binding attribute
  7. V-on binding method

Let’s take a searchable information management system as an example


        
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>

    <body>
        <div id="app">
            <span>key</span>
            <! Search. Key -->
            <! Compare the contents with the data in each of the following columns
            <! -- The content changes, and each of the following columns is immediately compared -->
            <input type="text" v-model="search.key">
                <legend>
                    Create New Person
                </legend>
                <div class="form-group">
                    <label>Name:</label>
                    <! Newperson. name -->
                    <input type="text" v-model="newPerson.name"/>
                </div>
                <div class="form-group">
                    <label>Age:</label>
                    <! -- Bind model to newPerson.age -->
                    <input type="text" v-model="newPerson.age"/>
                </div>
                <div class="form-group">
                    <label>Sex:</label>
                    <! -- Bind model newperson. sex -->
                    <select v-model="newPerson.sex">
                    <option value="Male">Male</option>
                    <option value="Female">female</option>
                </select>
                </div>
                <div class="form-group">
                    <label></label>
                    <! -- @click is short for V-on :click -->
                    <button @click="createPerson">Create</button>
                </div>
        </fieldset>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Sex</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                <! $index = $index; $index = $index;
                <! -- v-show will not remove the DOM, but will change the display attribute to None -->
                <! Compare the content with the search box -->
                <tr v-for="person in people" v-if="person.name.indexOf(search.key)>=0||person.sex.indexOf(search.key)>=0||person.age==search.key">
                        <td >{{ person.name }}</td>
                        <! Bind v-bind v-bind v-bind v-bind v-bind v-bind
                        <! -- v-bind can also be followed by other attributes such as class, id -->
                        <td :style="person.age>30 ? 'color: red' : ' ' ">{{ person.age }}</td>
                        <! -- The v-else element must immediately follow the v-if or v-show element -- otherwise it cannot be recognized -->
                        <td v-if="person.sex =='Male'">male</td>
                        <td v-else>female</td>
                        <td class="text-center"><button @click="deletePerson($index)">Delete</button></td>
                </tr>
            </tbody>
        </table>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // Initialize Vue
        //el gets the binding tag, #app gets the DOM with id app,.app gets the DOM with class app
        // Data is the model
        / / the methods for the method
        var vm = new Vue({
            el: '#app',
            data: {
                search:{
                    key:""
                },
                newPerson: {
                    name: ' ',
                    age: 0,
                    sex: 'Male'
                },
                people: [{
                    name: 'Jack',
                    age: 30,
                    sex: 'Male'
                }, {
                    name: 'Bill',
                    age: 26,
                    sex: 'Male'
                }, {
                    name: 'Tracy',
                    age: 22,
                    sex: 'Female'
                }, {
                    name: 'Chris',
                    age: 36,
                    sex: 'Male'
                }]
            },
            methods:{
                createPerson: function(a){
                    this.people.push(this.newPerson);
                    // After adding the newPerson object, reset the newPerson object
                    this.newPerson = {name: ' ', age: 0, sex: 'Male'}
                },
                deletePerson: function(index){
                    // Delete an array element
                    this.people.splice(index,1); }}})</script>

</html>Copy the code

Without too much explanation, just look at the code and see what the Vue usage is

rendering





The effect





search

I’ve uploaded the codegithub