Vue-学习2

最新推荐文章于 2024-05-16 21:01:12 发布
最新推荐文章于 2024-05-16 21:01:12 发布
阅读量172 收藏
点赞数
文章标签： vue.js javascript 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l20040121_/article/details/128945072
版权

bus案例

    <div id="box">
        <button @click="handleAjax">ajax</button>

        <film-item v-for="item in datalist" :key="item.filmId" :mydata="item"></film-item>

        <film-detail></film-detail>
    </div>
    <script>

        var bus = new Vue()
        // bus.$on
        // bus.$emit
        Vue.component("filmItem", {
            props: ["mydata"],
            template: `
                <div class="item">
                    <img :src="mydata.poster"/>
                    {{mydata.name}}
                    <div>
                        <button @click="handleClick">详情</button>
                    </div>
                </div>
            `,
            methods: {
                handleClick() {
                    // console.log(this.mydata.synopsis)

                    bus.$emit("zzy", this.mydata.synopsis)
                }
            }
        })

        Vue.component("filmDetail", {
            //组件刚刚创建好，就开始订阅
            data() {
                return {
                    info: ""
                }
            },
            //生命周期
            mounted() {
                // console.log("当前组件上树后触发")
                bus.$on("zzy", (data) => {
                    console.log("1111111", data)
                    this.info = data
                })
            },

            template: `
                <div class="filminfo">
                    {{info}}
                </div>  
            `
        })



        new Vue({
            el: "#box",
            data: {
                datalist: [],
            },
            methods: {
                handleAjax() {
                    fetch("./json/test.json")
                        .then(res => res.json())
                        .then(res => {
                            console.log(res.data.films)
                            this.datalist = res.data.films
                        })
                }
            }
        })

    </script>

props修改

    <div id="box">
        <div v-once>
            {{title}}
        </div>

        <child :mytitle="title"></child>
    </div>

    <script>
        Vue.component("child", {
            props: ["mytitle"],
            template: `
                <div >
                    child-{{mytitle}}
                    <button @click="handleClikc">click</button>
                </div>
            `,
            methods: {
                handleClikc() {
                    this.mytitle = "22222222222222"
                }
            }
        })
        var vm = new Vue({
            el: "#box",
            data: {
                title: "11111111111111"
            }
        })

        //属性 -- 父组件传给你的属性,只有父组件可以重新传,但不允许子组件随意修改.
        //状态 --组件内部的状态,可以随意修改

    </script>

动态组件

  <div id="box">

    <!-- <home v-show=" which=== 'home' "></home>
      <list v-show=" which=== 'list' "></list>
      <shopcar v-show=" which=== 'shopcar' "></shopcar> -->

    <keep-alive>
      <component :is="which"></component>
    </keep-alive>
    <footer>
      <ul>
        <li @click=" which='home' ">
          首页
        </li>
        <li @click=" which='list' ">
          列表
        </li>
        <li @click=" which='shopcar' ">
          购物车
        </li>
      </ul>
    </footer>
  </div>


  <script type="text/javascript">
    Vue.component("home", {
      template: `
          <div>
            home
            <input type="search"/>
          </div>
         `
    })

    Vue.component("list", {
      template: `
          <div>
            list
          </div>
         `
    })

    Vue.component("shopcar", {
      template: `
          <div>
            shopcar
          </div>
         `
    })

    var vm = new Vue({
      el: "#box",
      data: {
        which: 'home'
      }
    })
  </script>

slot

  <div id="box">
    <!-- 当前组件或者节点 在哪个模板中，就能访问哪个模板状态 -->
    <child>
      <div slot="a">11111111111111</div>
      <div slot="b">22222222222222</div>
      <div slot="c">33333333333333</div>
      <div>44444444444444</div>
    </child>

    <navbar>
      <button slot="left">aaa</button>
      <i class="iconfont icon-all" slot="right">字体图标</i>
    </navbar>

  </div>

  <script>
    // 插槽的意义 ： 扩展组件能力， 提高组件的复用性
    Vue.component("navbar", {
      template: `
      
        <div>
           <slot name="left"></slot>
           <span>navbar</span>  
           <slot name="right"></slot>
        </div>
      `
    })


    // 单个插槽， <slot></slot>
    // 具名插槽  <slot name="a"></slot>
    Vue.component("child", {
      template: `
        <div>
          child
          <slot name="a"></slot>
          <slot name="b"></slot>
          <slot name="c"></slot>
          <slot></slot>
        </div>
      `
    })
    new Vue({
      el: "#box"
    })
  </script>

