Vue-cli是Vue的脚手架工具
可以进行目录结构、本地调试、代码部署、热加载、单元测试
1、MVVM框架
View —— ViewModel —— Model
“DOM”“观察者vue实例” “Javascript”
注意：交互为双向的
特点：
（1）针对具有复杂交互逻辑的前端应用；
（2）提供基础的架构抽象；
（3）通过Ajax数据持久化，保证前端用户体验。
2、什么是Vue.js
它是一个轻量级MVVM框架，
属于“数据驱动+组件化”的前端开发
Vuejs VS Angular+React
（1）Vue.js耿轻量，gzip后大小只有20k+
（2）Vue.js更易上手，学习曲线平稳
（3）吸取两家之长，借鉴了angular的指令（如v-show）和react的组件化
3、vue.js核心思想
（1）数据驱动
DOM是数据的一种自然映射
扩展——数据响应原理
数据（model）改变驱动视图（view）自动更新
（2）组件化
扩展HTML元素，封装可重用的代码
扩展——组件设计原则
a、页面上每个独立的可视/可交互区域视为一个组件
b、每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护
c、页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面
4、vue-cli脚手架
https://github.com/vue.js/vue-cli
（1）vue-cli安装（Win10）
步骤1：“Ctrl+ R”打开命令行
node -v
npm install -g vue-cli
步骤2：运行vue命令尝试
vue
vue init
步骤3：创建项目sell
vue init webpack sell
cd sell
npm install
npm run dev
（2）vue-cli项目目录
（3）webpack打包
5、vue-router前端路由
路由是根据不同的url地址展示不同的内容或界面。
前端路由就是把 不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面来实现的，而现在前端路由即实现了“前后端分离”
5-1：什么时候使用前端路由？
在单页面应用中，保持大部分页面结构不变，只改变部分内容的使用
5-2：前端路由有什么优点和缺点？
优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户
缺点：
（1）不利于SEO搜索引擎
（2）使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存
（3）单页面无法记住之前滚动的位置，无法再前进、后退的时候返回之前滚动位置
5-3：利用vue-router用来构建SPA
5-4：跳转——或者this.$router.push({path:' '})
5-5：
渲染——（5-4跳转至界面 与 5-5渲染至某个位置 二者是配合使用的）
5-6：动态路由匹配map
模式：/user/:username
5-7：嵌套路由
路由嵌套路由
export default new Router({
routes: [
{
path:'/goods',
name:'Goodslist',
component: Goodslist,
children :[
{
path:'title',
name:'title',
component: Title
},
{
path:'img',
name:'img',
component: Image
}
]
}
]
})
5-8：编程式路由
什么是编程式路由？——通过js来实现页面的跳转
方式1：$router.push("name")
方式2：$router.push({path:"name"})
方式3：$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123})
方式4：$router.go(1)
5-9：命名路由和命名视图
（1）命名路由——给路由定义不同的名字，根据名字进行匹配
（2）命名视图——给不同的router-view定义名字，通过名字进行相应组件的渲染
6、vue-resource
在node环境下安装输入命令行：npm install vue-resource --save
其请求API是按照REST风格设计的，它提供了7种请求API:
（1）get：从服务器端获取数据——“得到”
（2）post：从客户端向服务器端提交数据——“提交”
（3）head
（4）delete
（5）jsonp
（6）put
（7）patch
全局拦截器interceptors
Vue.http.interceptors.push((request,next)=>{
//..
//请求发送的处理逻辑
//..
next(response) => {
//..
//请求发送后的处理逻辑
//..
//根据请求的状态，response参数会返回给successCallback或errorCallback
return response
})
})
网友评论