Vue核心内容

最近学习vue框架核心内容的总结如下：

1. 怎么去了解一个框

2. Vue核心重要内容有哪些

3. 怎么使用，如何更好的使用

 

一、怎么去了解一个框架

要想了解一个框架，先从框架四个方面入手：思想层面、原理层面、具体实现和封装、应用层api等

在思想层面：要了解这个框架的设计思想，进而明确框架在技术开发中所解决的问题

在原理方面：要了解框架设计是基于什么技术原理，核心的实现原理

具体实现和封装：以怎样一种方式组合和实现代码逻辑，怎样实现模块通信，更新机制，具体功能的实现封装；

应用层api：怎样使用，如何更好的使用

 

二、Vue核心重要内容有哪些

1.Vue的基础认识

2.Vue的基本使用

3.模板语法

4.计算属性和监视

5.Class与style绑定2

6.条件渲染

7.列表渲染

8.事件处理

9.表单输入绑定

10.Vue实例生命周期

---

1.Vue的基础认识：

1.1 Vue是什么？

• 渐进式JavaScript 框架
• 作者： 尤雨溪(一位华裔前Google工程师)
• 作用：动态构建(显示)用户界面

 

1.2 Vue的特点

1.遵循MVVM模式

2.编码简洁，体积小，运行效率高，适合移动/pc端开发

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

 

1.3 与其它前端JS框架的关联

1. 借鉴angular的模板和数据绑定技术
2. 借鉴react的组件化和虚拟DOM技术

 

1.4  Vue扩展插件

1.    Vue-cli： vue脚手架
2.    vue-resourse(axios): ajax请求
3.    vue-router: 路由
4.    vuex: 状态管理
5.    vue-lazyload: 图片懒加载
6.    vue-scroller: 页面滑动相关
7.    mint-ui: 基于vue的UI组件库(移动端)
8.    element-ui: 基于vue的UI组件库(PC端)

   

 

   1.5  Vue和React不同之处

     它们相同之处：

1.  都是使用Virtual DOM
2.  提供响应式(Reactive)和组件化(Composable)的视图组件
3.  都有支持native的方案， React的RN, vue的wee下
4.  都支持SSR服务器渲染
5.  都支持props进行父子组件间的通信
6.  心能方面： React和Vue在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势，因为 Vue 的 Virtual DOM 实现相对更为轻量一些。

       不同之处:

1.   数据绑定方面， vue实现了数据的的双向数据绑定，react数据流动是单向的
2.   virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
3.   state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理（如果要操作直接this.xxx）
4.   组件写法不一样, React推荐的做法是 JSX , 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件

  

    1.6  vue.js的核心特点--响应的数据 绑定

       传统的js操作页面：在以前使用js操作页面的时候是这样的，需要操作某个html元素的数据，就的使用js代码获取元素然后在处理业务逻辑

        

响应式数据绑定的方式操作页面，可以直接使用像下面代码那样的写法就可以将数据填充到页面中

   

2.Vue的基本使用

    2.1 基本语法：

        2.1.1  vue的使用从创建Vue对象开始

               let  vm = new Vue();

        2.1.2  创建vue对象

         创建vue对象的时候，需要传递参数，是json对象对象必须至少有两个属性成员

     vm = new  Vue({

       el: "#app",

        data: {

         methods: {},

         watch: {},

          filter: {},

     el: 设置vue可以操作的html内容范围，值就是css的id选择器。

     data：保存vue.js中要显示到html页面的数据

      methods： 定义函数

      watch:  监听属性

       filter: 定义过滤器

   

     }

   

})

     2.1.3设置控制范围

         vue.js要控制器的内容外围，必须先通过id来设置

  

     2.1.4分析Vue的MVVM模式：

    

<