vue学习笔记

记录一些容易忘记的vue相关知识点，提高工作效率。

1、使页面支持 sass语法

安装sass依赖sass-loader 和node-sass

npm install sass-loader node-sass --save-dev

然后在webpack.base.conf.js中添加相关配置:

{
	test: /\.s[a|c]ss$/,
	loader: 'style!css!sass'
}

就可以在.vue的文件中使用了：

<style scoped lang="sass">
</style>

vue2.0 直接写 lang="scss" 老报错，可以使用

<style rel="stylesheet/scss" lang="sass"></style>

2、vue2 较 vue1 的几点变化

1、丢弃$index和$key

<tr v-for="list in lists">
{{list}}
</tr>
// 或者
<tr v-for="（list,index）in lists">
{{index}}
</tr>

2、使用组件替换v-link

<a v-link="'/about'">About</a>
// 替换成
<router-link to="/about">About</router-link>

this.$route.router.go({ name: 'user', params: { userId: 123 }});
// 替换成
this.$router.push({ name: 'user', params: { userId: 123 }});

3、this.$root 用 this.$parent 来代替

4、transition 改成内置组件<transition>，还有个 <transition-group>

5、路由挂钩

activate 由 beforeRouteEnter 替换
canActivate 由 canActivate 替换
deactivate 使用 beforeDestroy 或者 destroyed 钩子作为替代
canDeactivate 由 beforeRouteLeave 替换

3、报错记录

1、vue 2.0 Failed to mount component: template or render function not defined

解决办法是在webpack.config.js中设置：

resolve: {
       alias: {
           vue: 'vue/dist/vue.js',
       }
   }