vue城市列表字母（.vue文件名 首字母什么时候用大写，什么时候用小写 有规范吗）

本文目录

• .vue文件名 首字母什么时候用大写，什么时候用小写 有规范吗
• vue 列表展开列表
• Vue实现类似通讯录功能（上）
• vue项目中，部门列表好几个地方都用上,用vuex怎么管理
• vue 移动端如何获取ul列表中每项的id
• 我想问一下vue字幕怎样一个个出来

.vue文件名 首字母什么时候用大写，什么时候用小写 有规范吗

在Vue.js的开发中，通常遵循以下规范来使用.vue文件名的大小写：

• 单个组件的.vue文件名应始终使用首字母大写的驼峰命名法。例如：HelloWorld.vue

• 对于多个单词组成的组件名，除了第一个单词以外，每个单词的首字母都应该大写。例如：UserSettings.vue

• 在引用.vue组件时，应该总是使用正斜杠“/”来分隔目录和文件名。即使在Windows平台上也应该如此。同时，目录和文件名都应该全部小写。例如：import HelloWorld from ’@/components/HelloWorld.vue’;

这些规范有助于提高代码的可读性和可维护性，并且与Vue.js社区的通用惯例相符合，因此建议开发者在Vue.js项目中遵循这些规范。

vue 列表展开列表

《el-table

    :data="table1"

    :row-key="getRowKeys"

    :expand-row-keys="expands"

    v-loading="listLoading"

    border

    @cell-mouse-enter="mouseOver"

    @expand-change="expand"

    style="width: 100%"》

    《el-table-column type="expand" 》

        《template slot-scope="props"》

            《el-table :data="props.row.table2" border》

                《el-table-column prop="name" label="名称"》

                《el-table-column prop="description" label="描述" show-overflow-tooltip》

        《/el-table》

        《/template》

    《/el-table-column》

《el-table》
script如下：

《script》

    export default {

        filters:{},

        data() {

            return {

                list: null,

                total: null,

                listLoading: false,

                // 获取row的key值

                getRowKeys(row) {

                    return row.id;

                },

                expands:,

            }

        },

        methods: {

            mouseOver(row){

                if(row.table2.length》0){

                    return false;

                }

                const that = this;

                let refId = row.id;

                let list = this.table1;

                this.$api.后台js.findByRefId(refId).then(resp=》{

                    that.table2 = resp;

                    for (let i = 0; i 《 list.length; i++) {

                        if(list.id==taskId){

                            list.table2 = resp;

                        }

                    }

                    that.table1 = list;

                    console.log(that.table1)

                });

            },

            expand(row,expandedRows){

                return;

            },
            getList(){

            }

        },

        created() {

            this.getList()

        }

    }

《/script》
效果如下：
感谢阅读。

Vue实现类似通讯录功能（上）

不是很好描述这种功能，大概和通讯录一样，按名称分组，右侧有字母列表，可进行选择。

（贴图出来比较一目了然）

使用 Vue 实现，这里需要安装一个插件 better-scroll ，安装引入流程可进上面链接的 github 上，按要求完成便可。
静态布局部分要自己好好写，这里就不说啦。

我这里写的是城市选择列表，但是功能和通讯录是一样的，首先在城市父组件内引入 axios ，引入这个是为了发起 ajax 请求。
然后在 mounted 这个钩子函数内，发起 ajax 请求，也可以写在 created 这个钩子函数内，但是最好写在 mounted 内。
然后请求函数的具体执行函数写在 methods 内，handleGetCityInfoSucc是成功接收的回调函数。这里的操作是先把返回结果打印出来。
接下来去 data 部分创建两个变量，一个 cities 是个对象，一个 hotCities 是个数组，默认都为空。
然后将返回结果赋值给它们。
接下来就是父组件传值给子组件。
父组件通过绑定属性传递给子组件
第二层循环是第一层的item的内部循环，所以图中第二层循环写的是 innerItem of item ， item 是第一层循环中的 (item, key) of cities 。

双层循环的时候，如果父级的 key 值和子级循环的 key 一样了，也没有关系，只要父级的 key 值不重复就行了

字母索引组件的 ABCD... 的索引，同样可以用上面的 cities 数据，也就是第一层循环就能将索引都渲染出来。

vue项目中，部门列表好几个地方都用上,用vuex怎么管理

部门列表好几个地方都用得上，想管理的话可以把部门列表按分类进行分类整理，这样在处理的时候将会更加的轻松和容易。

vue 移动端如何获取ul列表中每项的id

《!DOCTYPE html》
《html》
《head》
《meta charset="utf-8"》
《title》test《/title》
***隐藏网址***
《/head》
《body》
《div id=’app’》
《ul》
《li v-for="(item,index) in list" :key="index" @click="dianji(index)"》{{item.name}}《/li》
《/ul》
《/div》
《script》
var vm = new Vue({
el:’#app’,
data(){
return{
list:[
{name:’zjq’,age:’18’,meth:’男’},
{name:’ljp’,age:’17’,meth:’男’},
{name:’zyl’,age:’18’,meth:’女’},
]
}
},
methods: {
dianji(index){
console.log(index);
}
}
})
《/script》
《/body》
《/html》
不知道 是不是你想要的结果 点击每个li 标签 打印当前选中li的id

我想问一下vue字幕怎样一个个出来

vue字幕一个一个出来的方法是：
1、首先打开vuevlog软件，将视频分段后，点击下方的文字选项。
2、点击弹出菜单中的字幕功能。
3、在打开的字幕样式窗口中，点击字幕样式选项，选择自己喜欢的字幕样式与格式，再点击返回按钮。
4、回到字母页面后，点击下方红色的加号按钮。
5、在打开的文字页面中，输入字母内容，再点击右上角的“勾”按钮。
6、回到字幕页面中，点击向右的倾斜符号，将其拖动至字幕结束的地方，再点击完成按钮。
7、回到字母页面中，拖动虚线至第二段字幕出现处，点击红色加号，使用同样的方法添加字幕。
***隐藏网址***