Day03-vue基础

最新推荐文章于 2024-05-20 17:02:17 发布
最新推荐文章于 2024-05-20 17:02:17 发布
阅读量84 收藏
点赞数
分类专栏： 前端3 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33396183/article/details/132490507
版权

Day03-vue基础

一 列表渲染

v-for这个指令可以实现列表渲染

1 数组

    <ul>
      <!-- 
        v-for遍历的时候,key必须赋唯一值
        第一个参数是数组元素,第二个参数是元素下标
       -->
      <li v-for="(item,index) in [1,3,5,7]" :key="item">{{item}}--{{index}}</li>
    </ul>

2 数字

    <ul>
      <li v-for="item in 10" :key="item">{{item}}</li>
    </ul>

3 对象

  data(){
    return{
      arr:[
        {id:1,name:"赵日天"},
        {id:2,name:"李杀神"},
        {id:3,name:"王诛魔"},
        {id:4,name:"刘斩仙"},
      ]
    }
  },
  
    <ul>
      <li v-for="item in arr" :key="item.id">{{item.name}}</li>
    </ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y9A5hvrk-1692931215463)(https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/chenyun20230705101257.png)]

特点：

​ key值必须是唯一的。推荐大家用数组中唯一值id来作为key

​ index不推荐拿来作为key，数据一旦变化了，index变化

​ Vue底层循环节点，每个节点都有唯一key，下次数据发生变化，通过key来进行对比，发生key是没有产生变化，对比忽略指定节点。提升效率

二 图片渲染

针对要显示图片，分为本地图片和网络图片：

  • 网络图片无需任何处理,正常使用。

  • 本地图片:

    如果图片地址是非动态的，那么直接写上地址即可

    <img width="70" src="../assets/images/5.jpg" alt="">

​ 如果图片地址是动态的（比如item.imgSrc）,那么就在<script>获取图片数据处加上require()，表示获取该图片经过打包之后的路径

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EN1e4oOs-1692931215467)(https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/chenyun20230705101134.png)]

三 列表渲染实战

image-20230412200016737

