1.vue是什么
vue: 渐进式的js框架(先看到做核心的东西,然后再根据需求进行增加,比较灵活)
自底向下(先关注最基础的部分,接着逐渐扩大)
只关注视图层
组件化
响应式设计(响应式:一个网页,根据分辨率的不同,改变网页大小,例如bootstrap就是响应式的,适应式:多个不同的网页,根据分辨率的不同自动选择不同的页面)
2.优缺点
优点:简单
轻量
组件解耦
超快虚拟dom
缺点:
出现晚(2014)不支持低版本,IE8一下不支持
仅限于view层,ajax需要额外的框架
3.项目示例
具体介绍:
采用 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 ,具体结构如下:--运行项目时不需要此步骤
5)安装依赖包,进入项目所在的文件夹下,运行cnpm install
6)运行项目:cnpm run dev (在项目所在的文件夹下运行)
7)生成项目 cnpm run build(在项目所在的文件夹下运行),产生dist文件夹,可以拷贝到eclipse项目中
8)需要什么组件在进行安装
4.快速搭建与后台进行交互
5.主要模块进行学习
1)基础学习
Vue的生命周期
首先进行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({})普通的组件
注:table ol ul selected限制了里面包含的元素,所以用自定义的元素可能出错,这时可以用 属性is=“组件名”来使用
当使用来自以下来源之一的字符串模板,这些限制将不适用: