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

点击跳转

<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
"choose($event)" :class="sex ? 'active':'unactive'">男
"choose($event)" :class="!sex ? 'active':'unactive'">女
#js
data () {
      return {
          sex: true
      }
},
methods: {
  choose ($event) {
      if ($event.target.className != 'active') {
          this.sex = !this.sex
      }
  }
}