vue基础概念

下面对vue的基础知识点进行记录。
1、vue的生命周期就是vue实例从创建到销毁的全过程，即从main.js中的new Vue()开始，vue实例有一个完整的生命周期。
vue的生命周期中每个阶段对外开放操作vue的接口为钩子函数，包含如下：

1. beforeCreate（创建前）：vue实例完成创建，data没有初始化，不能访问data、method，一般在这个阶段不进行操作；
2. created（创建后）：vue实例中的data、method已被初始化，属性也被绑定，但是此时还是虚拟dom，真实dom还没生成，$el 还不可用。这个时候可以调用data和method的数据及方法，created钩子函数是最早可以调用data和method的，故一般在此对数据进行初始化；
3. beforeMount（挂载前）：模板已经编译完成，但还没有被渲染至页面中（即为虚拟dom加载为真实dom）这个时候可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取；
4. mounted（挂载后）：模板已经被渲染成真实DOM，用户已经可以看到渲染完成的页面，页面的数据也是通过双向绑定显示data中的数据。当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动；
5. beforeUpdate（更新前）：更新前状态（view层的数据变化前，不是data中的数据改变前），重新渲染之前触发；
6. updated（更新后）：数据已经更改完成，dom也重新render完成；
7. beforeDestroy（销毁前）：销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等；
8. destroyed（销毁后）：销毁后 （Dom元素存在，只是不再受vue控制）,卸载watcher，事件监听，子组件；

创建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

2、vue的关键字包含如下：

• 插值表达式：{{data中的数据}}
• v-text：操作文本内容；
• v-html：操作文本和标签；
• v-bind：单向数据绑定，动态地绑定一个或多个特性，（要绑定的属性）=“(要绑定的属性值)” ；
• v-model：双向数据绑定，将标签的value值与vue实例中的data属性值进行绑定；
• v-on：过配合具体的事件名来绑定Vue中定义的函数；
• v-show：显示隐藏元素；
• v-if v-else-if v-else：判断指令；
• v-for：循环指令；
  

  {{i}}

  遍历数字
  

  {{s}}

  遍历字符串
  

  {{i}}-{{v}}

  遍历数组
  

  {{key}}-{{item}}

  遍历对象

1
2
3
4

3、vue常用属性包括如下：

• el属性：用来指示vue编译器从什么地方开始解析vue的语法，可以说是一个占位符；
• data属性：用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中；
• methods属性：放置页面中的业务逻辑，js方法一般放置在methods中，使用v-on时调用的方法必须放在这里面；

1
2
3
4
5
6
7
8
9
10

4、组件
组件（Component）是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。

• 局部组件

定义组件

var app = new Vue({
    el: '#app',
    // 定义局部组件，这里可以定义多个局部组件
    components: {
        //组件的名字
        'Navbar': {
            //组件的内容
            template: '
首页
用户管理
'
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11

使用组件

    

1
2
3

• 全局组件

定义组件

// 定义全局组件
Vue.component('Navbar', {
    template: '
首页
学员管理
讲师管理
'
})
1
2
3
4

使用组件

    




1
2
3
4
5
6
7
8
9
10

后续会持续更新