vue+layui+axios 个人学习，持续更新

最新推荐文章于 2025-06-15 10:00:00 发布

酷爱菠萝

最新推荐文章于 2025-06-15 10:00:00 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44526839/article/details/107860335

vue 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨Vue.js的生命周期，包括created与mounted的区别，watch的多种用法，v-for循环特性，axios前后台交互，Vue结合LayUI的模板示例，及v-show与v-if的异同，为开发者提供全面的Vue实践指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、官网地址：https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
2、Vue生命周期中mounted和created的区别？
created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，
而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选
3、Vue生命周期中watch有什么作用？
watch：Vue中的监听函数，当监听到某个属性发送变化时，可执行连续操作，主要有三组写法

<input type="text" v-model="cityName"/>
new Vue({
  el: '#root',
  data: {
    cityName: 'shanghai'
  },
  watch: {
    cityName(newName, oldName) {
      // 最基础的监听写法，当cityName发生改变时，可执行的操作
    }
  } 
})

new Vue({
  el: '#root',
  data: {
    cityName: ''
  },
  watch: {
    cityName: {
    　　handler(newName, oldName) {
      　　// 这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
          // 比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。
    　　},
    　　immediate: true
    }
  } 
})

<input type="text" v-model="cityName.name"/>
new Vue({
  el: '#root',
  data: {
    cityName: {id: 1, name: 'shanghai'}
  },
  watch: {
    cityName: {
      handler(newName, oldName) {
      // 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。
    },
    deep: true,
    immediate: true
    }
  } 
})

watch: {
    'cityName.name': {
      handler(newName, oldName) {
      // 设置deep: true 则可以监听到cityName.name的变化，此时会给cityName的所有属性都加上这个监听器，当对象属性较多时，
      // 每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性
      },
      deep: true,
      immediate: true
    }
  }

4、循环 v-for：

vue中作为输出值的时候如果是在属性里面则不需要{{}}进行包裹并且要在属性前面加上:，例如:id="index",index是下标

 <tr v-for="(item,index) in goodsList">
                    <td><input type="text" :id="'to'+index"/></td>
                    <td>{{index+1}}</td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.type}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button type="button" class="layui-btn layui-btn-warm" v-on:click="UpdateGoods">更新</button>
                        <button type="button" class="layui-btn layui-btn-danger" v-on:click="DelectGoods">删除</button>
                    </td>
                </tr>

5、axios get post 调用后台方法

// 前台调用
axios.get("/v1/vip?id=" + parseInt(vm.$data.codeId)).then(
                            (response) => {
                              
                            },
                           
                        ).catch(function (response) {
                                console.log(response);
                            });

axios.post("/v2/vip", { entity: { ID: _id, Name: _name, Type: _type, Price: _price } }).then(
                        (response) => {
                           
                        }
                    ).catch(function (response) {
                            console.log(response);
                    });

// 后台接收
       [HttpGet]
        public JsonResult v1(int id)
        {
            if (id != null)
            {
                return Json(new ReturnJsonInfo(200, "success!", id));
            }
            return Json(new ReturnJsonInfo(400, "获取的数据不存在!", null));
        }

        [HttpPost]
        public JsonResult v2(Entity entity)
        {
            if (entity != null)
            {
                return Json(new ReturnJsonInfo(200, "success!", test));
            }
            return Json(new ReturnJsonInfo(400, "操作异常!", null));
        }

6、vue+layui 基础版模板

var vm = new Vue({
            el: "#demo",
            data() {
                return {
                    _layui: {
                        form: {},
                        upload: {}
                    },
                    v1: [],
                    v2: []
                };
            },
            mounted: {},
            computed: {},
            watch: {},
            created() {
                let vm = this;
                layui.use(['form', 'upload', 'element'], function () {
                    //var form=layui.form
                    var element = layui.element;
                    vm.$data._layui.form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功 layui对象绑定到vue对象
                    //但是，如果你的HTML是动态生成的，自动渲染就会失效，比如下拉框是通过v-for 动态加载的，此时我们就需要执行此语句
                    //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
                    vm.$data._layui.form.render();
                    //form.render()
                    vm.$data._layui.form.on('checkbox(che)', function (data) {
                      data.elem.dispatchEvent(new Event('change')); // lay-filter="che" 
                    });
                    vm.$data._layui.form.on('switch(swi)', function (data) {
                       data.elem.dispatchEvent(new Event('change')); // lay-filter="swi"
                    });
                    vm.$data._layui.form.on('select(sel)', function (data) {
                       data.elem.dispatchEvent(new Event('change')); // lay-filter="sel"
                    });
                    vm.v1();
                    vm.v2();
                });
            },
            updated() {
               this.layuirender();
            },
            methods:
            {
                v1: function () {
                    axios.get("/v1/vip?id=" + parseInt(vm.$data.codeId)).then(
                        (response) => {
                            v1 = response.v1;
                        },
                    ).catch(function (response) {
                        console.log(response);
                    });
                },
                v2: function () {
                    axios.post("/v2/vip", { entity: { ID: _id, Name: _name, Type: _type, Price: _price } }).then(
                        (response) => {
                            v2 = response.v2;
                        }
                    ).catch(function (response) {
                        console.log(response);
                    });
                }
            },
              layuirender() {
                this.$data._layui.form && this.$data._layui.form.render && this.$data._layui.form.render();
            }
        });

7、vue v-show 和 v-if 的异同

官方解释：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

二、个人理解：