vue的介绍

115 阅读2分钟

一、 vue介绍

  1. Vue.js是用于构建交互式的Web界面的库.
  2. 它提供了MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲,Vue.js集中在MVVM的模式上的视图模型层,并通过双向数据绑定连接视图和模型。
  3. 实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其它的MVVM框架,Vue.js更容易上手。
  4. Vue.js是一个用于创建Web交互界面的库。他让你通过简单而灵活的API创建由数据驱动的UI组件。

二、Vue常用基本指令

  1. v-if:根据表达式的值的真假条件渲染元素。
  2. v-show:根据表达式之真假值切换元素的CSS属性。
  3. v-for:循环指令,基于一个数组或者对象渲染一个列表(vue2.0以上必须配合key值使用)。
  4. v-bind:动态的绑定一个或多个特性,或一个组件prop表达式。
  5. v-on:用于监听指定元素的DOM事件(比如点击事件,绑定事件监听器)。
  6. v-model:实现表单输入和应用状态之间的双向绑定。
  7. v-pre:跳过这个元素和它的子元素的编译过程(可以用来显示原始Mustache标签)。
  8. 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的特性如下:

  1. 轻量级的框架(相对而言)
  2. 双向数据绑定
  3. 指令
  4. 插件化