Vue总结（一）

Posted on In

:class 绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
    <h1 :class="['italic', 'red', {'active': flag}]">Test H1 Message</h1>
    <h1 :class="classObj">Test H1 Message</h1>
</div>
<script>
var vm = new Vue({
  el: "#app",
  data: {
    flag: true,
    classObj: { red: true, thin: true, italic: true, active: false },
  },
})
</script>

:style 绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
    <h1 :style="[styleObj, styleObj2]">This is H1</h1>
</div>
<script>
var vm = new Vue({
  el: "#app",
  data: {
    styleObj: {
      color: "red",
      "font-weight": "280",
    },
    styleObj2: {
      "font-style": "italic",
    },
  },
})
</script>

preventDefault

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="app">
    <div class="inner" @click="divHandler">
        <input type="button" value="click me" @click.stop="btnHandler">
    </div>

    <a href="http://github.io" @click.prevent="linkClick">link</a>
    <div class="inner" @click.capture="divHandler">
        <input type="button" value="click me" @click.stop="btnHandler">
    </div>
    <div class="inner" @click.self="divHandler">
        <input type="button" value="click me" @click.self="btnHandler">
    </div>

</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            divHandler() {
                console.log('inner div')
            },
            btnHandler() {
                console.log('btn click')
            },
            linkClick() {
                console.log('link click')
            }
        }
    })
</script>

v-cloak

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
[v-cloak] {
  display: none !important;
}
</style>
<div id="app" v-cloak>
    <p>{ { msg } }</p>
    <input type="text" v-model="msg">
</div>
<script>
var vm = new Vue({
  el: "#app",
  data: {
    msg: "ss",
  },
})
</script>

v-for

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div id="app">
    <p v-for="item in list">{ { item.id } } --- { { item.name } }</p>
    <p v-for="(value, key) in user">{ { key } } -- { { value } }</p>
</div>
<script>
var vm = new Vue({
  el: "#app",
  data: {
    list: [
      {
        id: 1,
        name: "name1",
      },
      {
        id: 2,
        name: "name2",
      },
      {
        id: 3,
        name: "name3",
      },
      {
        id: 4,
        name: "name4",
      },
    ],
    user: {
      id: 1,
      name: "Hello world",
      gender: "male",
    },
  },
})
</script>

eg:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<div id="app">
    <div>
        <label for="id">Id:
            <input type="text" v-model="id">
        </label>
        <label for="name">Name:
            <input type="text" v-model="name">
        </label>

        <input type="button" value="add" @click="add">
    </div>
    <p v-for="(item, index) in list" :key="item.id">
        <input type="checkbox" name="" id="">{ { item.id } } --- { { item.name } }
    </p>

</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            list: [{
                    id: 1,
                    name: '孔子'
                },
                {
                    id: 2,
                    name: '孟子'
                },
                {
                    id: 3,
                    name: '韩非子'
                },
            ]
        },
        methods: {
            add() {
                this.list.unshift({
                    id: this.id,
                    name: this.name
                })
            }
        }
    })
</script>

v-if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
    <input type="button" value="toggle" @click="flag = !flag">
    <h3 v-if="flag">V-IF</h3>
    <h3 v-show="flag">V-SHOW</h3>
</div>
<script>
var vm = new Vue({
  el: "#app",
  data: {
    flag: true,
  },
  methods: {},
})
</script>