web前端开发之vue.js：初识vue

官网

 英文官网:https://vuejs.org/

中文官网:https://cn.vuejs.org/

介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

渐进式 JavaScript 框架

作者: 尤雨溪(一位华裔前 Google 工程师)

 作用: 动态构建用户界面

模式

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。

　　1.Model指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。

　　2.View指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。

　　3.ViewModel指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，

特点

•  遵循 MVVM 模式

• 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

• 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

与其它前端 JS 框架的关联

1) 借鉴 angular 的模板和数据绑定技术

2) 借鉴 react 的组件化和虚拟 DOM 技术

 Vue 扩展插件

1) vue-cli:vue 脚手架

2) vue-resource(axios):ajax 请求

3) vue-router: 路由

4) vuex: 状态管理

5) vue-lazyload: 图片懒加载

6) vue-scroller: 页面滑动相关

7) mint-ui: 基于 vue 的 UI 组件库(移动端)

8) element-ui: 基于 vue 的 UI 组件库(PC 端)

vue的生命周期是什么

    vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有:

    beforeCreate

    created

    beforeMount

    mounted

    (

        beforeUpdate

        updated

    )

    beforeDestroy

    destroyed

动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

同时使用过渡和动画

Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>

你可以在一个组件的选项中定义本地的过滤器：

filters: {  capitalize: function (value) {    if (!value) return ''
    value = value.toString()    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('capitalize', function (value) {  if (!value) return ''
  value = value.toString()  return value.charAt(0).toUpperCase() + value.slice(1)
})new Vue({  // ...})

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

了解更多请关注官方文档奥！书山有路勤为径，学海无涯苦作舟！