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)
}
}
