4.组件化
组件：组件就是可被反复使用的，带有特定功能的视图。
所谓的组件化，就像玩积木一样，把封装的组件进行复用,把积木（组件）拼接在一起，构成一个复杂的页面应用程序。
组件树就是由各个组件构成的一种数据结构，它存在的意义是为了帮梳理应用程序。
1、组件的创建
全局组件：
局部组件：
2、组件使用
作为普通的标签去使用
3、注意事项
1.组件的id和使用方式 遵循烤串式命名方式：a-b-c
2.如果一个组件 要渲染多个元素，将多个元素放在一个顶层标签中，比如div、form
3.全局组件可以用在id为example的范围内的任何一个组件内部，直接调用可以；但是局部组件只能在父模板中直接调用
5.自定义指令
创建：
使用：
6.过滤器
过滤器是针对一些数据 进行筛选、过滤、格式化等相关的处理，变成我们想要的数据。
过滤器的本质 就是一个带有参数带有返回值的方法。
Vue1.* 支持内置的过滤器，但是Vue2.* 就不再内置过滤器，但是支持自定义过滤器。
1、过滤器的创建和使用
1.创建
2.使用
2、如何在调用过滤器时，完成参数的发送和接受
1.发送
2.接受
7.复合组件
知识回顾：
复合组件：并不是新的概念，就是一个组件，只不过这个组件中 可以调用其他的组件。
注意事项：
1.组件要渲染的内容 取决于在定义组件时template
效果是出不来的。
2.允许在一个组件中，直接来调用另外一个组件。
8.生命周期
四个阶段：
create 准备工作 （数据的初始化。。。）
mount 挂载前后针对元素进行操作
update 数据发生变化，
destroy 清理工作 (关闭定时器、集合清空..)
beforeCreate/created
beforeMount/mounted
beforeUpdate/updated
beforeDestroy/destroyed
9.常用属性
1、watch
1.表单元素的双向数据绑定
2.监听
2、computed
计算属于是用于在模板中，搞定复杂的业务逻辑，因为有依赖缓存。
1.指定计算属性
2.调用
10.组件间通信
1、父与子通信 （props down）
1.发送
2.接受到son组件：
2、子与父通信 (events up)
1.绑定
2.触发
子组件内部：
3、ref(reference 引用/参考 外号)
帮助在父组件中 得到子组件中的数据、方法。
1.指定ref属性
2.根据ref得到子组件实例
4、$parent
this.$parent得到父组件的实例
5、兄弟组件通信
1.
2.接收方
3.发送方
11.补充组件创建的方式
1、直接在template属性中指定模板内容
1.全局组件
2.局部组件
2、.vue结尾的文件
3、单独指定一个模板内容
12.路由模块
路由模块的本质 就是建立起url和页面之间的映射关系。
1、SPA的基本概念和工作原理
SPA：single page application 单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容，比如Gmail、移动的webApp。
工作原理：
解析地址栏：完整的页面地址、路由地址
根据路由地址从路由词典中找到真正的要加载的页面
发起ajax请求：请求要加载的页面
像指定的容器中插入加载来的页面
2、路由模块的基本使用
专业术语：
router路由器
route路由
routes 路由数组（路由词典）
1.引入vue.js vue-router.js
2.指定一个容器
3.创建业务所需要用到的组件类
4.配置路由词典
5.测试
修改地址栏中的路由地址，测试看加载的组件是否正确
注意事项：
1.先引入vue，再引入插件
2.一定要指定router-view
3.route路由 {path:'',component:}
routes：路由数组 []
router：路由器，按照指定的路由规则去访问对应的组件 new VueRouter
3、使用路由模块来实现页面跳转的方式
方式1：
直接修改地址栏
方式2：
方式3：
4、完成参数的传递
在页面之间跳转的时候，在有些场景下，需要同时指定参数
1.明确发送方和接收方
2.配置接收方的路由地址
3.发送
5、路由嵌套
在一个路由中，path对应一个component，如果这个component需要根据
不同的url再加载其他的component，称之为路由的嵌套
举例：比如A组件现在需要根据不同的url，加载B组件或者C组件
1.给A组件指定一个容器
2.配置路由词典
需求：现在有两个组件，分别是login/mail,建立SPA。
在此基础上，希望mail组件 嵌套inbox/outbox/draft
补充：在设置子路由，路由匹配规则依然是适用的，只不过路由地址为空和异常，要携带父组件的路由地址
13.搭建基于CLI开发环境的方式
1.指定一个文件夹：C:\xampp\htdocs\framework\vue\project
2.将tpls.zip拷贝到project中
3.右键单击压缩包，解压缩到当前文件夹
4.进入到tpls
5.同时按下shift和鼠标右键，选择在此位置打开命令行串口
6.执行npm install
7.执行npm start
网友评论