商品列表和单页应用程序介绍

每天都在重学前端的小菜鸟
107 阅读1分钟

商品列表

image-20240201230558458.png

image-20240202124239351.png

<template>
  <div class="my-tag">
    <input 
    ref="inp"
    v-if="isEdit" 
    type="text " 
    class="input" 
    placeholder="输入标签" 
    @blur="isEdit=false"/>
    <div v-else class="text" @dblclick="handleClick">茶具</div>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      isEdit: false,
    };
  },
  methods: {
    handleClick() {
        //双击后，切换到显示状态
      this.isEdit = true
      //等dom更新完，再获取焦点
      this.$nextTick(()=>{
        //立刻获取焦点
        this.$refs.inp.focus()
      })
    },
  },
};
</script>
​
<style>
</style>

import Vue from 'vue'
import App from './App.vue'
​
Vue.config.productionTip = false
//全局注册指令
Vue.directive('focus',{
  //inserted会在指令所在的元素，被插入到页面中时触发
  inserted(el){
    //el就是元素所绑定的元素
    el.focus()
​
  }
})
new Vue({
  render: h => h(App),
}).$mount('#app')
​

image-20240202171141902.png

<template>
  <div class="table-case">
    <table class="my-table">
      <thead >
        <tr class="dao">
          <th>编号</th>
          <th>图片</th>
          <th>名称</th>
          <th width="100px">标签</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>101</td>
          <td>
            <img
            width="80px"
            height="80px"
              src="https://img.alicdn.com/imgextra/i1/1545820169/O1CN01tNoG4V1D7Rik5Vjvb_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"
              alt=""
            />
          </td>
          <td>德国不锈钢保温杯男款</td>
          <td>
            <!-- 标签组件 -->
            <MyTag v-model="tempText"></MyTag>
          </td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>101</td>
          <td>
            <img
              width="80px"
            height="80px"
              src="https://img.alicdn.com/imgextra/i1/1545820169/O1CN01tNoG4V1D7Rik5Vjvb_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"
              alt=""
            />
          </td>
          <td>德国不锈钢保温杯男款</td>
          <td>
            <!-- 标签组件 -->
            <MyTag></MyTag>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
​
<script>
​
import  MyTag from './component/MyTag.vue'
​
​
export default {
  name: "TableCase",
  components:{
    MyTag
  },
  data() {
    return {
​
      //测试组件功能的临时数据
      tempText:'茶壶',
      goods: [
        {
          id: 101,
          picture:
            "https://img.alicdn.com/imgextra/i1/1545820169/O1CN01NKE3Ue1D7Ri1BfIsq_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        },
        {
          id: 102,
          picture:
            "https://img.alicdn.com/imgextra/i1/1545820169/O1CN01NKE3Ue1D7Ri1BfIsq_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        },
        {
          id: 103,
          picture:
            "https://img.alicdn.com/imgextra/i1/1545820169/O1CN01NKE3Ue1D7Ri1BfIsq_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        },
        {
          id: 104,
          picture:
            "https://img.alicdn.com/imgextra/i1/1545820169/O1CN01NKE3Ue1D7Ri1BfIsq_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        },
      ],
    };
  },
};
</script>
​
<style  scoped>
.my-tag{
  width: 50px;
  margin: auto;
}
​
​
</style>

image-20240202171432648.png

<template>
  <div class="table-case">
    <MyTable :data="goods">
      <template #head>
        <th>编号</th>
        <th>图片</th>
        <th>名称</th>
      </template>
      
      <th width="100px">标签</th>
      <template #body="{item,index}">
        <td>{{index+1}}</td>
          <td>
            <img
            width="80px"
            height="80px"
              :src="item.picture"
              alt=""
            />
          </td>
          <td>{{item.name}}</td>
          <td>
            <!-- 标签组件 -->
            <MyTag v-model="tempText"></MyTag>
          </td>
      </template>
    </MyTable>
  </div>
</template>
​
<script>
import MyTag from "./component/MyTag.vue";
import MyTable from "./component/MyTable.vue";
​
export default {
  name: "TableCase",
  components: {
    MyTag,
    MyTable,
  },
  data() {
    return {
      //测试组件功能的临时数据
      tempText: "茶壶",
      goods: [
        {
          id: 101,
          picture:
            "https://img.alicdn.com/imgextra/i1/1545820169/O1CN01NKE3Ue1D7Ri1BfIsq_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        },
        {
          id: 102,
          picture:
            "https://img.alicdn.com/imgextra/i1/1545820169/O1CN01NKE3Ue1D7Ri1BfIsq_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        },
        {
          id: 103,
          picture:
            "https://img.alicdn.com/imgextra/i1/1545820169/O1CN01NKE3Ue1D7Ri1BfIsq_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        },
        {
          id: 104,
          picture:
            "https://img.alicdn.com/imgextra/i1/1545820169/O1CN01NKE3Ue1D7Ri1BfIsq_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",
        },
      ],
    };
  },
};
</script>
​
<style  scoped>
.my-tag {
  width: 50px;
  margin: auto;
}
</style>

<template>
   <table class="my-table">
      <thead >
        <tr >
          <slot name="head"></slot>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <slot name='boby' :item="item"></slot>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>101</td>
          <td>
            <img
              width="80px"
            height="80px"
              src="https://img.alicdn.com/imgextra/i1/1545820169/O1CN01tNoG4V1D7Rik5Vjvb_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"
              alt=""
            />
          </td>
          <td>德国不锈钢保温杯男款</td>
          <td>
            <!-- 标签组件 -->
            <MyTag></MyTag>
          </td>
        </tr>
      </tbody>
    </table>
</template>
​
<script>
export default {
  props:{
    data:{
      type:Array,
      require:true
    }
  }
​
}
</script>
​
<style>
​
</style>

image-20240202204713459.png

单页应用程序和路由介绍

image-20240202204929886.png

image-20240202204944099.png

路由的基本使用

VueRouter的介绍

image-20240202210722711.png

image-20240202212549065.png

import Vue from 'vue'
import App from './App.vue'
​
​
​
import VueRouter from 'vue-router'
Vue.use(VueRouter)//VueRouter插件初始化
const router = new VueRouter()
Vue.config.productionTip = false
​
new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')
​

image-20240202215640370.png

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友音乐</a>
    </div>
    <div class="top">
      <!-- 路由出口，匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>
​
<script>
export default {};
</script>
​
<style>
</style>

import Vue from 'vue'
import App from './App.vue'
​
​
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
import VueRouter from 'vue-router'
Vue.use(VueRouter)//VueRouter插件初始化
const router = new VueRouter({
routes:[
  {path:'/find',components:Find},
  {path:'/my',component:My},
  {path:'/friend',component:Friend}
]
​
​
​
})
Vue.config.productionTip = false
​
new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')
​

组件目录存放问题

image-20240202233704040.png

image-20240202233802130.png

avatar
文章
阅读
粉丝