学习vue2.0笔记（第五章上）

vue-cli##

vue-cli是vue官方提供的脚手架的工具

• 使用vue-cli的优势
  • 成熟的vue项目架构设计
  • 提供本地测试服务器
  • 集成打包上线的方案webpack 或者grulp

• 使用vue-cli的系统要求

image.png

命令行中使用node运行js

image.png

工具MobaXterm

全局安装

image.png

vue list 可用的模板

image.png

安装开发依赖，可在package.json中查看， npm install命令

image.png

image.png

npm run dev和 npm run build
data采用函数方式，有自己的作用域

image.png

总结

image.png

es6语法##

导出com时，要用花括号

image.png

引用该组件时，也要使用{com}

image.png

前端路由##

前端路由：通过js控制
安装路由

配置文件package.json更新了

image.png

在入口文件里引如VRouter，注册，实例化，插入到vue实例中

设置映射map

image.png

使用

使用

路由默认加了哈希，有一个#号

设置mode:history没有哈希，

image.png

image.png

页面内的跳转， router-link内置组件，默认解读为一个a标签

image.png

路由参数

image.png

映射表里添加color参数

image.png

组件内部获取参数，this.$route全局对象

image.png

image.png

image.png

image.png

image.png

路由嵌套
apple/redapple

image.png

redapple是apple的子组件

访问子路由，redapple出现

image.png

使用router-link直接跳转

同时传入参数

image.png

具名路由，通过name访问

image.png

image.png

具名视图

image.png

在component里为不同的视图指定不同的组件

image.png

默认为a标签，也可以通过tag指定为li标签

默认

router-link为声明式导航，在模板里声明
编程式导航

image.png

结合使用

image.png

路由重定向##

image.png

过渡和动态组件##

image.png

用keep-alive做缓存

用keep

类可以在router中进行设置

image.png

总结

image.png