slot例子

  <div id="box">
    <navbar>
      <button @click="isShow=!isShow">click</button>
    </navbar>
    <sidebar v-show="isShow"></sidebar>
  </div>
  <script>

    Vue.component("navbar", {

      template: `
            <div style="background:yellow">
              nabbar- <slot></slot>
            </div>
          `,

    })

    Vue.component("sidebar", {
      template: `
            <ul style="background-color: yellow;width: 200px;height: 500px;" >
              <li>首页</li>
              <li>钱包</li>
              <li>设置</li>
            </ul>
          `
    })

    new Vue({
      el: "#box",
      data: {
        isShow: false
      }
    })
  </script>

新slot

  <div id="box">
    <!-- 当前组件或者节点 在哪个模板中，就能访问哪个模板状态 -->
    <child>
      <template v-slot:a>
        <div>1111111111</div>
      </template>

      <template #b>
        2222222222222222222
      </template>

      <div slot="c">33333333333333</div>
      <div>44444444444444</div>
    </child>

    <navbar>
      <template #left>
        <button>aaa</button>
      </template>
      <template #right>
        <i class="iconfont icon-all">字体图标</i>
      </template>
    </navbar>

  </div>

  <script>
    // 插槽的意义 ： 扩展组件能力， 提高组件的复用性
    Vue.component("navbar", {
      template: `
      
        <div>
          <slot name="left"></slot>
          <span>navbar</span>  
          <slot name="right"></slot>
        </div>
      `
    })


    // 单个插槽， <slot></slot>
    // 具名插槽  <slot name="a"></slot>
    Vue.component("child", {
      template: `
        <div>
          child
          <slot name="a"></slot>
          <slot name="b"></slot>
          <slot name="c"></slot>
          <slot></slot>
        </div>
      `
    })
    new Vue({
      el: "#box"
    })
  </script>

过渡效果

过渡

  <style>
    /* 进场动画 */
    .zzy-enter-active {
      animation: aaa 1.5s;
    }

    /* 出场动画 */
    .zzy-leave-active {
      animation: aaa 1.5s reverse;
    }

    @keyframes aaa {
      0% {
        opacity: 0;
        transform: translateX(100px);
      }

      100% {
        opacity: 1;
        transform: translateX(0px);
      }
    }
  </style>
  <!-- <link rel="stylesheet" href="lib/animate.css"> -->
</head>

<body>

  <div id="box">
    <button @click="isShow= !isShow">change</button>
    <transition enter-active-class="zzy-enter-active" leave-active-class="zzy-leave-active">
      <div v-show="isShow">1111111111111111</div>
    </transition>


    <transition name="zzy">
      <div v-if="isShow">
        <div>222222222222222222</div>
        <div>333333333333333</div>
        <div>44444444444444444</div>
        <div>55555555555555555</div>
      </div>
    </transition>
  </div>
  <script>
    new Vue({
      el: "#box",
      data: {
        isShow: false
      }
    })
  </script>

初始元素过渡

  <style>
    /* 进场动画 */
    .zzy-enter-active {
      animation: aaa 1.5s;
    }

    /* 出场动画 */
    .zzy-leave-active {
      animation: aaa 1.5s reverse;
    }

    @keyframes aaa {
      0% {
        opacity: 0;
        transform: translateX(100px);
      }

      100% {
        opacity: 1;
        transform: translateX(0px);
      }
    }
  </style>
  <!-- <link rel="stylesheet" href="lib/animate.css"> -->
</head>

<body>

  <div id="box">
      <button @click="isShow= !isShow">change</button>
      <transition enter-active-class="zzy-enter-active" leave-active-class="zzy-leave-active">
        <div v-show="isShow">1111111111111111</div>
      </transition>


      <transition name="zzy" appear>
        <div v-if="isShow">222222222222222222</div>
      </transition>
  </div>
  <script>
    new Vue({
      el:"#box",
      data:{
        isShow:true
      }
    })
  </script>

