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配置简化打包流程
网友评论