Vue是一种渐进式框架,什么是渐进式框架

渐进式框架:即可以在项目中部分使用Vue,不必非要完全使用

Vue的MVVM

Vue是一种MVVM框架。(也有人说现在是一种MV*框架)

  • View:DOM
  • ViewModel:Vue(处理Vue和Model,Vue在这里起到了这样一个作用)
  • Model:Plan JavaScript,Objects

Vue的模板

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<div id="app">
    <h2>{{message}}</h2>
</div>

<script>
    const app = new Vue({
        el:'#app', // 控制的元素
        data:{
            message:'Hello Vuejs'
        } ,//含有的数据
        methods:{

        }, //含有的方法,后面还有一系列生命周期函数
    })
</script>

好了,进入正题

1. 列表展示和计数器案例

列表展示案例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
    <div id="app">
        <ul>
            <li v-for="movie in movies">{{movie}}</li>
        </ul>

    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                movies: ['海王', '蜘蛛侠', '蝙蝠侠', '肖申克的救赎']
            }
        })
    </script>

计数器案例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
        <h3>当前计数:{{counter}}</h3>
        <button v-on:click="add">加1</button>
        <button v-on:click="sub">减1</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                counter: 0
            },
            methods: { //类型key(string):Function()
                add() {
                    this.counter++ //一定要加this
                },
                sub() {
                    this.counter--
                }
            }
        })
    </script>

2. Vue的插值操作

何为插值操作?

  • 上述的#app里面的{{message}}已经交由Vue控制了,这是Vue的Mustache语法,它显示的值就是data里的message

v-once

1
2
3
4
5
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>
        <!-- 使用了v-once插入的值只会改变一次 -->
    </div>

v-html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
    <div id="app">
        <h2>{{url}}</h2>
        <!--这里的url会是字符串-->
        <h2 v-html="url"></h2>
        <!--这里会包含html语法并且覆盖<h2>标签内的所有内容-->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                url: '<a href="http://www.baidu.com">百度一下</a>'
            }
        })
    </script>

v-text

  • 用法同v-html,但是它不包含html用法,会覆盖标签内的全部内容,一般很少使用

v-pre

1
<h2 v-pre>{{message}}</h2>

这里显示的解果是{{message}},原封不动的显示

v-cloak(cloak斗篷的意思)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
        <div id="app" v-cloak>
        <!--v-cloak加上style标签里的东西可以使内容在加载Vue之前不显示,加载完vue后删除v-cloak-->
        {{message}}
    </div>
    <script src="../js/vue.js"></script>
    <script>
        setTimeout(function() {
            const app = new Vue({
                el: '#app',
                data: {
                    message: '你好啊'
                }
            })
        }, 3000)
    </script>

3. v-bind绑定

举例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
    <div id="app">
        <!-- 错误的做法
        <img src="{{imgURL}}" alt=""> -->
        <img :src="imgURL" alt="">
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                imgURL: 'https://cn.vuejs.org/images/logo.png'
            }
        })
    </script>

v-bind绑定class

  • 对象语法
 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
    <div id="app">
        <!-- 对象语法 -->
        <h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
        <!-- 还可以放到methods里面,也可以放data里 -->
        <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
        <button @click="change">变色</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                isActive: true,
                isLine: false
            },
            methods: {
                change() {
                    this.isActive = !this.isActive
                },
                getClasses() {
                    return {
                        active: this.isActive,
                        line: this.isLine
                    }
                }
            }
        })
    </script>
  • 数组语法(用的少)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <div id="app">
        <!-- 这是字符串 -->
        <h2 :class="['active','line']">{{message}}</h2>
        <!-- 这是变量 -->
        <h2 :class="getClasses()">{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                active: 'aaa',
                line: 'bbb'
            },
            methods: {
                getClasses() {
                    return [this.active, this.line]
                }
            }
        })

v-bind绑定字符串

  • 对象语法
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    <div id="app">
        <!-- <h2 :style="{key(css属性名):value(属性值)}">{{message}}</h2> -->
        <!-- 50px必须加上单引号 -->
        <!-- <h2 :style="{fontSize: '50px'}">{{message}}</h2> -->
        <h2 :style="{fontSize: finalSize+'px',color:finalColor}">{{message}}</h2>
        <h2 :style="styleObject">{{message}}</h2>

    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                finalSize: 100,
                finalColor: 'red',
                styleObject: {
                    fontSize: '100px',
                    color: 'red'
                }
            }
        })
    </script>
  • 数组语法(用的少)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
    <div id="app">
        <h2 :style="[baseStyle]">{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                baseStyle: {
                    backgroundColor: 'red'
                }
            }
        })
    </script>

4. 计算属性

  • 记住计算属性有缓存,而methods没有(更占内存)
  1. 举例,通过计算属性计算books的总价格(这个例子中,我们只是使用getter来读取,某些情况下可以提供一个setter方法,不常用)
 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
48
49
<body>
    <div id="app">
        <h2>总价格:{{totalPrice}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                books: [{
                    id: 1,
                    name: 'Unix编程艺术',
                    price: 100
                }, {
                    id: 2,
                    name: '代码大全',
                    price: 180
                }, {
                    id: 3,
                    name: '深入李杰计算机原理',
                    price: 95
                }, {
                    id: 4,
                    name: '现代操作系统',
                    price: 70
                }]
            },
            computed: {
                totalPrice() {
                    let result = 0;
                    //ES5的方法 for 循环
                    // for (let i = 0; i < this.books.length; i++) {
                    //     result += this.books[i].price
                    // }

                    //ES6

                    for (let book of this.books) {
                        result += book.price
                    }
                    return result
                }
            }
        })
    </script>
</body>

</html>
  1. set和get方法(在控制台输入app.fullName,会调用set方法,同时改变firstName和lastName)
 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
    <div id="app">
        <h2>{{fullName}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: 'Kobe',
                lastName: 'Bryant'
            },
            // 计算属性一般没有set方法,只读属性
            computed: {
                fullName: {
                    set(newValue) {
                        console.log('调用了set', newValue)
                        const names = newValue.split(' ')
                        this.firstName = names[0]
                        this.lastName = names[1]
                    },
                    get() {
                        return this.firstName + ' ' + this.lastName
                    }
                }
            }
        })
    </script>

Vue的第一天学习就这样了,争取十天搞定Vue!!奥力给