个人博客
0%

【Vue】认识Vue

发表于 更新于 分类于

Vue的简单认识

一、认识Vuejs

Vue是一个渐进式的框架

  • 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验

Vue特点和功能：

  • 解耦视图和数据
  • 可复用的组件
  • 前端路由技术
  • 状态管理
  • 虚拟DOM

学习Vue需要基础：

  • HTML
  • CSS
  • JavaScript

官网：https://cn.vuejs.org/

二、Vue.js安装

2.1 CDN引入

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
50
51
52
53
54
55
56
57
<!--开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--生成环境版本，又花了尺寸和速度-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
````

#### 2.2 下载和引入
（ctrl + s 保存）<br/>
开发环境：https://vuejs.org/js/vue.js <br/>
生成环境：https://vuejs.org/js/vue.min.js


#### 2.3 npm安装
后面课程使用再讲

---

### 三、Hello Vuejs
#### 3.1 Vue简单使用
```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">{{message}}</div> <!--div交给vue管理，会识别{{}}语法-->
        <div>{{message}}</div><!--没有交给vue管理，无法识别{{}}-->

        <script src="../js/vue.js"></script> <!--引入vuejs-->

        <script>
            /*
            let(es6中定义变量)
            const(es6定义常量)
            在vue中一般不使用var，因为没有作用域，会有一定的局限性
             */
            //编程范式：声明式编程
            //好处：数据和界面完全分离
            const vue = new Vue({
                el: '#app',  //管理div标签
                data: { //定义数据
                    message: 'Hello, Vuejs!'
                }
            });


            /*原生js做法（编程范式：命令式编程）
            1.创建div元素，设置id属性
            2.定义一个变量为message
            3.将message变量放在前面的div元素中显示
            */
        </script>
    </body>
</html>

3.2 Vue列表展示

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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

        <div id="app">
            <ul>
                <li v-for="game in games">{{game}}</li> <!-- v-for 是 vue用来遍历数据元素的方法-->
            </ul>
        </div>

        <script src="../js/vue.js"></script>
        <script>
            const vue = new Vue({
                el: '#app',
                data: {
                    games: ['怪物猎人', '刺客信条', '塞尔达传说']
                }
            });
        </script>

    </body>
</html>

3.3 (案例)计数器

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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
        <div id="app">
            <h3>当前计数：{{counter}}</h3>
            <!--方式一：-->
        <!--    <button v-on:click="counter++">+</button>-->
        <!--    <button @click="counter&#45;&#45;">-</button>-->
        
            <!--方式二：-->
            <button v-on:click="add()">+</button>
            <button @click="sub()">-</button> <!--'@' 是 'v-on:' 的语法糖(简写)-->
        </div>
        
        <script src="../js/vue.js"></script>
        <script>
            const vue = new Vue({
               el: '#app',
               data: {
                   counter: 0
               },
               methods: { //定义方法
                   add: function () {
                        this.counter++;
                   },
                   sub: function () {
                        this.counter--;
                   }
               }
            });
        </script>
    </body>
</html>

四、Vue的MVVN

MVVM(Model View ViewModel)

五、Vue的Options选项

  • 目前掌握选项：
    • el：
      • 类型：String | HTMLElement
      • 作用：决定之后Vue实例会管理哪一个DOM
    • data：
      • 类型：Object | Function（组件当中data必须存的是函数）
      • 作用：Vue实例对应的数据对象
    • methods：
      • 类型：([key:String]:Function)
      • 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

六、Vue的生命周期

6.1 new Vue()

源码查看

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
function Vue (options) {
  if (!(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
  this._init(options); //初始化
}


function initMixin (Vue) {
  //初始化函数
  Vue.prototype._init = function (options) {
    var vm = this;
    // a uid
    vm._uid = uid$3++;

    var startTag, endTag;
    /* istanbul ignore if */
    if (config.performance && mark) {
      startTag = "vue-perf-start:" + (vm._uid);
      endTag = "vue-perf-end:" + (vm._uid);
      mark(startTag);
    }

    // a flag to avoid this being observed
    vm._isVue = true;
    // merge options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options);
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      );
    }
    /* istanbul ignore else */
    {
      initProxy(vm);
    }
    // expose real self 内部调用其他的初始化函数
    vm._self = vm;
    initLifecycle(vm);
    initEvents(vm);
    initRender(vm);
    //钩子函数
    callHook(vm, 'beforeCreate');
    initInjections(vm); // resolve injections before data/props
    initState(vm);
    initProvide(vm); // resolve provide after data/props
    callHook(vm, 'created');

    /* istanbul ignore if */
    if (config.performance && mark) {
      vm._name = formatComponentName(vm, false);
      mark(endTag);
      measure(("vue " + (vm._name) + " init"), startTag, endTag);
    }

    if (vm.$options.el) {
      vm.$mount(vm.$options.el);
    }
  };
}