Vue学习笔记

Vue学习笔记

1. 创建项目

npm install -g @vue/cli
vue create hello-world

2. Vue Router

// 安装包
npm install vue-router

// main.js
import Router from 'vue-router'
Vue.use(Router)

// path: '/' 代表首页
// 这里需要有name, 
const routes = [
  { name: 'AnimalList', path: '/', component: AnimalList },
  { name: 'AnimalDetail', path: '/animal/:id', component: AnimalDetail}
]

// 用name这样参数才会被详情页面接收到
// 如果使用了path，params会被忽略
this.$router.push({
        name: "AnimalDetail",
        params: {
          name: row.name
        }
      })

Issues&Solutions

1. Vue运行环境配置: Compiler版本和Runtime 版本

• Issue
  main.js中添加<template>代码后前端console报错

You are using the runtime-only build of Vue where the template compiler is not available. 
Either pre-compile the templates into render functions, or use the compiler-included build.

• Reason
  在项目配置的时候，默认 npm 包导出的是运行时构建，即 runtime 版本，不支持编译 template 模板。
  vue 在初始化项目配置的时候，有两个运行环境配置的版本：Compiler 版本、Runtime 版本。

• Compiler 版本
  可以对 template 模板内容进行编译（包括字符串模板和可以绑定的 html 对象作为模板），例如：

new Vue({
  el: "#box",
  template: "<div>{{msg}}</div>",
  data: {
    msg: "hello"
  }
});

• Runtime 版本
  使用 vue-loader 加载.vue 文件（组件文件）时，webpack 在打包过程中对模板进行了渲染。
  Solution: 根目录创建一个vue.config.js文件夹，加上如下代码即可。

// vue cli 3
module.exports = {
  runtimeCompiler: true
}

3. 引入ElementUI

ElementUI为新版的vue-cli(即vue-cli@3)准备了相应的 Element 插件，
你可以用它们快速地搭建一个基于Element的项目。

vue add element

// main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

4. 引入vuex

npm install vuex --save

// main.js
import Vuex from 'vuex'
Vue.use(Vuex)

// store: username就作为全局变量
const store = new Vuex.Store({
  state: {
    username: ''
  },
  mutations: {
    setUsername(state, username){
      state.username = username
    }
  },
  getters: {
    username: state => state.username
  },
})

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

// 使用
this.$store.commit('setUsername', this.loginForm.username)

import { mapGetters } from 'vuex'
created() {
    // eslint-disable-next-line no-debugger
    console.log(this.$store.getters.username)
    console.log(this.username)
  },
// mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
computed: { ...mapGetters(['username'])},

5. 组件间传值

5.1 父组件向子组件传值

// 子组件用props接数据
export default {
  props: {
    value: { type: String, default: '', required: false },
    disabled: { type: Boolean, default: false, required: false },
    size: { type: String, default: undefined, required: false },
    placeholder: { type: String, default: '请选择钢号', required: false }
  }
// watch检测父组件值变化
watch: {
    value(val) {
      this.steelSerialLabel = this.value
    }
  }
// 父组件调用
<steel-serial v-model="steelSerial" :disabled="disableEdit"/>
...
import steelSerial from '@/views/crm/components/steelSerial'

5.2 子组件向父组件传值

子组件通过this.$emit()的方式将值传递给父组件

// 子组件: 这里的func是父组件中绑定的函数名
this.$emit('func',this.msg)

// 父组件
<steel-serial v-model="steelSerial" :disabled="disableEdit" @func="getMsgFormSon" />
...
methods: {
    getMsgFormSon(data){
        console.log(this.data)
    }
}