Sidebar组件

在iconfont找到合适的图标，使用font-class的方式引入
在App的style中引入图标

  1. <style>
  2.    @import '//at.alicdn.com/t/font_496303_kqrjhri8l25d0a4i.css';
  3. </style>

使用图标

  1. <i class="iconfont icon-note"></i>

flex布局让Sidebar拉伸到与屏幕等高

  1. #app {
  2.   display: flex;
  3.   align-items: stretch;
  4. }

nth-child和nth-of-type的区别

p:nth-child(2) p元素，且是父元素的第二个子元素
p:nth-of-type(2) 同一父元素下的所有p元素中第二个

router-link-active

router-link选中后默认的class名为router-link-active
image.png
也可以通过active-class指定选中后的class名

  1. <router-link to="/note/1" active-class="selected">笔记</router-link>

table居中

使用display:table居中

  1. .fdiv {
  2.   display: table;
  3. }
  5. .sdiv {
  6.   display: table-cell;
  7.   vertical-align: center;
  8. }

表单录入和数据双向绑定

  1. <div class="form">
  2.   <h3 @click="showRegister">创建账户</h3>
  3.   <div v-show="isShowRegister" class="register">
  4.     <input type="text" :value="register.username" @input="register.username=$event.target.value" placeholder="用户名">
  5.     <input type="password" v-model="register.password" placeholder="密码">
  6.     <p v-bind:class="{error: register.isError}">{{register.notice}}</p>
  7.     <div class="button" @click="onRegister">创建账号</div>
  8.   </div>
  9.   <h3 @click="showLogin">登录</h3>
  10.   <div v-show="isShowLogin" class="login">
  11.     <input type="text" v-model="login.username" placeholder="输入用户名">
  12.     <input type="password" v-model="login.password" placeholder="密码">
  13.     <p v-bind:class="{error: login.isError}">{{login.notice}}</p>
  14.     <div class="button">登录</div>
  15.   </div>
  16. </div>

表单验证

  1.   onRegister() {
  2.     if(!/^[\w\u4e00-\u9fa5]{3,15}$/.test(this.register.username)){
  3.       this.register.isError = true
  4.       this.register.notice = '用户名必须3~15个字符，仅限于字母数字下划线和中文'
  5.       return
  6.     }
  8.     if(!/^.{6,16}$/.test(this.register.password)){
  9.       this.register.isError = true
  10.       this.register.notice = "密码长度为6~16位"
  11.       return
  12.     }
  13.     this.register.isError = false
  14.     this.register.notice = ''
  15.     console.log(`start register..., username:${this.register.username}, password:${this.register.password}`)
  16.   }

\w代表包括下划线在内的任意单词字符，等价于[0-9a-zA-Z_]
[\u4e00-\u9fa5]代表中文字符

使用transition添加动画

官方文档
在vue中添加过渡/动画需要用transition标签包裹

  1. <transition>
  2.   <div :class="{show: isShowRegister}" class="register">
  3.     <input type="text" :value="register.username" @input="register.username=$event.target.value" placeholder="用户名">
  4.     <input type="password" v-model="register.password" placeholder="密码">
  5.     <p v-bind:class="{error: register.isError}">{{register.notice}}</p>
  6.     <div class="button" @click="onRegister">创建账号</div>
  7.   </div>
  8. </transition>

css中添加transiton或者animation

  1. .login, .register {
  2.   padding: 0 20px;
  3.   border-top: 1px solid #eee;
  4.   height: 0;
  5.   overflow: hidden;
  6.   transition: height .4s;
  8.   &.show {
  9.     height: 193px;
  10.   }

vue调试工具

image.png