Vue磨刀嚯嚯

2018-07-03 本文已影响0人小淘气_嘻

Vue开发风格——传统方法应用vue.js

传统方法引用vue.js.png

Vue开发风格——单个组件式

独立组件式.png

组件

基本操作

创建一个组件构造器
注册组件，并制定组件引用在Html中的标签
将组件放到Vue实例挂载的Html元素中

组件使用的步骤

知识点

局部组件与全局组件
props传参；单向传参；双向传参;一次性传参
- //myName是单向传参， myAge是双向传参，mySex是一次性传参 <my-component v-bind:my-name="name" v-bind:my-age.sync="age" v-bind:my-sex.once="man"></my-component>
  props传参
内容分发，slot作为原始内容的插槽。（混合父组件的内容与子组件自己的模板）
- 默认：父组件模板的内容在父组件作用域内编译，子组件模板的内容在子组件作用域内编译；有了内容分发，子组件之间插入父组件的DOM。
- 指定name名称的slot；组件中使用slot，以下图为例，不需要每次都指定3个slot。
  
  指定name的slot
父子组件互相访问
- 父组件中，通过this.$children(包含所有子组件的实例的数组) 或 $refs.索引ID 访问子组件。
  
  $refs.cc1.msg
- 子组件中访问父组件this.$parent
- 子组件访问根组件$root
- 组件树中通信
  - $on()监听事件
  - $emit()在它上面触发事件
  - $dispatch()派发事件，事件沿着父链冒泡
  - $broadcast()广播事件，事件向下传到给所有的后代

Vue.js组件的API 由三部分组成： prop, slot 和事件

prop允许外部环境传数据给组件

slot允许外部环境插入内容到组件的视图结构内

事件:on/emit/dispatch/broadcast允许组件触发外部环境的action

过滤器

{{}}差值的末尾添加一个管道符|
过滤器也可以串联或者接受参数
- {{message | filterA | filterB }}
- {{message |filterA('arg1', 'arg2') }} 后边的arg1传给了过滤器的第二个参数 过滤器第一个参数是数据本身

语法糖

v-bind 缩写为 :
v-on 缩写为@

vue-router

基础步骤

引入依赖（HTML）：<script src="js/vue.js"></script><script src="js/vue-router.js"></script>
创建组件Home和About（JS）
var Home = Vue.extend({ template:'', data:function(){}});
var About = Vue.extend({template:'',data:function(){}});
创建Router （JS）
//调用构造器VueRouter,创建一个路由器实例
var router = new VueRouter();
映射路由（JS）
router.map({ '/home':{component:Home}, //路由的key + 表示该条路由映射的组件 'about':{component:About} })
v-link指令跳转到指定路径（HTML）
<a v-link="{path:'/home'}">Home</a>
<a v-link="{path:'/about'}">About</a>
<router-view></router-view> （HTML）放在需要渲染相应组件的地方
启动路由（JS）
var App = Vue.extend({});
router.start(App,'#app');

原理
vue-router ————> v-link指令的路由映射 ————>由路由映射找到匹配的组件————>渲染到<router-view>标签处

嵌套路由

/home/news 及home/message是/home的子路由
News和Message组件并不是Home的子组件

具名路径

路由映射部分router.map，对应的路由name='路由名'
v-link={path:'/home'} 变为 v-link={name:'路由名'}

v-link方便用户在vue-router应用的不同路径之间跳转；执行时调用router.go
v-link自动设置<a>的href属性

路由对象

vue-router应用中，路由对象被注入每个组件中。
赋值 this.$route

路由对象的属性

{{$route.path}}当前路径绝对路径
{{$route.params}}当前路由请求的参数
{{$route.query}}路由参数查询
{{$route.router}} 路由器
{{$route.matched}}
{{$route.name}} 当前路径的名字，具名路径name

activeClass 让链接显示选中

通过v-link指令设定<a v-link = "{path:'/home' , activeClass:'active'}"></a>
钩子函数<li :class="currentPath == '/home/news' ? 'active': ''"><a v-link="{ path: '/home/news'}">News</a></li>

每个组件一个route选项，route选项有一系列钩子函数
切换路由时执行这些钩子函数
钩子函数包括：data钩子函数，用于加载和设置组件

钩子函数

全局钩子函数：定义在全局的路由对象中
- beforeEach 路由切换开始时调用
- afterEach 每次路由切换，成功进入激活阶段时被调用
组件钩子函数：定义在组件的route选项中
- data 设置组件的data （afterEach期执行）
- activate 激活组件（afterEach期执行）
- deactivate 禁用组件（beforeEach期执行）
- canActivate 组件是否可以被激活（beforeEach期执行）
- canDeactivate是否可被禁用（beforeEach期执行）
- canReuse 是否可被重用（beforeEach期执行）
路由切换，钩子的参数为transition对象
- transiton.to 将要切换到的路径的路由对象
- transition.from 当前路径的路由对象
- transition.next() 调用此函数处理切换过程的下一步
- transition.abort([reason]) 调用此函数终止或拒绝此次奇幻
- transition.redirect(path)取消当前切换并重定向到另一个路由

路由阶段

检查视图结构是否具有可重用组件？检查canReuse。可重用阶段
检查当前组件是否能够停用及新组件是否可以激活？canDeactivate与canActivate验证阶段
所有钩子都被调用并没有终止切换，切换就合法。deactivate activate data激活阶段

this.$router.go(-1)
this.$router.push('/目标路由')

Vuex

组件之内变量的作用域独立，Vuex可以管理数据在组件中的规范交互

Vuex的特点

单一状态树数据管理模式： .state是应用层全局data对象
单向数据管理模式：事件驱动
单入口管理模式：提交mutation来更改store的状态
生命周期：应用不退出，不刷新，Vuex一直保持

Vuex语法

store.state
getter : 全局computed
mutation : 类似事件，包含事件名和该事件触发后的回调函数；修改state的事件（同步）
action ：提交mutation的代码（异步）

const store = new Vuex.Store({
  state:{ count:1},
  mutation:{
      increment(state){ state.count ++; }       //事件 + 事件回调函数处理逻辑
  }
})
//执行
store.commit(' increment ');

Webpack

模块打包工具：将静态资源压缩在指定的文件中
资源暴露给模块，commonJS 规范 module.exports = function(){}
webpack {入口文件} {打包生成文件} 执行打包
配置webpack.config.js，webpack便等同于执行打包语句
配置package.json ，配置npm start执行打包语句
webpack配置简化打包流程

Vue磨刀嚯嚯

组件

过滤器

语法糖

vue-router

路由对象

Vuex

Webpack

猜你喜欢

热点阅读