多个元素过渡

  <style>
    /* 进场动画 */
    .zzy-enter-active {
      animation: aaa 1.5s;
    }

    /* 出场动画 */
    .zzy-leave-active {
      animation: aaa 1.5s reverse;
    }

    @keyframes aaa {
      0% {
        opacity: 0;
        transform: translateX(100px);
      }

      100% {
        opacity: 1;
        transform: translateX(0px);
      }
    }
  </style>
  <!-- <link rel="stylesheet" href="lib/animate.css"> -->
</head>

<body>

  <!-- <div class="zzy-enter-active">333333333333333</div> -->

  <div id="box">
    <button @click="isShow = !isShow">change</button>
    <transition name="zzy" mode="out-in">
      <div v-if="isShow" key="1">111111111111111</div>
      <div v-else key="2">2222222222222222222222222</div>
    </transition>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#box",
      data: {
        isShow: true
      }
    })

    /*
      diff算法，
       1. 同层级对比
       2. 同标签， 组件 对比
       3. 同key对比
    */
  </script>

多个组件过渡

<!-- <home v-show=" which=== 'home' "></home>
  <list v-show=" which=== 'list' "></list>
  <shopcar v-show=" which=== 'shopcar' "></shopcar> -->

<keep-alive>
  <transition name="zzy" mode="out-in">
    <component :is="which"></component>
  </transition>
</keep-alive>
<footer>
  <ul>
    <li @click=" which='home' ">
      首页
    </li>
    <li @click=" which='list' ">
      列表
    </li>
    <li @click=" which='shopcar' ">
      购物车
    </li>
  </ul>
</footer>

多个列表过渡

  <style>
    /* 进场动画 */
    .zzy-enter-active {
      animation: aaa 1.5s;
    }

    /* 出场动画 */
    .zzy-leave-active {
      animation: aaa 1.5s reverse;
    }

    @keyframes aaa {
      0% {
        opacity: 0;
        transform: translateX(100px);
      }

      100% {
        opacity: 1;
        transform: translateX(0px);
      }
    }
  </style>
</head>

<body>
  <div id="box">
    <!-- 双向绑定的指令 -->
    <!-- {{mytext}} -->
    <input type="text" v-model="mytext" />
    <button @click="handleAdd()">add</button>

    <div v-show="!datalist.length">待办事项空空如也</div>

    <transition-group name="zzy" tag="ul" v-show="datalist.length">
      <li v-for="(item,index) in datalist" :key="item">
        {{item}}--{{index}}
        <button @click="handleDel(index)">del</button>
      </li>
    </transition-group>

  </div>
  <script>
    var vm = new Vue({
      el: "#box",
      data: {
        mytext: "11111",
        datalist: ["111", "222", "333"]
      },
      methods: {
        handleAdd() {
          console.log("add", this.mytext)
          this.datalist.push(this.mytext)

          this.mytext = "" //清空value
        },
        handleDel(index) {
          console.log("del", index)
          this.datalist.splice(index, 1)
        }
      }
    })
  </script>

可重复过渡

  <style>
    .left {}

    .right {
      position: fixed;
      right: 0px;
      top: 0px;
    }

    /* 进场动画 */
    .left-enter-active {
      animation: aaa 1.5s;
    }

    /* 出场动画 */
    .left-leave-active {
      animation: aaa 1.5s reverse;
    }

    @keyframes aaa {
      0% {
        opacity: 0;
        transform: translateX(-100%);
      }

      100% {
        opacity: 1;
        transform: translateX(0px);
      }
    }


    .right-enter-active {
      animation: bbb 1.5s;
    }

    /* 出场动画 */
    .right-leave-active {
      animation: bbb 1.5s reverse;
    }

    @keyframes bbb {
      0% {
        opacity: 0;
        transform: translateX(100px);
      }

      100% {
        opacity: 1;
        transform: translateX(0px);
      }
    }
  </style>
</head>

