[Vue] 3. 奇奇怪怪的经验

animalcoder

墨衍会员 · AI 创作全网分发码龄9年

关注

原创最新推荐文章于 2026-07-14 13:44:02 发布 514 阅读 AI 写同款· GEO 优化 ›

【AI】使用Cursor和AI编程生成的VUE前端框架本项目是一个基于VUE.js的前端框架，结合了登录、图形验证码、权限校验等常用功能模块。通过与Cursor AI交互生成的代码，展示了AI在编程中的潜力与效率。阅读详情

1.给鼠标换图标（相对路径）

全局更换：在App.Vue中<style>添加如下代码

html,body{
   /*cursor: pointer;*/
   cursor: url('../static/image/2.png'),auto;
}

目录结构如图，注意图片要32*32以下

2.Vue中添加live2d

效果：

参考：https://www.jianshu.com/p/29500e047d7c

注意一定要把live2dw放入static文件夹中(Vue-cli3.0以下)，相对路径自己调

注意一定要把live2dw放入public文件夹中(Vue-cli3.0以上)，相对路径自己调

3.获取本地json的值

效果：第一行是json的文本，第二行是“test“对应”的值

实现：xxx.Vue代码如下使用JSON.stringify将Object变成string

<div>
       <p>{{json}}</p>
       <p>{{json.test}}</p>
</div>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            msg:"hello",
            json:""
        }
    },
    methods:{
        getJson(){
           axios({
               url: '/static/json/1.json',
               method: 'get',
           }).then((res)=>{
               this.json=res.data;
               console.log("???"+JSON.stringify(res.data));
           })
        }
    },
    created(){
        this.getJson();
    }
}
</script>

注意相对路径

4.Vue的自适应高度布局采用flex布局示例

效果：

xxx.Vue 如下

