实训综合运用 5

留言板

掌握数据双向绑定 v-model 的基本使用

掌握事件绑定和使用的基本过程

掌握常用的事件和事件修饰符的基本使用

熟悉生命周期函数的不同阶段和使用

掌握数据提交 POST 的基本过程*

进一步熟悉组件的基本作用和使用

进一步熟悉响应式数据的基本使用

创建项目或组件

加载历史数据并渲染；可以使用自键服务器或从大树小站在线资源获取

.留言内容较长时，应打点提示

.留言条目总数

参考接口
接口	说明
/message	全部拉取

输入内容，按 Alt + Enter 提交

.提交时，使用样式如动画形式高亮输入框提示用户

.提交时，可以选择保存在本地或自建服务器

单个留言条目删除

全部留言条目删除

其它

.轮播 - 可以采用第三方库 swiper

.定制字体 @font-face

.其它设计

注册*

登录*

留言*

响应式数据

let msgs = ref([])
let msg = ref('')
let isRem = ref(false)
let isFocus = ref(false)
let imgInd = ref(0)
let imgs = []

数据请求

数据渲染 - 条件渲染和列表渲染组合使用

输入框

<div class="cont">
  <input :class="['ipt', { 'border-color': isFocus }]" type="text" v-model.trim="msg"
    placeholder="message here. press ALT+Enter to submit" 
    @keyup.alt.enter="submitMsg" 
    @focus="getFocus"
    @blur="loseFocus">
</div>

const submitMsg = () => {
  if (msg.value) {
    msgs.value.unshift(msg.value)
    msg.value = ''
    isFocus.value = false
  }
}

const getFocus = () => {
  isFocus.value = true
}

const loseFocus = () => {
  isFocus.value = false
}

.ipt.border-color {
  border-color: #942d00;
}

单个留言条目删除 - 根据条目 id 从 msgs 中删除

全部留言条目删除 - 清空 msgs

<div class="subcount">
  <div>total {{ msgs.length }} messages</div>
  <button class="del-btn" @click="delAllMsg">
    <span v-if="msgs.length">delete</span>
    <span v-else class="iconfont icon-ban"></span>
  </button>
</div>

轮播 - 加载数据时，利用定时器循环背景图片并相应的调整指示器的样式

  <header class="header" :style="{ 'backgroundImage': 'url(' + imgs[imgInd] + ')' }">
    <div class="dot-box">
      <div :class="['dot', { 'active': ind == imgInd }]" v-for="(item, ind) in imgs.length " :key="item">{{ ind }}
      </div>
    </div>
  </header>

  onMounted(() => {
    ind = setInterval(() => {
      updateImg()
    }, 3000);
    axios.get('https://glpla.github.io/utils/data/todo.json')
      .then(res => {
        msgs.value = res.data.cont
      })
  })

其它样式的提升和优化

保存数据到本地存储 localStorage

定义服务器接口，保存数据到服务器

调整产品列表页项目，增加添加到购物车的功能

了解随机ID生成器的使用 Nano ID

保存/推送项目到自己的代码仓库

留言板

Message