<template>
  <div class="container">
    <div class="search">
      <div>
        <label for="">拼团状态：</label>
        <select name="" id="">
          <option value="all">全部</option>
          <option value="open">开启</option>
          <option value="close">关闭</option>
        </select>
      </div>
      <div>
        <label for="">商品搜索：</label>
        <input ref="productName" type="text" />
      </div>
      <button>搜索</button>
      <button>查询上架商品</button>
      <button>查询下架商品</button>
      <button>所有数据</button>
    </div>

    <table class="goods_list">
      <thead>
        <tr>
          <th>编号</th>
          <th>拼团图片</th>
          <th>拼团名字</th>
          <th>原价</th>
          <th>拼团价格</th>
          <th>拼团人数</th>
          <th>参与人数</th>
          <th>成团数量</th>
          <th>限量</th>
          <th>剩余数量</th>
          <th>活动状态</th>
          <th>结束时间</th>
          <th>上/下架</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in goodList" :key="item.id">
          <td>{{item.id}}</td>
          <td>
            <img :src="item.img" alt="">
          </td>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td>{{item.spellPrice}}</td>
          <td>{{item.spellPeople}}</td>
          <td>{{item.joinPeople}}</td>
          <td>{{item.spellNumber}}</td>
          <td>{{item.limit}}</td>
          <td>{{item.residue}}</td>
          <td>
            <span>{{item.status?"进行中":"已结束"}}</span>
          </td>
          <td>{{item.endTime}}</td>
          <td>
            <button :class="item.show?'xiajia':'shangjia'">{{item.show?"下架":"上架"}}</button>
          </td>
          <td>
            <button>删除</button>
            <button>修改</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="14">
            <button><<</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>>></button>
            当前第 <span>1</span> 页/共 <span>3</span> 页
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodList: [
        {
          id: 1, //编号
          img: require("../assets/images/5.jpg"), //图片
          name: "香氛无火香薰精油卧室助眠除臭", //拼团商品名字
          price: 59, //原价
          spellPrice: 48, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 25, //限制数量
          residue: 20, //剩余数量
          status: true,
          endTime: "2022-12-23 00:00:00",
          show: true,
        },
        {
          id: 2, //编号
          img: require("../assets/images/b.png"), //图片
          name: "小米家保温杯云米电热杯", //拼团商品名字
          price: 59, //原价
          spellPrice: 48, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 25, //限制数量
          residue: 20, //剩余数量
          status: false,
          endTime: "2022-12-23 00:00:00",
          show: false,
        },
        {
          id: 3, //编号
          img: require("../assets/images/b.png"), //图片
          name: "小米家保温杯云米电热杯", //拼团商品名字
          price: 59, //原价
          spellPrice: 48, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 25, //限制数量
          residue: 20, //剩余数量
          status: false,
          endTime: "2022-12-23 00:00:00",
          show: false,
        },
        {
          id: 4, //编号
          img: require("../assets/images/f.jpg"), //图片
          name: "Casio卡西欧女表时尚", //拼团商品名字
          price: 1200, //原价
          spellPrice: 1000, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 10, //限制数量
          residue: 4, //剩余数量
          status: false,
          endTime: "2022-12-23 00:00:00",
          show: false,
        },
        {
          id: 5, //编号
          img: require("../assets/images/7.jpg"), //图片
          name: "爱奇艺智能 奇遇LT01 投影仪", //拼团商品名字
          price: 59, //原价
          spellPrice: 48, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 25, //限制数量
          residue: 20, //剩余数量
          status: false,
          endTime: "2022-12-23 00:00:00",
          show: false,
        },
        {
          id: 6, //编号
          img: require("../assets/images/8.jpg"), //图片
          name: "TOMFORD汤姆福特唇膏4色TF口红", //拼团商品名字
          price: 59, //原价
          spellPrice: 48, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 25, //限制数量
          residue: 20, //剩余数量
          status: false,
          endTime: "2022-12-23 00:00:00",
          show: false,
        },
        {
          id: 7, //编号
          img: require("../assets/images/9.jpg"), //图片
          name: "云麦体脂秤称重女智能精准成人脂肪测量仪", //拼团商品名字
          price: 59, //原价
          spellPrice: 48, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 25, //限制数量
          residue: 20, //剩余数量
          status: false,
          endTime: "2022-12-23 00:00:00",
          show: false,
        },
        {
          id: 8, //编号
          img: require("../assets/images/10.jpg"), //图片
          name: "本来设计挂钟原木时钟创意现代简约实木", //拼团商品名字
          price: 59, //原价
          spellPrice: 48, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 25, //限制数量
          residue: 20, //剩余数量
          status: false,
          endTime: "2022-12-23 00:00:00",
          show: false,
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  .search {
    width: 100%;
    margin-bottom: 30px;

    label {
      color: gray;
    }

    select {
      width: 220px;
      height: 30px;
      box-sizing: border-box;
    }

    input {
      width: 220px;
      height: 30px;
      box-sizing: border-box;
      margin: 10px 0px;
    }

    button {
      width: 100px;
      height: 35px;
      background-color: #cce8eb;
      border: none;
      outline: none;
      color: white;
      border-radius: 3px;
      margin-right: 5px;
      color: black;
      &:active {
        background-color: orange;
      }
    }
  }

  table {
    border: 1px black solid;
    border-collapse: collapse;
    text-align: center;
    background-color: white;
    th {
      border: 1px #e5ecf1 solid;
      width: 100px;
      background: #d5e6e9;
    }
    td {
      border: 1px #e5ecf1 solid;
    }
    tbody {
      tr {
        td {
          > img {
            width: 60px;
            height: 60px;
          }
        }
        td:nth-child(2) {
          padding: 6px;
        }
        td:nth-child(3) {
          text-align: left;
        }
        td:nth-child(11) {
          span {
            width: 40px;
            height: 14px;
            background: #eefdfb;
            border: 1px #caede9 solid;
          }
        }
        td:nth-child(13) {
          //下架按钮样式
          .xiajia {
            background: #568ce3;
            color: white;
            width: 50px;
            height: 30px;
            border: none;
          }
          //上架按钮样式
          .shangjia {
            background: white;
            color: #568ce3;
            width: 50px;
            height: 30px;
            border: 1px #568ce3 dotted;
          }
        }
        td:nth-child(14) {
          button {
            background: #eeeeee;
            width: 40px;
            height: 20px;
            border: 1px #a7a7a7 solid;
          }
        }
      }
    }
    tfoot {
      tr {
        td {
          text-align: right;
          height: 80px;
          padding-right: 40px;
          button {
            width: 30px;
            height: 30px;
            background: white;
            color: #568ce3;
            border: 1px #eeeeee solid;
          }
        }
      }
    }
  }
}
</style>

四 事件委托

在Vue中如果需要优化事件，我们需要采用事件委托的方式来实现。那怎么获取事件传播对象呢?

场景一：绑定函数的时候，不传递出参数

    <ul @click="del">
      <li>梅菜扣肉</li>
      <li>土豆丝</li>
      <li>红烧肉</li>
    </ul>

  methods:{
    del(event){
      console.log(event.target);
    }
  }

这个时候event就是Vue默认传递过来事件传播对象。

场景二：绑定函数的时候，需要传递参数

    <ul @click="del($event,1)">
      <li>梅菜扣肉</li>
      <li>土豆丝</li>
      <li>红烧肉</li>
    </ul>

  methods:{
    del(event,id){
      console.log(event.target);
      console.log(id);
    }
  }

在调用函数的时候，我们可以在参数里面使用$event来代表事件传播对象。

五 响应式变化特性

当我们修改的不是数组元素本身，而是数组中对象的属性，Vue能够检测到数据的变化

    <ul>
      <li v-for="item in arr" :key="item.id">{{item.name}}</li>
    </ul>
    <button @click="updateData">修改数据</button>
 
       arr:[
        {id:1,name:"赵日天"},
        {id:2,name:"李杀神"},
        {id:3,name:"王诛魔"},
        {id:4,name:"刘斩仙"},
      ]
    updateData(){
      this.arr[0].name = "赵昊"
    },

当我们操作数组的时候，如果直接通过下标修改数组元素，Vue检测不到数据变化。

    <ul>
      <li v-for="item in arr" :key="item.id">{{item.name}}</li>
    </ul>
    <button @click="updateTwo">再次修改数据</button>
 
       arr:[
        {id:1,name:"赵日天"},
        {id:2,name:"李杀神"},
        {id:3,name:"王诛魔"},
        {id:4,name:"刘斩仙"},
      ]
    updateTwo(){
      console.log("---------");
      this.arr[0] = {id:1,name:"赵敏"}
      console.log(this.arr);
    }

六 上下架

image-20230705142153632

image-20230705142215188

七 删除

image-20230705142834562

image-20230705142846192

八 计算属性

Vue专门提供了计算属性的功能，对数据进行筛选操作。

基本语法

语法：computed

特点：

  1. 在computed里面写的也是属性。
  2. computed里面函数必须要有返回值，依赖原数据得到一个新结果
  3. 计算属性，依赖于data，data一旦发生变化，计算属性立即重新执行，页面跟着更新

计算属性特性：

​ 计算属性具有缓存功能，在一个页面中重复使用这个计算属性，Vue底层默认将结果缓存起来。多次使用调用一次，其他标签再次使用默认缓存中拿结果。

完整功能

<template>
  <div>
    {{firstName}} -- {{username}}
    <button @click="updateName">修改</button>
    <button @click="updateComputed">修改计算属性的值</button>
  </div>
</template>

<script>
export default {
  //data跟computed里面的属性名不能重复
  data(){
    return{
      username:"赵日天",
    }
  },
  /**
   * 计算属性
   * 作用:处理data中的数据,得到新的结果,赋值给新的属性名
   * 特点:当data中的数据发生变化时,computed计算属性会重新执行
  */
  computed:{
    firstName:{
      //get函数用来给属性赋值,必须要有返回值
      get(){
        console.log("-------------");
        const u = this.username.split("")[0]
        return u
      },
      //set用来接收修改计算属性的值
      set(val){
        console.log(val);
      }
    }
  },
  methods:{
    updateName(){
      this.username = "刘斩仙"
    },
    updateComputed(){
      this.firstName = "李"
    }
  }
}
</script>

<style>

</style>

九 DOM操作

1 给标签添加ref属性

image-20230705173552694

2 获取dom元素的值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9KxXApXj-1692931215520)(https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/chenyun20230705173633.png)]

