Vue学习总结

1.vue是什么

  vue: 渐进式的js框架(先看到做核心的东西,然后再根据需求进行增加,比较灵活)

       自底向下(先关注最基础的部分,接着逐渐扩大)

       只关注视图层

       组件化

       响应式设计(响应式:一个网页,根据分辨率的不同,改变网页大小,例如bootstrap就是响应式的,适应式:多个不同的网页,根据分辨率的不同自动选择不同的页面)

      

2.优缺点

       优点:简单

             轻量

             组件解耦

                超快虚拟dom

       缺点:

             出现晚(2014)不支持低版本,IE8一下不支持

              仅限于view层,ajax需要额外的框架

3.项目示例

Vue学习总结_第1张图片

 

具体介绍:

采用 vue +vuex +axios

Vue前端框架 ,

Vuex 进行状态管理

Axios 利用json与后台进行数据交换

vue-router 页面之间的跳转

Conponot 组件组成页面

问题:打包放在放在服务器上怎样和controller进行交互

4.项目搭建:

       1)安装npm包资源管理器(node.jsan安装)node官网下载 测试 node –v  npm -v

       2)安装cnpm淘宝镜像(是npm的中国版,npm有时比较慢)

npm install -g cnpm --registry=http://registry.npm.taobao.org 

       3)安装vue-cli脚手架快速搭建支撑实际项目开发的vue环境,省去手工配置开发环境,运行环境和测试环境的步骤,cnpm install -g vue-cli 

    4)创建项目时,进入创建项目的目录中 创建名为firstVue的项目,vue init webpack firstVue ,具体结构如下:--运行项目时不需要此步骤

Vue学习总结_第2张图片 

5)安装依赖包,进入项目所在的文件夹下,运行cnpm install 

6)运行项目:cnpm run dev (在项目所在的文件夹下运行)

7)生成项目 cnpm run build(在项目所在的文件夹下运行),产生dist文件夹,可以拷贝到eclipse项目中

 Vue学习总结_第3张图片

8)需要什么组件在进行安装

4.快速搭建与后台进行交互

5.主要模块进行学习

1)基础学习

 Vue的生命周期

 

Vue学习总结_第4张图片 

   首先进行new  vue()

Before  create 事件钩子 这是还没有任何数据

Data obverse 数据观测 主要进行 data对象里面的数据进行监测

Init event :进行vue内部的初试话

Create 事件钩子

   判断是否el 选项

  判断是否有Template 选项 模板选项

         是

           编译模板 把 data里面的数据和模板编译成html

         否:

            编译外部的模板成html

    Before Mount 事件钩子 在html还没有附加到页面上之间可以进行操作

Mounted 事件钩子 附加到页面之后可以进行操作

Before destroy  事件钩子 在页面销毁之间可以进行的操作

Destroy 事件钩子  页面销毁之后进行操作

Before update 事件钩子 更新之前 可以进行操作

updated 事件钩子 更新之后 可以进行操作

2)组件学习

       组件是vue强大的功能之一

 组件的声明以及注册  vue.component全局组件 vue.extend({})普通的组件

Vue学习总结_第5张图片

Vue学习总结_第6张图片 

 

注:table ol ul selected限制了里面包含的元素,所以用自定义的元素可能出错,这时可以用 属性is=“组件名”来使用

 

当使用来自以下来源之一的字符串模板,这些限制将不适用:

你可能感兴趣的:(json,webpack,javascript)