1、数据结构规范
-
config 放置页面的基础相关配置数据，如下拉框数据，在页面加载时获取的数据，基本不变的数据。
// 页面基础配置 config: { //问题类型 question_type: [], //项目类型 projects: [], //录入人 users: [] } -
页面的主体数据。
list: { // 列表筛选条件 filter: { search: null, project: null, problem_type: null, user: null, offset: 0, limit: 15, }, // 列表总数 total: 0, // 列表当前页 current: 1, // 列表结果 results: [] } -
常用的表格自适应高度。
table_height: window.innerHeight - 66 - 60 - 92-40 -
常用缩进两字符。
2、常用方法命名
在前端开发中，有一些常见的命名规范和约定，可以提高代码的可读性和可维护性。以下是一些常见的 JavaScript 前端代码命名规范：
1.变量和函数命名：
- 使用驼峰命名法（camelCase）：首字母小写，后续单词首字母大写，例如：
myVariable,calculateSum(). - 避免使用单个字符作为变量名，除非是用于临时变量或循环计数器。
- 使用具有描述性的名称，以便于理解变量或函数的用途。
- 对于常量，可以使用全大写字母和下划线的命名方式，例如：
MAX_COUNT.
2.类和构造函数命名：
- 使用帕斯卡命名法（PascalCase）：每个单词的首字母都大写，例如：
Person,Car. - 类名应该是名词或名词短语，描述类的实体或概念。
3.文件命名：
- 使用有意义的文件名，能够描述文件的内容和用途。
- 文件名通常使用小写字母和连字符（kebab-case）的组合，例如：
my-script.js,styles.css.
4.CSS 类和 ID 命名：
- 使用有意义的名称，能够描述元素的用途或样式。
- 使用连字符（kebab-case）或下划线（snake_case）的命名方式，例如：
.container,.btn-primary,#header.
3、组件间通信方式
1） 父子组件间的通信方式
1.props
-
props传递数据：
<Demo name="xxx"/>，接受数据在：第一种方式（只接收）：props:['name']，第二种方式（限制类型）：props:{name:String}，第三种方式（限制类型、限制必要性、指定默认值），props可以传递数据，也可以传递函数。 -
props是只读，要是更改的话可以存入data中，然后修改data中的数据，不要动传过来的props
// 父组件 <template> <div id="father"> <son :msg="msgData" :fn="myFunction"></son> </div> </template> <script> import son from "./son.vue"; export default { name: father, data() { msgData: "父组件数据"; }, methods: { myFunction() { console.log("vue"); } }, components: { son } }; </script> //子组件 // 子组件 <template> <div id="son"> <p>{{msg}}</p> <button @click="fn">按钮</button> </div> </template> <script> export default { name: "son", props: ["msg", "fn"] }; </script>
2.$emit
- $emit 绑定一个自定义事件，当这个事件被执行的时候就会将参数传递给父组件，而父组件通过v-on监听并接收参数
// 父组件
<template>
<div class="section">
<com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article>
<p>{{currentIndex}}</p>
</div>
</template>
<script>
import comArticle from './test/article.vue'
export default {
name: 'comArticle',
components: { comArticle },
data() {
return {
currentIndex: -1,
articleList: ['红楼梦', '西游记', '三国演义']
}
},
methods: {
onEmitIndex(idx) {
this.currentIndex = idx
}
}
}
</script>
//子组件
<template>
<div>
<div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div>
</div>
</template>
<script>
export default {
props: ['articles'],
methods: {
emitIndex(index) {
this.$emit('onEmitIndex', index) // 触发父组件的方法，并传递参数index
}
}
}
</script>
3.ref和$ref
-
ref可以给组件和标签打上标签，$ref可以获得对应标签的组件实例或真实的DOM元素
//父组件 <template> <child ref="child"></component-a> </template> <script> import child from './child.vue' export default { components: { child }, mounted () { console.log(this.$refs.child.name); // JavaScript this.$refs.child.sayHello(); // hello } } </script> //子组件 export default { data () { return { name: 'JavaScript' } }, methods: { sayHello () { console.log('hello') } } }
4.$parent / $children(不常用)
-
使用������可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法），可以层级追溯如�ℎ��.parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法），可以层级追溯如this.parent.$parent。
-
使用 $children 可以让组件访问子组件的实例，但是， $children 并不能保证顺序，并且访问的数据也不是响应式的。用ref比较方便
2） 兄弟组件间的通信方式
- 通过父子组件间的通讯方式，让父组件充当代理人中间人，如通过 $parent + $refs 以父组件为中间人来获取到兄弟组件，也可以进行通信。
- 全局事件总线
- vuex
3） 跨代的通信方式
1.provide/inject
此类主要是用于更深层嵌套组件的结构，使用这种方式可以更快捷更方便,且子孙后代后可以使用inject
//父组件
<template>
<child />
</template>
<script>
import Child from "./child";
export default {
name: "parent",
components: {Child},
provide() {
return {"eventName": "参数"}
}
}
</script>
//注册全局事件总线
<template>
<div>{{eventName}}</div>
</template>
<script>
export default {
name: "child",
inject: ['eventName'],
}
</script>
4） 任意组件的通信方式
1.全局事件总线
-
全局事件总线其实就是一个中间人，组件与组件之间的通信需要借助于这个中间人，在一个组件中向其绑定自定义事件，然后在另一个组件触发向全局事件总线中绑定的这个自定义事件并传递值，进而实现通信。全局事件总线创建在new vue中通过beforeCreate生命周期钩子创建，在。
-
//创建 new Vue({ el:'#app', render: h => h(App), //定义全局事件总线 $bus beforeCreate(){ Vue.prototype.$bus=this; } }) //注册全局事件总线 //A组件 export default { name:'componentA', data() { return {} }, mounted(){ this.$bus.$on('do',(data)=>{ //为全局事件总线绑定自定义事件do console.log('我收到了B组件传来的姓名：',data); }) } } //触发全局事件总线 //组件B export default { name:'componentB', data() { return { name:'张三' } }, methods:{ get:function(){ //在该组件的模板中添加一个按钮点击执行该函数 get this.$bus.$emit('do',this.name) //触发自定义事件do 把this.name穿给组件A }, } } //销毁全局事件总线 //A组件 export default { name:'componentA', data() { return {} }, mounted(){ this.$bus.$on('do',(data)=>{ //为全局事件总线绑定自定义事件do console.log('我收到了B组件传来的姓名：',data); }) }, beforeDestroy(){ this.$bus.$off('do') //解绑自定义事件do } }
2.vuex
3.消息的订阅与发布（基本不怎么用）
4.存入会话存储里面
5）vuex的使用方法
1.创建vuex
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
-
在
main.js中创建vm时传入store配置项...... //引入store import store from './store' ...... //创建vm new Vue({ el:'#app', render: h => h(App), store })
3.读取数据
- 组件中读取vuex中的数据：
$store.state.sum - 组件中修改vuex中的数据：
$store.dispatch('action中的方法名',数据)或$store.commit('mutations中的方法名',数据)action中的方法常常有网络请求，没有的话可以跳过直接调用$store.commit - getters相当于vuex的计算方法，可以对store里面的数据进行加工。
4.四种map映射方法 数据写在computed里面，方法写在methods里面
-
mapState方法：用于帮助我们映射
state中的数据为计算属性computed: { //借助mapState生成计算属性：sum、school、subject（对象写法） ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性：sum、school、subject（数组写法） ...mapState(['sum','school','subject']), }, -
mapGetters方法：用于帮助我们映射
getters中的数据为计算属性computed: { //借助mapGetters生成计算属性：bigSum（对象写法） ...mapGetters({bigSum:'bigSum'}), //借助mapGetters生成计算属性：bigSum（数组写法） ...mapGetters(['bigSum']) }, -
mapActions方法：用于帮助我们生成与
actions对话的方法，即：包含$store.dispatch(xxx)的函数methods:{ //靠mapActions生成：incrementOdd、incrementWait（对象形式） ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) //靠mapActions生成：incrementOdd、incrementWait（数组形式） ...mapActions(['jiaOdd','jiaWait']) } -
mapMutations方法：用于帮助我们生成与
mutations对话的方法，即：包含$store.commit(xxx)的函数methods:{ //靠mapActions生成：increment、decrement（对象形式） ...mapMutations({increment:'JIA',decrement:'JIAN'}), //靠mapMutations生成：JIA、JIAN（对象形式） ...mapMutations(['JIA','JIAN']), }
7114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