十 计算属性实战

<template>
  <div class="container">
    <div class="search">
      <div>
        <label for="">拼团状态：</label>
        <select  ref="sel" >
          <option value="all">全部</option>
          <option value="open">开启</option>
          <option value="close">关闭</option>
        </select>
      </div>
      <div>
        <label for="">商品搜索：</label>
        <input ref="goodsName" type="text" />
      </div>
      <button @click="searchByStatusAndName">搜索</button>
      <button @click="searchGoodsShow('up')">查询上架商品</button>
      <button @click="searchGoodsShow('down')">查询下架商品</button>
      <button @click="searchGoodsShow('all')">所有数据</button>
    </div>

    <table class="goods_list">
      <thead>
        <tr>
          <th>编号</th>
          <th>拼团图片</th>
          <th>拼团名字</th>
          <th>原价</th>
          <th>拼团价格</th>
          <th>拼团人数</th>
          <th>参与人数</th>
          <th>成团数量</th>
          <th>限量</th>
          <th>剩余数量</th>
          <th>活动状态</th>
          <th>结束时间</th>
          <th>上/下架</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in goodList" :key="item.id">
          <td>{{item.id}}</td>
          <td>
            <img :src="item.img" alt="">
          </td>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td>{{item.spellPrice}}</td>
          <td>{{item.spellPeople}}</td>
          <td>{{item.joinPeople}}</td>
          <td>{{item.spellNumber}}</td>
          <td>{{item.limit}}</td>
          <td>{{item.residue}}</td>
          <td>
            <span>{{item.status?"进行中":"已结束"}}</span>
          </td>
          <td>{{item.endTime}}</td>
          <td>
            <button @click="changeShow(item.id)" :class="item.show?'xiajia':'shangjia'">{{item.show?"下架":"上架"}}</button>
          </td>
          <td>
            <button @click="deleteById(item.id)">删除</button>
            <button>修改</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="14">
            <button><<</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>>></button>
            当前第 <span>1</span> 页/共 <span>3</span> 页
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showState:"all", //查询商品的上下架状态, all up  down
      searchStatus:"all", //查询拼团状态 all open close
      searchName:"",  //根据名称查询商品
      tempList: [
        {
          id: 1, //编号
          img: require("../assets/images/5.jpg"), //图片
          name: "香氛无火香薰精油卧室助眠除臭", //拼团商品名字
          price: 59, //原价
          spellPrice: 48, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 25, //限制数量
          residue: 20, //剩余数量
          status: true,
          endTime: "2022-12-23 00:00:00",
          show: true,//上下架
        },
        {
          id: 2, //编号
          img: require("../assets/images/b.png"), //图片
          name: "小米家保温杯云米电热杯", //拼团商品名字
          price: 59, //原价
          spellPrice: 48, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 25, //限制数量
          residue: 20, //剩余数量
          status: false,
          endTime: "2022-12-23 00:00:00",
          show: false,
        },
        {
          id: 3, //编号
          img: require("../assets/images/b.png"), //图片
          name: "小米家保温杯云米电热杯", //拼团商品名字
          price: 59, //原价
          spellPrice: 48, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 25, //限制数量
          residue: 20, //剩余数量
          status: false,
          endTime: "2022-12-23 00:00:00",
          show: false,
        },
        {
          id: 4, //编号
          img: require("../assets/images/f.jpg"), //图片
          name: "Casio卡西欧女表时尚", //拼团商品名字
          price: 1200, //原价
          spellPrice: 1000, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 10, //限制数量
          residue: 4, //剩余数量
          status: false,
          endTime: "2022-12-23 00:00:00",
          show: false,
        },
        {
          id: 5, //编号
          img: require("../assets/images/7.jpg"), //图片
          name: "爱奇艺智能 奇遇LT01 投影仪", //拼团商品名字
          price: 59, //原价
          spellPrice: 48, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 25, //限制数量
          residue: 20, //剩余数量
          status: false,
          endTime: "2022-12-23 00:00:00",
          show: false,
        },
        {
          id: 6, //编号
          img: require("../assets/images/8.jpg"), //图片
          name: "TOMFORD汤姆福特唇膏4色TF口红", //拼团商品名字
          price: 59, //原价
          spellPrice: 48, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 25, //限制数量
          residue: 20, //剩余数量
          status: false,
          endTime: "2022-12-23 00:00:00",
          show: false,
        },
        {
          id: 7, //编号
          img: require("../assets/images/9.jpg"), //图片
          name: "云麦体脂秤称重女智能精准成人脂肪测量仪", //拼团商品名字
          price: 59, //原价
          spellPrice: 48, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 25, //限制数量
          residue: 20, //剩余数量
          status: false,
          endTime: "2022-12-23 00:00:00",
          show: false,
        },
        {
          id: 8, //编号
          img: require("../assets/images/10.jpg"), //图片
          name: "本来设计挂钟原木时钟创意现代简约实木", //拼团商品名字
          price: 59, //原价
          spellPrice: 48, //拼团价格
          spellPeople: 3, //拼团人数
          joinPeople: 6, //参与人数
          spellNumber: 2, //成团数量
          limit: 25, //限制数量
          residue: 20, //剩余数量
          status: false,
          endTime: "2022-12-23 00:00:00",
          show: false,
        },
      ],
    };
  },
  methods:{
    changeShow(id){
      //找到要上下架的商品
      const goods = this.tempList.find(e =>e.id == id)
      goods.show = !goods.show
    },
    deleteById(id){
      //根据id找到商品在数组中的下标
      const index = this.tempList.findIndex(e =>e.id == id)
      //根据下标删除
      this.tempList.splice(index,1)
    },
    searchGoodsShow(val){
      this.showState = val
    },
    //根据商品的拼团状态和名称进行搜索
    searchByStatusAndName(){
      //获取到下拉列表的值
      this.searchStatus = this.$refs.sel.value
      //获取输入框的值
      this.searchName = this.$refs.goodsName.value
    }
  },
  computed:{
    goodList:{
      get(){
        //查询上下架
        let arr = this.tempList.filter(e =>{
          if(this.showState == "all"){//筛选所有商品
            return e
          }else if(this.showState == "up"){//筛选上架商品
            if(e.show == true){
              return e
            }
          }else if(this.showState == "down"){//筛选下架商品
            if(e.show == false){
              return e
            }
          }
        })

        //查询拼团状态
        arr = arr.filter(e =>{
          if(this.searchStatus == "all"){ //筛选所有的拼团商品
            return  e
          }else if(this.searchStatus == "open"){//筛选正在进行的拼团商品
            if(e.status == true){
              return e
            }
          }else if(this.searchStatus == "close"){ //查询已结束的拼团商品
            if(e.status == false){
              return e
            }
          }
        })

        //根据商品名称查询
        arr = arr.filter(e =>e.name.includes(this.searchName))


        return arr
      },
      set(val){
        console.log(val);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .search {
    width: 100%;
    margin-bottom: 30px;

    label {
      color: gray;
    }

    select {
      width: 220px;
      height: 30px;
      box-sizing: border-box;
    }

    input {
      width: 220px;
      height: 30px;
      box-sizing: border-box;
      margin: 10px 0px;
    }

    button {
      width: 100px;
      height: 35px;
      background-color: #cce8eb;
      border: none;
      outline: none;
      color: white;
      border-radius: 3px;
      margin-right: 5px;
      color: black;
      &:active {
        background-color: orange;
      }
    }
  }

  table {
    border: 1px black solid;
    border-collapse: collapse;
    text-align: center;
    background-color: white;
    th {
      border: 1px #e5ecf1 solid;
      width: 100px;
      background: #d5e6e9;
    }
    td {
      border: 1px #e5ecf1 solid;
    }
    tbody {
      tr {
        td {
          > img {
            width: 60px;
            height: 60px;
          }
        }
        td:nth-child(2) {
          padding: 6px;
        }
        td:nth-child(3) {
          text-align: left;
        }
        td:nth-child(11) {
          span {
            width: 40px;
            height: 14px;
            background: #eefdfb;
            border: 1px #caede9 solid;
          }
        }
        td:nth-child(13) {
          //下架按钮样式
          .xiajia {
            background: #568ce3;
            color: white;
            width: 50px;
            height: 30px;
            border: none;
          }
          //上架按钮样式
          .shangjia {
            background: white;
            color: #568ce3;
            width: 50px;
            height: 30px;
            border: 1px #568ce3 dotted;
          }
        }
        td:nth-child(14) {
          button {
            background: #eeeeee;
            width: 40px;
            height: 20px;
            border: 1px #a7a7a7 solid;
          }
        }
      }
    }
    tfoot {
      tr {
        td {
          text-align: right;
          height: 80px;
          padding-right: 40px;
          button {
            width: 30px;
            height: 30px;
            background: white;
            color: #568ce3;
            border: 1px #eeeeee solid;
          }
        }
      }
    }
  }
}
</style>
金霖海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Day01-Vue基础
金霖海的博客
08-25 82
Vue是一个JavaScript框架，将HTML+CSS+JS进行了封装,让我们可以在框架的基础上快速进行项目开发,vue开发的是单页应用数据驱动：一旦数据发生变化,页面立即更新;页面上发生变化,数据也会跟着更新.尽量减少对DOM操作。
Day03-Vue进阶
2401_84152317的博客
04-19 739
前端面试题汇总前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。
VUE-day01-vue基础使用
蜗牛的博客
09-19 300
Vue.js是一套构建用户界面的渐进式框架。与其他轻量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Day03-Vue进阶(1)
2401_84152308的博客
04-19 767
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；
day25-Vue基础
Hokage_rob的博客
08-24 146
一 认识Vue Vue就是一个js的一个库，这个库中提供了一个Vue类，通过这个类的对象可以和htnl中的标签进行绑定。 1.1.Vue对象 new Vue({ el:需要绑定的标签的id选择器, data:对象 - 为被绑定的标签提供各种数据 methods:对象 - 通过提供方法来提供功能, computed:对象 - 通过提供方法来提供数据 }) 1.2.指令 ①{{Vue属性}} - 标签内容 <p>{{message}}</p> <a href="">{{m
day05-vue入门
hu_zhi_chao的博客
06-22 464
vue入门学习目标0.前言1.认识Vue2.Node和NPM2.1.下载Node.js2.2.NPM3.快速入门3.1.创建工程3.2.安装vue3.2.1.下载安装3.2.2.使用CDN3.2.3.推荐npm安装3.3.vue入门案例3.3.1.HTML模板3.3.2.vue声明式渲染3.3.3.双向绑定3.3.4.事件处理4.Vue实例4.1.创建Vue实例4.2.模板或元素4.3.数据4.4.方法4.5.生命周期钩子4.5.1.生命周期4.5.2.钩子函数4.5.3.this5.指令5.1.插值表达式
Day05-Vue基础
金霖海的博客
08-25 387
-- 插槽 -->
day03---Vue(03)
DKPT的博客
06-27 163
一、介绍 1、Vue.js 是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 官方网站：https://cn.vuejs.org 2、初始Vue.js 首先引入vue.min.js到项目文件目录下。 创建 demo.html <!DOCTYPE html> <html
Day02-Vue基础
金霖海的博客
08-25 313
注意:v-show实现的是标签的显示和隐藏,当值为false时,表签会隐藏起来,我们只是看不见,但是它还在页面。{{}}插值表达式: 再指定标签中间,插入我们动态值。v-if值false，直接在页面上删除这个节点。v-html 指令：向双标签插入html代码。v-show值false，通过内联样式。v-show:接收的是boolean值。v-on:事件类型 或 @事件类型。v-text指令：向双标签插入文本。v-bind: 属性名可以简写为。
DAY01-VUE Cli基础-01
06-20
Vue的创建和基础操作
day01_Vue01-基础语法3.ppt
01-15
vue 基础知识点
vue-基础-day01.md
01-10
vue-基础-day01.md
Vue基础day1学习资料.zip
03-31
内涵案例、笔记、PPT、作业，介绍Vue基础语法，涵盖Vue全家桶基础的pdf，笔记和照片用markdown书写
Vue基础day4学习资料.zip
03-31
内涵案例、笔记、PPT、作业，介绍Vue基础语法，涵盖Vue全家桶基础的pdf，笔记和照片用markdown书写
vite+ts+mock+vue-router+pinia实现vue的路由权限
最新发布
beekim的博客
05-20 264
vite.config.ts配置。
vue中computed计算属性
luna_H的博客
05-19 288
4.原理使用了Object.defineproperty(目标对象,名称,{get(),set(value)})5.watch默认监听一层，需要监听多级如对象中的值，需要添加深度监听deep:true。4.写法：第一种Vue实例中，第二种实例化vm.$watch("监听的属性",{})写法：监听的属性名(新值,旧值){}2.被Vue实例管理的函数最好都使用普通函数，不被Vue实例管理的函数最好都使用箭头函数，1.computed能做到的watch都可以，watch能做到的computed不一定能。
vue中的事件
weixin_43390711的博客
05-16 198
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
基于Vue3 + js-tool-big-box工具库实现3个随机数字的小游戏动画，快来挑战你的非凡手气！
xingyu_qie的专栏
05-17 876
基于Vue3 + js-tool-big-box的3个随机数字
使用v-for指令循环遍历课表数据，渲染效果如下1-10周(1-5节)-星期一-软件测试基础-本部-实222 9-16周(6-9节)-星期一-大数据系统综合运用-本部-实333 9-16周(6-9节)-星期二-大数据系统综合运用-本部-实333 9-16周(1-4节)-星期三-大数据系统综合运用-本部-实333 9-18周(10-13节)-星期三-Vue应用程序开发-本部-实222
06-13
name: '软件测试基础', location: '本部-实222' }, { week: '9-16', time: '6-9', day: '星期一', name: '大数据系统综合运用', location: '本部-实333' }, // ... ] ``` 然后你可以使用 `v-for` 指令...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值