关于vue开发中的一些记录(长期不定时持续更新)

点击跳转

<el-menu-item @click="routerPush('one')" index="选项2">数据测试</el-menu-item> routerPush (name) { this.$router.push({name: name}) <!--this.$router.push({name: name, params:{userid: userid})--> }, <!--用 vue-router 跳转的时候可以把参数写进 query里 --> this.$router.push({name:'articleDetail, query:{articleId: articleId}}); <!--url 就会像 http://xxx.xxx.xxx/articleDetail?articleId=123，这样无论你怎么刷新 articleId 都不会丢失--> <!--this.articleId = this.$route.query.articleId; 来获取id--> <!--要用 params 传参的话，可能需要在你的路由路径里也加上这个参数，比如你用--> <!--this.$router.push({name:'articleDetail, params:{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 内容实时渲染

<div :data-text='choice.blueText'>{{choice.lesson}}</div> # &为less父级选择器 &::after { content: attr(data-text); }

动态加载 卸载组件

# 在app.vue里 <!-- 这里是需要keepalive的 --> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!-- 这里不会被keepalive --> <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 <label @click="choose($event)" :class="sex ? 'active':'unactive'">男</label> <label @click="choose($event)" :class="!sex ? 'active':'unactive'">女</label> #js data () { return { sex: true } }, methods: { choose ($event) { if ($event.target.className != 'active') { this.sex = !this.sex } } }