<body>
  <div id="box">
    <navbar @myevent="handleEvent"></navbar>
    <sidebar v-show="isShow" mode="right"></sidebar>
  </div>
  <script>
    Vue.component("navbar", {

      template: `
            <div>
              nabbar-<button @click="handleClick">click</button>  
            </div>
          `,
      methods: {
        handleClick() {
          // 通知父组件 取反 isShow - 子传父 依靠 事件
          this.$emit("myevent")
        }
      }
    })

    Vue.component("sidebar", {
      props: ["mode"],
      template: `
          <transition :name="mode">
            <ul style="background-color: yellow;width: 200px;height: 500px;" :class="mode">
              <li>首页</li>
              <li>钱包</li>
              <li>设置</li>
            </ul>
          </transition>
          `
    })

    new Vue({
      el: "#box",
      data: {
        isShow: false
      },
      methods: {
        handleEvent() {
          console.log("父组件", "1111111")
          this.isShow = !this.isShow
        }
      }
    })
  </script>

组件声明周期

      <div id="box">
        {{myname}}

        <button @click=" myname='xiaoming' ">change</button>

        <ul>
          <li v-for="data in datalist" :key="data">
            {{data}}
          </li>
        </ul>
      </div>

    <script type="text/javascript">

    // Vue.component("navbar",{
    //   template:``
    // })
      //根组件
      var vm= new Vue({
        el:"#box",
        data:{  
          myname:"zzy",
          datalist:[]
        },
        // template:`<div>root component--{{myname}}</div>`,
        beforeCreate(){
          console.log("beforeCreate",this.myname)
        },
        created(){
          console.log("created","初始化状态或者挂载到当前实例的一些属性")
          this.myname = this.myname+"11111111" //被拦截的状态

          this.user =localStorage.getItem("user")  // this下面的属性
          // 发ajax
        },

        beforeMount(){
          console.log("beforeMount",this.$el)  // 模板解析之前最后一次修改模板节点。
        },

        mounted(){
          console.log("mounted","拿到真实的dom节点",document.getElementById("box").innerHTML)
          // 依赖于dom创建之后， 才进行初始化工作的插件  （轮播插件）
          // 订阅 bus.$on
          // 发ajax

          setTimeout(()=>{
            this.datalist = ["1111","222","333"]
            // 虚拟dom创建， diff对比 -- 状态立即更新，dom异步更新
            // console.log(document.getElementsByTagName("li").length)
          },2000)

          
        },

        beforeUpdate(){
          console.log("beforeUpdate","更新之前,记录老的dom某些状态，比如滚动条位置记录。")
        },
        updated(){
          console.log("updated","更新完成,获取更新的后dom,才进行swiper工作的插件 ")
          // console.log(document.getElementsByTagName("li").length)
        }
      })
    </script>

销毁

  <div id="box">
    <child v-if="isCreated"></child>
  </div>
  <script>
    Vue.component("child", {
      data() {
        return {
          time: 1000
        }
      },
      created() {
        this.id = null
      },
      mounted() {
        this.id = setInterval(() => {
          console.log("倒计时")
          this.time--
        }, 1000)

        window.onresize = () => {
          console.log("resize")
        }
      },
      template: `
        <div>
            抢购倒计时组件
            <div>{{time}}</div>  
        </div>
      `,

      beforeDestroy() {
        console.log("beforeDestroy", "清除定时器， 事件解绑,,,,")

        clearInterval(this.id)

        window.onresize = null
      },

      destroyed() {
        console.log("destroyed", "清除定时器， 事件解绑,,,,")
      }
    })
    var vm = new Vue({
      el: "#box",
      data: {
        isCreated: true
      }
    })
  </script>

销毁

  <div id="box">
    <child v-if="isCreated"></child>
  </div>
  <script>
    Vue.component("child", {
      data() {
        return {
          time: 1000
        }
      },
      created() {
        this.id = null
      },
      mounted() {
        this.id = setInterval(() => {
          console.log("倒计时")
          this.time--
        }, 1000)

        window.onresize = () => {
          console.log("resize")
        }
      },
      template: `
        <div>
            抢购倒计时组件
            <div>{{time}}</div>  
        </div>
      `,

      beforeDestroy() {
        console.log("beforeDestroy", "清除定时器， 事件解绑,,,,")

        clearInterval(this.id)

        window.onresize = null
      },

      destroyed() {
        console.log("destroyed", "清除定时器， 事件解绑,,,,")
      }
    })
    var vm = new Vue({
      el: "#box",
      data: {
        isCreated: true
      }
    })
  </script>

