一、 vue介绍
- Vue.js是用于构建交互式的Web界面的库.
- 它提供了MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲,Vue.js集中在MVVM的模式上的视图模型层,并通过双向数据绑定连接视图和模型。
- 实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其它的MVVM框架,Vue.js更容易上手。
- Vue.js是一个用于创建Web交互界面的库。他让你通过简单而灵活的API创建由数据驱动的UI组件。
二、Vue常用基本指令
- v-if:根据表达式的值的真假条件渲染元素。
- v-show:根据表达式之真假值切换元素的CSS属性。
- v-for:循环指令,基于一个数组或者对象渲染一个列表(vue2.0以上必须配合key值使用)。
- v-bind:动态的绑定一个或多个特性,或一个组件prop表达式。
- v-on:用于监听指定元素的DOM事件(比如点击事件,绑定事件监听器)。
- v-model:实现表单输入和应用状态之间的双向绑定。
- v-pre:跳过这个元素和它的子元素的编译过程(可以用来显示原始Mustache标签)。
- v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过(可以用于优化更新性能)。
三、Vue过滤器
vue过滤器主要用于对渲染出来的数据进行格式化处理。分为全局过滤器跟局部过滤器
全局过滤器:
Vue.filter("过滤器名",function(参数1、参数2){
return 要返回的数据形式
})
局部过滤器:在组件内部添加filters属性来定义过滤器
filters:{
过滤器名(参数1、参数2、...参数n){
return 要返回的数据形式
}
}
四、Vue生命周期
vue生命周期即为一个组件从出生到死亡的一个完整周期,主要包括以下4个阶段:创建、挂载、更新、销毁
创建前:beforeCreate、创建后:created
挂载前:beforeMount、挂载后:mounted
更新前:beforeUpdata、更新后:updated
销毁前:beforeDestroy、销毁后:destroyed
五、vue优缺点
其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库。 Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组件系统。
vue的特性如下:
- 轻量级的框架(相对而言)
- 双向数据绑定
- 指令
- 插件化