点击跳转
<el-menu-item @click="routerPush('one')" index="选项2">数据测试el-menu-item>
routerPush (name) {
this.$router.push({name: name})
},
this.$router.push({name:'articleDetail, query:{articleId: articleId}});
routes: [
{
path: '/articleDetail/:articleId',
name: 'articleDetail'
}
]
watch监听
watch: {
value:{
handler:function(val,oldval){
this.input = ''
this.xzqh = ''
this.cz_name = ''
},
deep:true
}
},
路由重定向
{
path: '*',
redirect: '/login'
}
nextTick获取更新后的DOM的Vue方法
$nextTick(() => {})
# 官方文档解释如下:
# 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
#例子:
new Vue({
el: '#app',
created() {
this.$nextTick(() => {
//代码
})
}
})
关于css伪类 content 内容实时渲染
data-text='choice.blueText'>{{choice.lesson}}
# &为less父级选择器
&::after {
content: attr(data-text);
}
动态加载 卸载组件
# 在app.vue里
<keep-alive>
<router-view v-if="$route.meta.keepAlive">router-view>
keep-alive>
<router-view v-if="!$route.meta.keepAlive">router-view>
# 在设置路由信息的时候这样
{
path: '',
name: '',
component: ,
meta: {keepAlive: true} // 这个是需要keepalive的
},
{
path: '',
name: '',
component: ,
meta: {keepAlive: false} // 这是不会被keepalive的
}
live-server的使用
# NPM全局安装
npm install -g live-server
#在项目根目录使用命令
live-server
vue事件获取当前元素
@click="click($event)"
# 当前元素
console.log(event.target)
安装sass
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
#webpack.base.conf.js
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
vue点击当前元素 并添加class
#html
#js
data () {
return {
sex: true
}
},
methods: {
choose ($event) {
if ($event.target.className != 'active') {
this.sex = !this.sex
}
}
}