swiper

静态

  <style>
    .zzy {
      height: 500px;
    }
  </style>
</head>

<body>
  <header>导航</header>

  <div class="swiper-container zzy">
    <div class="swiper-wrapper">
      <div class="swiper-slide">111111111111</div>
      <div class="swiper-slide">222222222222</div>
      <div class="swiper-slide">333333333333</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
  </div>
  F
  <footer>底部内容</footer>

  <script>
    //初始化 swiper
    new Swiper(".zzy", {
      // direction:"vertical", //垂直
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      loop: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

    })
  </script>

动态

  <style>
    .zzy {
      height: 500px;
    }
  </style>
</head>

<body>
  <header>导航</header>

  <div class="swiper-container zzy">
    <div class="swiper-wrapper">

    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
  </div>

  <footer>底部内容</footer>

  <script>

    //swiper 初始化过早。
    setTimeout(() => {
      var list = ["aaaa", "bbbbb", "cccc"]
      var newlist = list.map(item => `<div class="swiper-slide">${item}</div>`)

      // console.log(newlist.join(""))

      var owrapper = document.querySelector(".swiper-wrapper")
      owrapper.innerHTML = newlist.join('')


      //dom插入完之后， new swiper

      init()
    }, 2000)


    //初始化 swiper
    function init() {
      new Swiper(".zzy", {
        // direction:"vertical", //垂直
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        loop: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

      })
    }
  </script>

vue-swiper

  <style>
    /* img{} */
  </style>
</head>

<body>
  <div id="box">
    <header>导航-{{myname}}</header>

    <div class="swiper-container zzy">
      <div class="swiper-wrapper">
        <!-- <div class="swiper-slide">111111111111</div>
        <div class="swiper-slide">222222222222</div>
        <div class="swiper-slide">3333333333</div> -->
        <div class="swiper-slide" v-for="data in datalist" :key="data">
          <img :src="data" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

    </div>

    <footer>底部内容</footer>
  </div>
  <script>
    //初始化 swiper --初始化过早

    var vm = new Vue({
      el: "#box",
      data: {
        datalist: [],
        myname:"zzy"
      },
      mounted() {
        //ajax
        setTimeout(() => {
          this.datalist = ["https://static.maizuo.com/pc/v5/usr/movie/e856bdc65507b99800f22e47801fa781.jpg",
            "https://static.maizuo.com/pc/v5/usr/movie/47aa5a3ad2ebff403d073288e4365694.jpg",
            "https://static.maizuo.com/pc/v5/usr/movie/8b0755547313706883acc771bda7709d.jpg"
          ]
          //过早 

        }, 2000)
        //初始化过早
      },
      updated(){
        console.log(document.querySelectorAll(".swiper-slide").length)
          new Swiper(".zzy", {
            // direction:"vertical", //垂直
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            },
            loop: true,
            autoplay: {
              delay: 2500,
              disableOnInteraction: false,
            }
          })

      }
    })

    /*
      1. 无法复用
      2. 如果当前页面 状态不止datalist一个，其他状态更新， update重新运行，new Swiper 执行多次， 出bug
    
    */
  </script>

vue-swiper-组件

  <div id="box">
    <swiper v-if="datalist.length" :loop="false">
      <swiper-item v-for="data in datalist" :key="data">
        <img :src="data"/>
      </swiper-item>
    </swiper>

    <!-- <swiper :key="datalist.length"></swiper> -->
  </div>

  <script>

    new Vue({
      el:'#box',
      data:{
          datalist:[]
        
      },
      mounted(){
        setTimeout(()=>{
          this.datalist = ["https://static.maizuo.com/pc/v5/usr/movie/e856bdc65507b99800f22e47801fa781.jpg",
            "https://static.maizuo.com/pc/v5/usr/movie/47aa5a3ad2ebff403d073288e4365694.jpg",
            "https://static.maizuo.com/pc/v5/usr/movie/8b0755547313706883acc771bda7709d.jpg"
          ]
        },2000)
      }
    })
  </script>