<div class="flex">
            <div class="header">top</div>

            <div class="flex-item"> 
                <div>
                    <p>{{json}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                    <p>{{json.test}}</p>
                </div>
            </div>

            <div class="footer">bottom</div>
</div>

重点是下面的css(带注释)

<style>
  .flex {
    display: flex;         /*父级元素：声明是flex布局*/
    flex-direction: column;/*使得子级div里面的块 竖向排列 */
    height: 100vh /*vh就是当前屏幕可见高度的1%，也就是说height:100vh == height:100%;*/ 
  }
  .flex-item {
    flex: 1;/*假设有3个元素123排列flex，2加上"flex:1" => 2展开铺满。
              假设有4个元素1234排列flex，2、3都加上"flex:1" => 2、3平均展开铺满。
              生效的前提是父级元素声明了flex布局跟100%高度*/
    overflow: auto;/*如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。*/
  }
  .footer,.header{
      background:black;
      color: blanchedalmond;
      min-height: 60px;
  }
</style>

5.css插入图片

 <img src="../../static/image/2.png" />

目录结构：

6.垂直居中的骚操作

知识点：当父元素设置了弹性布局flex并且设置了高度后，只要设置元素的margin:auto就可以实现元素的垂直居中了

然后用<el-col>来水平布局，好看一点

效果：

父级元素：

子级元素：

7.试试导航栏菜单el-menu：

效果：http://localhost:8080/#/Hellocopy/Son1

http://localhost:8080/#/Hellocopy/Son2

实现：在index.js 声明父子组件如果是Vue-cli3.0以上这里就别用懒加载

 {
      path: '/Hellocopy',
      name: 'Hellocopy',
      component: Hecopy,   //爸爸
      children: [
        {
          path: 'Son1',
          name: 'Son1',
          component: () => import('@/components/Son1')//绑定儿子组件，懒加载
        },
        {
          path: 'Son2',
          name: 'Son2',
          component: () => import('@/components/Son2')//绑定儿子组件，懒加载
        }
      ]
}

项目结构图

主页面Hecopy.Vue分为header+中间+footer三层，

用flex布局解决垂直布局，el-col解决水平布局。

header里引入导航菜单栏（须有element-ui依赖）

<div class="header">
        <el-col span="6">
          <h3>title</h3>
        </el-col>
        <el-col span="9">
          <h3></h3>
        </el-col>
        <el-col span="6">
          <el-menu
            :default-active="this.$route.path"
            class="el-menu-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="white"
            text-color="#2E131B"
            active-text-color="#FA6690"
            router="true"
            mode="horizontal"<!-- 竖着，可以改成横着 -->
          >
            <el-menu-item index="/Hellocopy/Son1">
              <!-- 配置子页面 -->
              <i class="el-icon-menu"></i>
              <span slot="title">列表</span>
            </el-menu-item>

            <el-menu-item index="/Hellocopy/Son2">
              <!-- 配置子页面 -->
              <i class="el-icon-menu"></i>
              <span slot="title">个人中心</span>
            </el-menu-item>
          </el-menu>
        </el-col>
</div>

中间层加入这个，router-view声明儿子的路由出口

      <div class="flex-item">
        <div class="item">
          <router-view></router-view>
        </div>
      </div>

这样就能用el-menu导航了

8.导入element-ui

在命令行跑npm i element-ui -S 、 npm install

main.js加入如下代码

import ElementUI from "element-ui"
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false;
Vue.use(ElementUI);

9.取消ul的偏移与点点

ul{
        list-style: none;
        margin:0;padding:0;
}

10.Vue函数

关键词：Es6 箭头函数普通函数 this

xxx.Vue，代码如下

功能：按年龄age查找数组lists1的函数

    
data(){
    return {
     lists1:[{name:"123",age:"32"},{name:"1123",age:"323"}]
    }
},



methods:{
    Add2(id){ //写法1
       console.log(this.lists1.find(todo=>todo.age===id))
       return this.lists1.find(todo=>todo.age===id)
    }
    Add2:function(id){ //写法2
       console.log(this.lists1.find(todo=>todo.age===id))
       return this.lists1.find(todo=>todo.age===id)
    }
    Add2:(id)=>{//写法3   报错：this.lists1找不到
       console.log(this.lists1.find(todo=>todo.age===id))
       return this.lists1.find(todo=>todo.age===id)
    }
}

ES6中写法1,2等价。

坑点1：:methods中用箭头函数的话（比如写法3）（写法3会报错：找不到list1），

报错原因：在XXX.vue中，支持Vue实例.xxx来访问data(){}中的数据

用了箭头函数后，this不是指向Vue实例了，而是指向前一花括号method，表示undefined，所以报错。

然后咱们来细品，看下面，箭头函数实际上就是一个缩写（第一、第二行等价（不考虑this的话））

箭头函数的XX => { } ， XX是参数，后面{ }是函数体

this.lists1.find(todo=>todo.age===id)

this.lists1.find(function (todo) { return todo.age === id; });

let x=todo=>todo.age===id
console.log(this.lists1.find(x))

里面todo表示数组元素，相当于 c++ for(auto i:list){} 里面的i

第三行可以看到数组.find() 支持函数变量作为参数。

坑点3：如果是非Vue,比如说store.js里面用Vuex，访问state的变量就有问题了，this.list,this.state.list，都找不到

store.js如下：功能跟上面一样：按title1 查找数组lists的函数

export default new Vuex.Store({ 
     state:{//状态
        lists:[{title1:"test",content1:"test"}]
     },
     getters: {
        getTodoById: (state) => (id) => {  //写法1
            return state.lists.find(todo => todo.title1 === id)
        },
        getTodoById2:function(state,actions){//写法2
            let x=function(id) {
                console.log("action:",actions)
                return  state.lists.find(todo => todo.title1 === id)
            }
            return x;
        },
        getTodoById2(id) { //写法3
            return  this.lists.find(todo => todo.title1 === id)
        }    
    }   



})

你会发现，写法3此时报错了，原因看红字

写法12是等价的。多箭头函数，把第一层的state传进去，

利用函数闭包（嵌套函数）的性质（里层函数能访问到外层函数的变量），访问到最外层的state

11.this.$xxxx

文档：https://cn.vuejs.org/v2/api/#vm-data

目前用过 this.$options.name 访问当前Vue中的name变量

this.$root.xx可以访问main.js里的变量

export default {
    name:'List',
}

12 v-bind v-on v-model {{}}

https://blog.youkuaiyun.com/xiaolongqinghua/article/details/86702609

v-bind等于 : 绑定标签的属性值比如<a>的href <a :href="url"/> data(){return {url:"xxx.com"}}

v-bind一定是绑定data里的变量，如果data没有，就不加双引号，视为属性，比如 <div style="xxx">

v-on 等于@ 绑定触发事件比如 @click 点击事件 <p @click="xxx()"> methods:{xxx(){} }

v-model 双向绑定 html跟js里同时变化，比如 <input type='text' v-model='content'/> data(){return {content:""}}

{{}}只能在html里面，可以是变量，字符串，函数，正则表达式

13 v-if v-for

 <p v-if="sum>3">{{sum}}>3</p>
 <p v-else>{{sum}}<=3</p>
 export default {
  data(){
      return {   
        sum:1,
      }
    },
 }

 <ul>
      <li v-for="(item,idx) in pageLists" :key="idx" style="color:black;"> 
              <!-- for 绑定 pageLists事件返回的 lists + 绑定下标idx,元素item -->
              <!-- {{item.title1}}-{{item.content1}} -->
              <el-col :span="12" >
                <el-card  shadow="hover" >
                     <span >{{item.title1}}</span>
                     <el-divider></el-divider>
                     <span>{{item.content1}}</span>
                </el-card>
              </el-col>
      </li>
 </ul>
export default {

     computed:{ //动态监听变化
        pageLists:()=>store.state.lists,
     },

}

v-for 绑定 pageLists事件返回的 lists + 绑定下标idx,元素item

v-for加唯一标识：key的原因 https://www.jianshu.com/p/4bd5e745ce95

官方v-for文档：https://cn.vuejs.org/v2/guide/list.html#%E7%BB%B4%E6%8A%A4%E7%8A%B6%E6%80%81

就是为了数组有变化时（排序，增加，删除），下标指向保持稳定

14.试试走马灯

效果：默认2s自动切换

          <el-carousel height="400px">
            <el-carousel-item v-for="i in urls" :key="i">
              <el-image style="opacity:0.9;height:400px" :src="i" fit="cover"></el-image>
              <h3 class="small">{{ fit }}</h3>
            </el-carousel-item>
          </el-carousel>


 data() {
    return {
      urls: 
           ["/img/12.jpg",
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            "/img/2.jpg"]
      //fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
    };