下面对vue的基础知识点进行记录。
1、vue的生命周期就是vue实例从创建到销毁的全过程,即从main.js中的new Vue()开始,vue实例有一个完整的生命周期。
vue的生命周期中每个阶段对外开放操作vue的接口为钩子函数,包含如下:
- beforeCreate(创建前):vue实例完成创建,data没有初始化,不能访问data、method,一般在这个阶段不进行操作;
- created(创建后):vue实例中的data、method已被初始化,属性也被绑定,但是此时还是虚拟dom,真实dom还没生成,$el 还不可用。这个时候可以调用data和method的数据及方法,created钩子函数是最早可以调用data和method的,故一般在此对数据进行初始化;
- beforeMount(挂载前):模板已经编译完成,但还没有被渲染至页面中(即为虚拟dom加载为真实dom)这个时候可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取;
- mounted(挂载后):模板已经被渲染成真实DOM,用户已经可以看到渲染完成的页面,页面的数据也是通过双向绑定显示data中的数据。当执行完 mounted 就表示,实例已经被完全创建好了,此时,如果没有其它操作的话,这个实例,就静静的躺在我们的内存中,一动不动;
- beforeUpdate(更新前):更新前状态(view层的数据变化前,不是data中的数据改变前),重新渲染之前触发;
- updated(更新后):数据已经更改完成,dom也重新render完成;
- beforeDestroy(销毁前):销毁前执行($destroy方法被调用的时候就会执行),一般在这里善后:清除计时器、清除非指令绑定的事件等等;
- destroyed(销毁后):销毁后 (Dom元素存在,只是不再受vue控制),卸载watcher,事件监听,子组件;
创建vue实例的示例:
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}}
遍历对象
3、vue常用属性包括如下:
- el属性:用来指示vue编译器从什么地方开始解析vue的语法,可以说是一个占位符;
- data属性:用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中;
- methods属性:放置页面中的业务逻辑,js方法一般放置在methods中,使用v-on时调用的方法必须放在这里面;
4、组件
组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码。
定义组件
var app = new Vue({el: '#app',// 定义局部组件,这里可以定义多个局部组件components: {//组件的名字'Navbar': {//组件的内容template: ''}}
})
使用组件
定义组件
// 定义全局组件
Vue.component('Navbar', {template: ''
})
使用组件
后续会持续更新