Vue3组件写法

    <div id="box">
        {{myname}}

        <navbar myname="aaaa">
            <div>111111111111111</div>
        </navbar>

        <sidebar></sidebar>
    </div>

    <script>
        // console.log(Vue.component)
        var obj = {
            data() {
                return {
                    myname: "zzy"
                }
            },
            methods: {

            },
            computed: {

            },
            created() {
                console.log("created")
            },
            beforeMount() {

            },
            mounted() {
                console.log("mounted")
            },
            //生命周期替换
            // beforeDestroy(){
            //     console.log("beforedestory")
            // },
            // destroyed(){

            // }

            beforeUnmount() {

            },
            unmounted() {

            }
        }

        var app = Vue.createApp(obj)

        app.component("navbar", {
            props: ["myname"],
            template: `
                    <div>
                        navbar-{{myname}}
                        <slot></slot>
                    </div>
                `
        })
        app.component("sidebar", {
            template: `<div>
                sidebar
            </div>`
        })
        app.mount("#box")

        // vue2 (类，this)
        // vue3 类（>90% 一样）， hooks(函数式)
    </script>

Vue3生命周期

  <div id="box">
    <swiper v-if="datalist.length" :loop="false">
      <swiper-item v-for="data in datalist" :key="data">
        <img :src="data" />
      </swiper-item>
    </swiper>

    <!-- <swiper :key="datalist.length"></swiper> -->
  </div>

  <script>
    var obj = {
      data() {
        return {
          datalist: []
        }
      },
      mounted() {
        setTimeout(() => {
          this.datalist = ["https://static.maizuo.com/pc/v5/usr/movie/e856bdc65507b99800f22e47801fa781.jpg",
            "https://static.maizuo.com/pc/v5/usr/movie/47aa5a3ad2ebff403d073288e4365694.jpg",
            "https://static.maizuo.com/pc/v5/usr/movie/8b0755547313706883acc771bda7709d.jpg"
          ]
        }, 2000)
      }
    }

    var app = Vue.createApp(obj)


    app.component("swiperItem", {
      template: `
      <div class="swiper-slide">
        <slot></slot>
      </div>
    `
    })
    app.component("swiper", {
      props: {
        loop: {
          type: Boolean,
          default: true
        }
      },
      template: `
      <div class="swiper-container kerwin">
        <div class="swiper-wrapper">
          <slot></slot>
        </div>
        <div class="swiper-pagination"></div>
      </div>`,

      mounted() {
        // console.log("mounted")
        new Swiper(".kerwin", {
          // direction:"vertical", //垂直
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          loop: this.loop,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          }
        })
      },
      // destroyed() {
      //   // console.log("destroy")

      //   //
      // }
    })

    app.mount("#box")
  </script>
