拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3a4a8d-ua98).
重新安装浏览器，或使用别的浏览器14962人阅读
web前端（2）
入门请参考这篇文章：
在此记录下在我使用Vue.js 2.0开发较大型的单页应用时遇到的困难。
写文章不容易，如果这篇文章对你有帮助，请给我的github仓库加个star~
├── build/
└── ...
├── config/
├── index.js
└── ...
├── src/
├── main.js
├── App.vue
├── components/
└── ...
└── assets/
└── ...
├── static/
├── test/
└── unit/
├── specs/
├── index.js
└── karma.conf.js
└── e2e/
├── specs/
├── custom-assertions/
├── runner.js
└── nightwatch.conf.js
├── .babelrc
├── .editorconfig.js
├── .eslintrc.js
├── index.html
└── package.json
Vue.js 2.0
载入静态资源
参考链接：
static/目录下的文件不会被webpack处理，可以在index.html中直接引用其中的资源
Transition Effects
参考链接：
Vue提供多种在items被插入，更新或者从DOM中移除时应用过渡效果的方式。它包括以下的方式：
自动应用CSS transitions 和 animations
集成第三方CSS animation 库，例如Animate.css
使用JavaScript 直接在transition 钩子期间操纵DOM
集成第三方JavaScript animation 库，例如Velocity.js
在此处，我主要讲讲使用transition为mdl-spinner添加CSS动画的经验。
Vue提供4种应用在 enter/leave 过渡上的class：
v-enter: 进入的初始状态。在元素被插入前应用，一帧后被移除。
v-enter-active: 进入的激活和结束状态。在元素被插入前应用，在过渡/动画结束后移除。
v-leave: 离开的初始状态。在离开过渡效果触发的时候应用，一帧后被移除。
v-leave-active: 离开的激活和结束状态。在离开过渡效果触发的时候应用，在过渡/动画结束后移除。
name="spinner-move"&
v-show="$mon.loading"&
class="mdl-spinner mdl-js-spinner is-active loading"&&
.spinner-move-enter-active {
position: relative;
animation: move-in .5s;
.spinner-move-leave-active {
position: relative;
animation: move-out .5s;
@keyframes move-in {
top: -50px;
top: 10px;
@keyframes move-out {
top: 10px;
top: -50px;
参考文章：
观察Vue实例上的一个表达式或者computed function的改变。
我的需求是，设置Tip组件出现的条件。
1.在vuex中的state中设置一个属性及其mutation：
const state = {
message: '',
actionHandler: function (event) {},
timeout: 2000,
actionText: ''
const mutations = {
[SET_TIP] (state, tip) {
state.tip = tip
2.新建Tip.vue:
id="snackbar" class="mdl-js-snackbar mdl-snackbar"&
class="mdl-snackbar__text"&&
class="mdl-snackbar__action" type="button"&&
export default {
data: this.$store.state
'data.doc.tip': 'showTip'
methods: {
showTip () {
let snackbarContainer = document.querySelector('#snackbar')
snackbarContainer.MaterialSnackbar.showSnackbar(this.data.doc.tip)
3.在需要时commit：
commit(types.SET_TIP, {
message: err.statusText,
actionHandler: function (event) {},
timeout: 2000,
actionText: 'Undo'
Computed Properties
参考链接：
我想使loading组件根据当前路由清空展示不同的样式，由于判断表达式比较复杂且不止在一个地方调用了该判断表达式，我使用了computed属性：
computed: {
forLogin: function () {
return this.$route.path === '/login'
&transition name="spinner-move"&
&div v-show="$store.state.doc.loading && forLogin" class="loading-wrapper loading-login-wrapper"&
&div class="mdl-spinner mdl-js-spinner is-active loading"&&/div&
&/transition&
&transition name="spinner-move"&
&div v-show="$store.state.doc.loading && !forLogin" class="loading-wrapper"&
&div class="mdl-spinner mdl-js-spinner is-active loading loading-common"&&/div&
&/transition&
通过Props与&router-view&子组件通信
参考链接：
通过阅读官方文档可知，Vue.js可以通过Pros将数据从父组件中传递到子组件，但官网给的例子一般是这样的：
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '&span&{{ myMessage }}&/span&'
props传递的数据直接在模板中使用，但是，开发中还会经常遇到另外一种情况，在&script&中引用props的数据，事实上，官方文档也给了例子：
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
然而，非常遗憾的是，这段代码在我这里跑不通，于是，我就去研究Vue实例的生命周期图：
注意右下角的圆环处，当数据改变时，virtual DOM 会重新渲染更新，结合上面提到的props传递的数据直接在模板中使用可以正常引用，所以我想到了下面这种方式：
style="display:"&
{{initialCounter}}
export default {
props: ['initialCounter'],
updated () {
模板中引用props的值，会触发updated钩子，此时this.initialCounter已经被初始化可以被引用了，至于为什么要多次一举，也许就要问尤大大了。
vue-router
&router-view&正确渲染
&Hello App!&
to="/foo"&Go to Foo&
to="/bar"&Go to Bar&
&router-view& 组件是一个 functional 组件，渲染路径匹配到的视图组件。&router-view& 渲染的组件还可以内嵌自己的 &router-view&，根据嵌套路径，渲染嵌套组件。
踩到的坑：
如果在某个组件中需要嵌套组件，记得加上&router-view&
不要试图跳过父组件，直接访问更上层的组件或是该类组件的子组件。惨痛教训，chrome会报这个神奇的bug：
Vue.js的作者尤雨溪说：
vue-router组件渲染和virtual DOM更新构成了竞争情况
使用懒加载异步加载组件
参考链接：
当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
参考链接：
今天在试图在使用百度地图api的时候，动态加载远程script遇到了大麻烦的回调，最后用组件内的钩子的钩子解决。
beforeRouteEnter (to, from, next) {
next(() =& {
loadScript()
initialize()
动态路由匹配
参考链接：
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果：
to="/user/foo"&/user/foo&
to="/user/bar"&/user/bar&
const User = {
template: `&div&User {{ $route.params.id }}&/div&`
const router = new VueRouter({
{ path: '/user/:id', component: User }
const app = new Vue({ router }).$mount('#app')
上面是官方文档中的例子，可以发现在传递路径参数的时候，使用的是固定的值，那么，当需要传递动态的路径参数时该如何做呢？
答案是使用v-bind 的 JS 表达式，直接上例子：
v-for="(item, index) in items"&
&{{ index }}&
v-bind:to="{ name: 'example', params: { id: index }}"&{{ item }}&
解释一下，`:to`属性中的值会被解析成js表达式，所以例子中的`index`可以被识别成当前循环元素的索引，进而体现路径匹配中的动态性。
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
+------------------+
+-----------------+
+--------------+
+-------------+
+------------&
+--------------+
+-------------+
+------------------+
+-----------------+
借助 `vue-router`，使用嵌套路由配置，就可以很简单地表达这种关系。
在由`vue-cli`创建的项目中， `` 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 ``。例如，在 User 组件的模板添加一个 ``：
const User = {
template: `
class="user"&
&User {{ $route.params.id }}&
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
const router = new VueRouter({
{ path: '/user/:id', component: User,
children: [
path: 'profile',
component: UserProfile
path: 'posts',
component: UserPosts
上面的例子可以符合简单的业务逻辑，但是一旦业务逻辑变得复杂起来，就需要自己摸索一定的技巧了。这就是这篇文章下一个探讨的话题
嵌套路由与动态路由匹配结合使用
前面探讨了动态路由匹配和嵌套路由的基本使用方式，但是在现实的开发过程中，难免会遇到二者相结合的情况，接着上面的例子：
/user/:id/posts/:id/comments
上面的例子嵌套了2层路由，且包含了2层的动态路由匹配，一般的方法无法解决这个问题，需要一些特殊的方法。
其实上述提到过，:to中包含的是js表达式，所以可以以此为切入点，将:to的值与`computed`中的变量绑定：
:to="link"&
computed: {
return '/user/' + this.$route.params.id + '/chart/' + this.id
使用重定向模拟嵌套二级菜单效果
前面已经提到过，APP.vue中包含的&router-view&作为顶层路由渲染出口，其子组件中可以包含嵌套的&router-view&路由渲染出口。按照上面的思路，我们可以轻松的实现二级菜单甚至多级菜单。
现在考虑一下这种情况，在我们的应用中，侧边一个Drawer作为一级菜单，页面顶部一个TapBar作为二级菜单，类似这样：
我们可以把二级菜单的内容放置在顶层路由渲染出口中渲染，这么做有几个好处：
&router-view&层级减少，提高渲染性能；
在特定的需求下，二级菜单内容在APP.vue中渲染更合适；
可以利用vue-router的.router-link-active属性添加链接被点击后效果的CSS样式；
那么，该如何实现呢？
可以使用重定向进行模拟
将二级菜单的路由设置成2层路由，但该组件依旧在顶层的出口渲染；
'/children1' =& '/parent/children1'
'/children2' =& '/parent/children2'
使用重定向将虚拟的一级菜单路由重定向到某个真实子路由上；
path: '/parent',
redirect: '/parent/children1'
在一级菜单的链接中使用虚拟的一级菜单路由；
&router-link to="/parent"&一级菜单&/router-link&
JavaScript问题
今天在项目开发过程中遇到大坑了，鼓搞了两小时发现是`setTimeout`中的`this`被自动指向了`window`的原因，还是基础没学好。。。
贴上部分代码：
let that = this
setTimeout(function () {
that.loadingDisplay = 'none'
使用classList改变element的class
今天想做点击后使选中链接高亮，其他链接自动恢复默认的样式的功能。一开始直接修改通过`element.style` 实现效果， 在Chrome下测试通过，但是在Edge和IE中都会报错，经查证发现严格模式无法修改只读属性，于是在MDN上发现使用`classList`改变`element`的`class`的方法
if (this.lastElement !== null) {
this.lastElement.classList.remove('activate')
this.lastElement = event.target
event.target.classList.add('activate')
SVG绘制圆环图
参考文章：
使用 `stroke-dasharray` 属性实现如下效果：
图中的小圆点使用是用 `` 画的小实心圆:
cx="240" cy="94" r="3" fill="#9e9e9e"&&
虚线使用 `` ：
&line x1="240" y1="88" x2="240" y2="55" stroke="#9e9e9e" stroke-width="2" stroke-dasharray="2 2" /&
页面滚动添加动画
为scroll事件添加监听器
使用scrollTop获取当前视口顶部距离页面顶部的高度：
let scrollTop = document.getElementById('scroll').scrollTop
将scrollTop与window.innerHeight相加获得当前视口底部距离页面顶部的高度：
let scrollBottom = scrollTop + window.innerHeight
根据特定div的高度为其设置相应的动画：
if (scrollTop & 20 && scrollBottom & (ribbonHeight + servicesHeight / 2)) {
intro1.classList.add('vertical-anim')
device1.classList.add('vertical-anim')
device2.classList.add('vertical-anim')
大功告成！
overflow属性
参考链接：
overflow 属性规定当内容溢出元素框时发生的事情。
当我在设计登录界面的卡片框的时候，我想在基本的卡片框上方露出一小截白边，这个技术使用`:before`伪类可以坐到，但也需要在改容器中设置`overflow`属性的值。
**`overflow:`效果：**
**`overflow:`效果：**
::before伪类
参考链接：
::before 会创建一个作为当前元素子元素的伪元素。常通过 content 属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。
::before { 样式 }
::before { content: "Hello world!"; }
::after伪类
参考链接：
::after伪元素匹配一个作为当前元素最后一个子元素的伪元素。常通过 content 属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。
我使用::after伪类为当前激活链接添加一个标记，效果如图：
box-shadow 属性
参考链接：
使用下面这个box-shadow属性：
: #666 0 0 10;
为载入进度圆环加上如下阴影效果：
绝对定位的水平居中
最近遇到一个需求，需要把用户头像嵌入到父级div的兄弟div上，完成的效果图如下：
一开始采用方式是``使用相对布局，父元素加上属性`text-align:`,但是无效，而且相对布局中的元素就算被改变位置之后，依旧会占据原来的位置，造成大面积留白，非常丑，故弃之。
后来尝试使用绝对布局，因为给``设定的宽度和高度是固定的，于是就可以结合left属性进行水平居中。
这两行代码的意思是，首先设置``的最左边距离左边框50%，然后因为半径是50px，所以通过设置margin-left将元素整体左移50px，使圆心水平居中。
参考文章：
我使用下面的代码：
对齐我的TapBar：
两端对齐，项目之间的间隔都相等，并且在交叉轴上居中对齐：
双十一的时候阿里云9.9元买云服务器，可惜没抢到，但是后来发现有个学生优惠49包半年也还还挺便宜于是就购买之。
服务器的操作系统：CentOS 6.5 64位，所以下面从0开始讲解Vue.js 2.0工程部署在操作系统为CentOS 6.5服务器的步骤。
首先，你当然得有台服务器……躲过了双十一还是得挨一刀啊=.=
Linux中创建用户
由于到手的是一台裸机，所以一切都得自己配，不过也好，温习一下以前学习的Linux基础知识~
*众所周知，生产环境中的Linux系统不推荐直接使用root 帐号，这是因为root权限最大，你的任何误操作就可能使数据找不回来，而普通用户对系统的操作是有限的。*
对于一个刚到手的新服务器，你的第一次SSH连接应该是以root的身份登录的，你需要手动添加一个普通用户。
下面讲解添加一个普通用户的基本步骤：
在Linux系统中，只有root用户才能够创建一个新用户，如下的命令将新建一个登录名 ‘xxx’的用户。
sudo useradd xxx
完成了这一操作后，你还应该使用passwd命令为其设置一个初始密码。输入该命令后，会系统会请求输入密码。
sudo passwd xxx
在生产环境中，我们经常需要提升普通用户的权限以完成某种操作，这时就要用到sudo命令，如果你按照上述的步骤，你应该会遇到下面这个错误：
XXX is not in the sudoers file
这是因为 ‘xxx’用户不在`sudoers`组中。
我参考这篇文章解决了这个问题：
现在，一个具有sudo权限的普通用户已经创建好了。
安装Node.js
众所周知，Linux的各种发行版的包管理器中的Node.js版本都相当之老，这也给新手带来了不少麻烦。
我尝试过以下几种安装Node.js的方法：
yum install, 版本太老。
nvm, 安装的都在本地，不能加 sudo的,sudo 回去/usr/bin 或/usr/local/bin下面去找的，遇到权限问题很蛋疼！
直接编译最新版的Node.js源代码，同时也要安装好多依赖包，相当麻烦。
直接下载使用最新的编译好的Node.js，方便快捷。
我参考了这篇文章：
vue-cli生成的项目可以使用npm run dev命令直接让程序跑起来，但是生产环境中还使用开发环境的服务器是不行的，我们需要的服务器性能要高，占用内存要小，并发性要好，于是我的目光投向了服务器界大名鼎鼎的Nginx.
在安装Nginx的工程中遇到的问题和安装Node.js类似，我参考下面这篇文章成功的安装的Nginx:
配置Nginx访问应用
在工程目录下使用如下代码生成dist目录
npm run build
参考官方教程添加一个server节点，其中的root参数绑定dist文件夹的绝对路径即可。
其中一开始遇到一个bug，
nginx 403 forbidden
查证后发现是权限问题，参考下面这篇文章，把nginx的启动用户改成目录的所属用户即可。
未完待续……
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：22223次
排名：千里之外
(1)(1)(2)(6)(1)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'关于Vuejs技术栈的知识汇总-js教程-PHP中文网QQ群微信公众号还没有收藏关于Vuejs技术栈的知识汇总前言上家公司的项目主要是使用jQuery和Angular1，然后自己学了React，没想到来到这家公司突然开始做vue，不过vue还是挺容易上手的。下面是vue技术栈的一些总结，都是来自官网，主要是自己对vue技术栈知识点的一些整理，因此此文很水，建议阅读我的上一篇文章Vuejs技术栈从CLI到打包上线实战全解析Vue独立构建和运行时构建有两种构建方式，独立构建和运行构建。它们的区别在于前者包含模板编译器而后者不包含。模板编译器的职责是将模板字符串编译为纯JavaScript的渲染函数。如果你想要在组件中使用template选项，你就需要编译器。生命周期具体查看官网的流程图，要注意的是created和mounted区别，created是vm实例已创建但未挂载，因此一些DOM操作应该放在mounted中。异步请求放在created或者mounted暂时没发现什么区别，如您知道有什么区别，请评论指出。计算(computed)属性模板内的表达式不应该包含太多的逻辑，对于任何复杂逻辑，都应当使用计算属性computed属性和methods不同的是计算属性是基于它们的依赖进行缓存的。computed属性和computed属性，通常更好的想法是使用computed属性而不是命令式的watch回调。虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的watcher。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。数组更新检测数组的变异方法(mutation method，会改变被这些方法调用的原始数组)会触发视图更新，有以下七个：push()
reverse()当使用非变异方法时，可以用新数组替换旧数组，或者使用Vue.set方法。对象更新可以用新对象替换旧对象，或者使用Vue.set方法Vue.set(vm.someObject, 'foo', 'bar')
this.someObject = Object.assign({}, this.someObject, { a:1, b:2 })事件处理器Vue.js为v-on提供了事件修饰符和按键修饰符表单控件绑定可以用v-model指令在表单控件元素上创建双向数据绑定。常见修饰符有.lazy、.number、.trim。也可以使用自定义事件的表单输入组件。组件Vue组件的API来自三部分：props,events和slots：Props允许外部环境传递数据给组件Events允许组件触发外部环境的副作用Slots允许外部环境将额外的内容组合在组件中。1）组件的data属性必须是函数2）父子组件在Vue.js中，父子组件的关系可以总结为 props down, events up 。父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。prop是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。另外，每次父组件更新时，子组件的所有prop都会更新为最新值。这意味着你不应该在子组件内部改变prop。如果你这么做了，Vue会在控制台给出警告。为什么我们会有修改prop中数据的冲动呢？通常是这两种原因：1.prop作为初始值传入后，子组件想把它当作局部数据来用；2.prop作为初始值传入，由子组件处理成其它数据输出。对这两种原因，正确的应对方式是：1.定义一个局部变量，并用prop的值初始化它：props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}2.定义一个计算属性，处理prop的值并返回。props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}注意在JavaScript中对象和数组是引用类型，指向同一个内存空间，如果prop是一个对象或数组，在子组件内部改变它会影响父组件的状态。3）非父子组件有时候两个组件也需要通信(非父子关系)。在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。在复杂的情况下，我们应该考虑使用专门的状态管理模式。4）.sync修饰符在一些情况下，我们可能会需要对一个prop进行『双向绑定』。2.0中移除了.sync，Vue2.3.0+又将其添加回来了，但是这次它只是作为一个编译时的语法糖存在，它会被扩展为一个自动更新父组件属性的v-on侦听器。如下代码&comp :foo.sync=&bar&&&/comp&会被扩展为：&comp :foo=&bar& @update:foo=&val =& bar = val&&&/comp&当子组件需要更新foo的值时，它需要显式地触发一个更新事件：this.$emit('update:foo', newValue)5）使用slot进行内容分发作用域插槽：接收从子组件中传递的prop对象。作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项6）动态组件、is特性和keep-alive指令7）子组件索引尽管有props和events，但是有时仍然需要JavaScript中直接访问子组件。为此可以使用ref为子组件指定一个索引ID。异步更新队列虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。过渡效果Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具：在CSS过渡和动画中自动应用class可以配合使用第三方CSS动画库，如Animate.css在过渡钩子函数中使用JavaScript直接操作DOM可以配合使用第三方JavaScript动画库，如Velocity.js1）单元素/组件的过渡Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加过渡条件渲染（使用v-if）条件展示（使用v-show）动态组件组件根节点2）多个元素的过渡对于原生标签可以使用 v-if/v-else3）多个组件的过渡多个组件的过渡我们可以使用动态组件。4）列表过渡Render函数和JSX自定义指令和Angular的指令类似，主要操作DOM，下面是一个滚动加载的指令，holder暂时没想到什么更好的处理方法：let scrollCallback = function (callback) {
let windowH = window.innerHeight
let getDocumentHeight = function () {
var body = document.body
var html = document.documentElement
return Math.max(
body.offsetHeight,
body.scrollHeight,
html.clientHeight,
html.offsetHeight,
html.scrollHeight
let scrollH = document.documentElement.scrollTop || document.body.scrollTop
if (windowH + scrollH &= getDocumentHeight() - (this.holder || 20)) {
callback()
let callBackWarpped
export default {
bind (el, binding, vnode) {
let holder
if (vnode.data && vnode.data.attrs && vnode.data.attrs['scroll-placeholder']) {
holder = parseInt(vnode.data.attrs['scroll-placeholder'])
holder = 20
callBackWarpped = scrollCallback.bind({el, holder}, binding.value)
window.addEventListener('scroll', callBackWarpped, false)
unbind: function () {
window.removeEventListener('scroll', callBackWarpped, false)
}混合混合是一种灵活的分布式复用Vue组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。插件1）创建插件Vue.js的插件应当有一个公开方法install。这个方法的第一个参数是Vue构造器 , 第二个参数是一个可选的选项对象。2）使用插件通过全局方法Vue.use()使用插件:// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)也可以传入一个选项对象:Vue.use(MyPlugin, { someOption: true })vue-router两种导航方式1）router-link声明式导航&router-link to=&/foo&&Go to Foo&/router-link&router-link对应的路由匹配成功，将自动设置class属性值.router-link-active。2）编程式导航// 字符串
router.push('home')
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})重命名(redirect)和别名(alias)两种路由模式vue-router默认hash模式，也可以设置为路由的history模式。导航钩子vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。路由meta一个路由匹配到的所有路由记录会暴露为$route对象（还有在导航钩子中的route对象）的$route.matched数组。因此，我们需要遍历$route.matched来检查路由记录中的meta字段。过渡动效router-view是基本的动态组件，所以我们可以用transition组件给它添加一些过渡效果。数据获取有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。导航完成之前获取：导航完成前，在路由的enter钩子中获取数据，在数据获取成功后执行导航。滚动行为(scrollBehavior)注意: 这个功能只在HTML5 history模式下可用。路由懒加载当打包构建应用时，Javascript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。结合Vue的异步组件和Webpack的code splitting功能,轻松实现路由组件的懒加载。const Foo = resolve =& require(['./Foo.vue'], resolve)
const router = new VueRouter({
{ path: '/foo', component: Foo }
})router-link可以设置tag、append、active-class、exact等属性有时候我们要让 &激活时的CSS类名& 应用在外层元素，而不是a标签本身，那么可以用router-link渲染外层元素，包裹着内层的原生a标签：&router-link tag=&li& to=&/foo&&
&a&/foo&/a&
&/router-link&在这种情况下，a将作为真实的链接（它会获得正确的 href 的），而&激活时的CSS类名&则设置到外层的li。Router构造配置routes、mode、base、linkActiveClass、scrollBehavior对组件注入1）注入的属性通过在Vue根实例的router配置传入router实例，下面两个属性成员会被注入到每个子组件。$router：router实例$route：当前激活的路由信息对象。这个属性是只读的，里面的属性是immutable（不可变）的，不过你可以watch（监测变化）它。2）允许的额外配置：beforeRouteEnter、beforeRouteLeavevuexstate1)单一状态树Vuex使用单一状态树--是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着，每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。2）在Vue组件中获得Vuex状态最好在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过this.$store访问到。而不是在每个需要使用state的组件中需要频繁地导入。3）mapState辅助函数当一个组件需要获取多个状态时候，可以使用mapState辅助函数帮助我们生成计算属性，这样可以简化代码书写。mapState函数会返回一个对象，然后可以使用对象展开运算符将它与局部计算属性混合使用。4）不要滥用vuex使用Vuex并不意味着你需要将所有的状态放入Vuex。虽然将所有的状态放到Vuex会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。gettersgetters用来从store中的state中派生出一些状态，例如对列表进行过滤并计数：computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo =& todo.done).length
}getters可以认为是store的计算属性。和state类似，有mapGetters辅助函数。mutations更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutations非常类似于事件：每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数1）提交载荷（Payload）你可以向mit传入额外的参数，即mutation的载荷（payload）：// ...
mutations: {
increment (state, n) {
state.count += n
mit('increment', 10)2）Mutations需遵守Vue的响应规则3）使用常量替代Mutation事件类型4）mutation必须是同步函数5）在组件中提交Mutations你可以在组件中使用this.$mit('xxx')提交mutation，或者使用mapMutations辅助函数将组件中的methods映射为mit调用（需要在根节点注入store）。actionsactions类似于mutation，不同在于：actions提交的是mutation，而不是直接变更状态。actions可以包含任意异步操作。1）在组件中分发Action你在组件中使用this.$store.dispatch('xxx')分发action，或者使用mapActions辅助函数将组件的methods映射为store.dispatch调用（需要先在根节点注入store）2）组合ActionsAction通常是异步的，那么如何知道action什么时候结束呢？更重要的是，我们如何才能组合多个action，以处理更加复杂的异步流程？首先，你需要明白store.dispatch可以处理被触发的action的回调函数返回的Promise，并且store.dispatch仍旧返回Promise。使用async/await会更加简单：// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}Modules由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就有可能变得相当臃肿。为了解决以上问题，Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
store.state.a // -& moduleA 的状态
store.state.b // -& moduleB 的状态插件Vuex的store接受plugins选项，这个选项暴露出每次mutation的钩子。Vuex插件就是一个函数，它接收store作为唯一参数。严格模式开启严格模式，仅需在创建store的时候传入strict:true在严格模式下，无论何时发生了状态变更且不是由mutation函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更--请确保在发布环境下关闭严格模式，以避免性能损失。表单处理测试热重载以上就是关于Vuejs技术栈的知识汇总的详细内容，更多请关注php中文网其它相关文章！共3篇728点赞收藏分享：.&猜你喜欢PHP中文网：独家原创，永久免费的在线，php技术学习阵地！
All Rights Reserved | 皖B2-QQ群:关注微信公众号}