l20040121_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-ydui使用文档
01-11
2. **引入组件**：在Vue实例中注册Vue-YDUI，并按需引入组件，例如`import { Button } from 'vue-ydui/dist/ydui.common.js'`。 3. **使用组件**：在模板中直接使用注册过的组件，如`<yd-button>点击我</yd-button>...
vue框架vue-next-admin-master.zip
04-04
2. **Vue 单文件组件（Single File Component, SFC）**：Vue 的组件化特性体现在单文件组件中，一个组件包含 HTML、CSS 和 JavaScript，提高了代码组织的清晰度。项目中的每个 `.vue` 文件就是一个 SFC。 3. **Vuex...
vue基础：将表单中的数据按列表显示在页面下，删除数据this.list.push(***)，this.list.push(***)。
谷咕咕
01-20 9302
将表单中的数据按列表显示在页面下，删除数据 1.添加数据 1.在页面中，首先通过数据的双向绑定，表单中的v-model=“todo”，绑定数据。 2.通过调用@click="doadd()"方法中的this.list.push(this.todo)，将todo中的数据加到list中。 3.通过循环列表显示。 &lt;template&gt; &lt;div id="app"&gt; ...
Vue学习：一
self_correction的博客
02-07 533
Vue (读音/vju:/,类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层,不仅易于上手，还便于与第三方 库或既有项目整合。另一方面， 当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能 够为复杂的单页应用提供驱动。
Web前端最全VUE+ECharts从数据库中获取数据（柱状图、扇形图），大厂面试题目
最新发布
2401_84617969的博客
05-16 376
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】data() {return {// 定义图表，各种参数msg: “柱状图”,},//按照默认值绘制图表},//清空数组i++) {});},watch: {datay: {//对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据},
Vue 脚手架学习第七天 this.$router.push（） 实现页面跳转及传参
weixin_45842460的博客
06-30 529
// 字符串 this.$router.push('/viewAgent') // 命名的路由 this.$router.push({ name: 'viewAgent', params: { isShow: true}}) <style> </style> <template> <div> <button @click="fn">点击</button> </div> </template> &
带时间轴的指标监控柱状图
09-20 1297
function getData(percent) { return [{ value: percent, name: percent, }, { value: 1 - percent, label: { show: false }, labelLine: { normal: { show: false }...
VUE 笔记
weixin_43829905的博客
05-30 690
VUE 笔记根据id来匹配后台返回来的数据后，获取该id的单条数据重新命名后台返回来的可key名循环转换返回来的后台数据类型 根据id来匹配后台返回来的数据后，获取该id的单条数据 //html <el-button size="mini" type="danger" @change="selectpingtai(1)">获取后台id为1的数据</el-button&.....................
学习vue-admin-template，优化了大量融入代码，添加中文注释
05-16
2. **Vue CLI**：Vue的命令行工具，用于快速初始化项目，构建开发环境和生产环境的打包。vue-admin-template可能就是通过Vue CLI创建的。 3. **Vuex**：Vue的状态管理库，用于集中管理应用的全局状态。了解如何定义...
vue学习之vue-resource请求
01-07
npm install 引入vue-resource包 ...(2)在store文件的main.js中配置vue-resource // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.
可视化大屏 Vue3 版本vue-big-screen-plugin-master.zip
04-04
2. **丰富的图表组件**：包括折线图、柱状图、饼图、地图等，支持动态数据更新，方便展示实时变化的数据。 3. **交互性**：支持用户交互，如点击、拖拽、缩放等操作，以增强用户体验。 4. **数据加载与处理**：可能...
Vue实现ToDoList
weixin_53126517的博客
03-18 122
这是一份由Vue写成的简易ToDoList代码，仅供初学者参考 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ToDoList</title> <scr
vue echart图表功能
a576837179的博客
12-28 126
待定
vue使用model改变数据后导致已经push到数组中的数据也改变
仗剑天涯，从摘要开始
03-25 1450
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
Vue响应式原理详细讲解
m0_56344602的博客
05-23 703
面试官：请你简单的说说什么是Vue的响应式。 小明：mvvm就是视图模型模型视图，只有数据改变视图就会同时更新。 面试官：说的很好，回去等通知吧。 小明：....
vue中 data 定义一个空数组items:[]，动态添加对象，属性名name,属性值tt
weixin_35755640的博客
01-15 2348
在 Vue 中，可以在 data 中定义一个空数组 items: []。然后可以使用 push() 方法向数组中动态添加对象，对象的属性名为 name，属性值为 tt。 示例代码： data() { return { items: [] } }, methods: { addItem() { this.items.push({ name: 'tt' }) } } ...
Vue 学习第二天 代码笔记
Dj19983160703的博客
04-17 295
1 简单的品牌管理列表 在之后的学习 都会以该项目作为学习基础 <div id="app"> <label> ID <input type="number" v-model="id"> </label> <label> NAME <input type=...
浅谈Vue3——如何使用Push
TianXuab的博客
10-31 3059
在Vue 3中，"push"是一个数组方法，用于向数组的末尾添加一个或多个元素。通过使用"push"方法，我们可以动态地向Vue 3的数据数组中添加新的元素。Vue 3是Vue.js的最新版本，它引入了许多新功能和改进，使得开发更加简单和高效。通过在Vue组件中定义一个数组数据属性，并在需要添加元素的地方调用。方法将一个或多个元素添加到数组的末尾，并返回新数组的长度。下面是一个完整的示例，展示了如何在Vue 3中使用。在上面的示例中，我们在Vue组件的模板中使用了。在上面的代码中，我们首先在Vue组件的。
如何学习vue-element-admin
03-26
1. 先学习Vue.js Vue-element-admin是基于Vue.js的开源后台管理系统框架，因此学习Vue.js是非常重要的。可以先学习Vue.js官方文档，掌握Vue.js的基本概念和语法。 2. 掌握Element UI组件库 Vue-element-admin使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值