SOURCE

Vue.component('tips', {
  template: '<div class="tips"><div class="tips-box"><div class="tips-wrap"><span class="tips-close" v-on:click="closeTip">&nbsp;&nbsp;&nbsp;&nbsp;X</span><h3>hi,I am a tip</h3><div class="tips-content"><p>this is a tip! When you seen this message,your future has represented in front of you. And you will be a super hero in some day.<br>—from ASAT</p></div></div></div><div class="mask" v-on:click="closeTip"></div></div>',
  data: function() {
    return {
      closeTip: function() {
        document.querySelector(".tips").style.display = 'none';
      }
    }
  }
});

var toast = {
  template: '<div class="toast-tip show" v-if="this.isToast==true">{{this.customTag}}<span></span></div>'
}
var myHeader = {
  template: '<header class="header"><div class="header-wrap"><a class="logo" href="index.html"></a><ul class="nav"><li class="active"><a href="">首页</a></li><li><a href="">新闻</a></li><li><a href="">产品</a></li><li><a href="">服务</a></li></ul><div class="user-model"><div class="login-status" v-show="isLogin==true"><h3 v-html="userInfo.username"></h3><img id="user-avatar" v-bind:src="userInfo.avatar" alt=""/><ul class="user-menu"><li><a href="javascript:;">个人中心</a></li><li><a href="javascript:;" v-on:click="logOut">注销</a></li></ul></div><div class="login-model" v-show="isLogin==false"><button class="btn-login" type="button" v-on:click="login">登录</button><button class="btn-signup" type="button">注册</button></div></div></div></header>',
  data: function() {
    return {
      userInfo: {
        username: '覃华',
        avatar: 'http://img1.touxiang.cn/zhuantitu/hunda.jpg'
      },
      isLogin: true,
      // isLogin: false,
      // userInfo: null,
    }
  },
  methods: {
    login: function() {
      return myApp.login;
    },
    logOut: function() {
      return myApp.logOut;
    },
    // setUserInfo:function(){
      
    // console.log(myApp)
    // this.isLogin= myApp.$data.isLogin;
    //   this.userInfo= myApp.$data.userInfo;
    // }
  },
  // mounted:function(){
  //   this.setUserInfo()
  // }
};

var myFooter = {
  template: '<footer class="footer"><p class="copy-right">2012-2030&copy;华炫之光</p></footer>'
};

var myApp = new Vue({
  el: '#myapp',
  data: {
    title: '新的一天',
    description: '学会基本的用法',
    content: '<p>东极不是具体的一座岛的名称，它包括很多小岛。其中为人知晓的主要有三个，按照开发程度分别为庙子湖>东福山>青浜岛</p><img src="//upload-images.jianshu.io/upload_images/4324730-1279f9c58779ca23.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">',
    customTag: '',
    isToast: false,
    tags: ['Vue', 'React', 'Node'],
    isLogin: true,
    // userInfo: null,
    userInfo: {
      username: '覃华',
      avatar: 'http://img1.touxiang.cn/zhuantitu/hunda.jpg'
    },
    list: [{
      item: '结构',
      content: '熟悉基本的结构',
      optionList: ['第一节', '第二节']
    },
    {
      item: '模板',
      content: '全局注册和局部注册',
      optionList: []
    }]
  },
  components: {
    'my-header': myHeader,
    'my-footer': myFooter,
    'toast':toast,
  },
  methods: {
    login: function() {
      var udata = {
        username: '覃华',
        avatar: 'http://img1.touxiang.cn/zhuantitu/hunda.jpg'
      };
      localStorage.setItem("usrData", JSON.stringify(udata));
      this.userInfo = udata;
      this.isLogin = true;
    },
    checkLogin: function() {
      localStorage.setItem("usrData", JSON.stringify(udata));
      var udata = localStorage.getItem("usrData");
      udata ? (this.userInfo = udata, this.isLogin = true) : console.log("请记得登录！");
    },
    logOut: function() {
      localStorage.removeItem("usrData");
      this.userInfo = null;
      this.isLogin = false;
    },
    addTag: function() {
      if (this.customTag == "") {
        alert("不要糊弄我！");
        return;
      }
      if (this.tags.length > 7) {
        alert("最多8个");
        return;
      }
      for (var i = 0,
      len = this.tags.length; i < len; i++) {
        if (this.tags[i] === this.customTag.replace(/\s+/g, '')) {
          alert("已存在相似标签");
          return;
        }
      }
      this.tags.push(this.customTag);
    },
    deleteTag: function(index) {
      if (this.tags.length) {
        this.tags.splice(index, 1);
      }
    },
    showUserMenu: function() {
      document.querySelector(".user-menu").style.display = 'block';
    },
    showTip: function() {
      document.querySelector(".tips").style.display = 'block';
    },
    closeModel: function() {
      document.body.removeChild(document.querySelector(".view-model"));
    },
    viewImg: function() {
      var imgs = document.querySelectorAll(".the-content img");
      var viewModel = document.querySelector(".view-model") || null;
      if (!viewModel) {
        var model = document.createElement("div");
        model.className = 'view-model';
        model.onclick = this.closeModel;
        viewModel = model;
      }
      for (var i = 0,
      len = imgs.length; i < len; i++) {
        imgs[i].addEventListener("click", function() {
          viewModel.innerHTML = '<div class="mask"></div><div class="view-content"><img src="' + this.src + '"></div>';
          document.body.appendChild(viewModel);
        },
        false)
      }
    },
    showToast: function(msg) {
      var toast = document.createElement('div');
      toast.className = 'toast-tip';
      toast.innerHTML = '<span>' + msg + '</span>';
      toast.setAttribute('msg', msg);
      document.body.appendChild(toast);
      // this.isToast=true;
      document.querySelector(".toast-tip").classList.add("show");
      setTimeout(function() {
      // this.isToast=false;
        document.querySelector(".toast-tip").classList.remove("show");
        document.body.removeChild(document.querySelector(".toast-tip"));
      },
      1500)
    }
  },
  mounted: function() {
    this.checkLogin();
    this.viewImg();
    // this.setUserInfo();
  },
});
// myApp.$watch('customTag',function(oldVal,newVal){
//   console.log(newVal);
// })

<div id="myapp">
  <my-header>
  </my-header>
  <div class="container">
    <h1>
      {{title}}
      <span v-if="isLogin" style="padding:1px 2px;font-size:12px;color:#fff;background:#81dc5d;border-radius:3px">
        已登录
      </span>
    </h1>
    <!-- <input type="text" v-model='description' />
    -->
    <p class="description">
      {{description}}
    </p>
    <div v-html="content" class="the-content">
    </div>
    <button class="btn-showTip" type="button" v-on:click="showTip">
      显示提示
    </button>
    <button class="btn-showToast" type="button" v-on:click="showToast(customTag)">
      显示Toast
    </button>
    <div class="model-tag">
      <input type="text" v-model='customTag' placeholder="键入标签" />
      <button type="button" @click='addTag'>
        添加标签
      </button>
      <ul class="tags">
        <li v-for="(data,index) in tags">
          {{data}}
          <span @click="deleteTag(index)">
            x
          </span>
        </li>
      </ul>
    </div>
    <ol class="list">
      <li v-for="(data, index) in list">
        <p>
          <span>
            {{index}}.{{data.item}}：
          </span>
          {{data.content}}
        </p>
        <ul class="inner-list">
          <li v-for="inList in data.optionList">
            {{inList}}
          </li>
        </ul>
      </li>
    </ol>
  </div>
  <tips>
  </tips>
  <toast>
  </toast>
  <my-footer>
  </my-footer>
</div>

* {
  margin: 0;
  padding: 0;
  font-family: 'microsoft-yahei', '微软雅黑', arial, helvetica, sans-serif;
}

.header {
  height: 50px;
  background: #434348;
  .header-wrap {
    width: 1200px;
    margin: 0 auto;
  }
  .logo {
    float: left;
    display: block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background: #2f2f2f url(http://cdn.jsrun.net/css/img/logo.png) no-repeat center;
    background-size: auto 60%;
  }
  .nav {
    float: left;
    margin-left: 100px;
    list-style: none;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    li {
      float: left;
      a {
        cursor: pointer;
        display: block;
        text-decoration: none;
        padding: 0 50px;
        color: #fff;
        transition: .2s
      }
      &.active {
        a {
          color: #333;
          background: orange;
        }
      }
      a:hover {
        color: #333;
        background: orange;
      }
    }
  }
  .user-model {
    float: right;
    height: 50px;
    .login-model {
      button {
        cursor: pointer;
        height: 50px;
        margin-right: 10px;
        padding: 0 14px;
        border: none;
        color: #fff;
        background: none;
        &:first-child {
          color: lightgreen;
        }
        &:last-child {
          color: orange;
        }
      }
    }
    .login-status {
      position: relative;
      height: 50px;
      padding: 0 20px 0 40px;
      cursor: default;
      &:hover {
        background: #2f2f2f;
        ul {
          opacity: 1;
        }
      }
      img {
        float: left;
        display: block;
        width: 30px;
        height: 30px;
        margin-top: 10px;
        border-radius: 50%;
      }
      h3 {
        float: left;
        height: 50px;
        line-height: 50px;
        padding-right: 10px;
        font-weight: normal;
        font-size: 14px;
        color: #fff;
      }
      ul {
        opacity: 0;
        position: absolute;
        z-index: 5;
        left: 10px;
        top: 48px;
        list-style: none;
        font-size: 14px;
        text-align: center;
        box-shadow: 0 1px 5px #ccc;
        transition: .3s;
        &::before {
          position: absolute;
          top: -14px;
          left: 40px;
          display: block;
          content: '';
          width: 0;
          height: 0;
          border: 8px solid transparent;
          border-bottom-color: #fff;
        }
        li {
          a {
            display: block;
            padding: 6px 26px;
            color: #333;
            white-space: nowrap;
            text-decoration: none;
            background: #fff;
            &:first-child {
              border-bottom: 1px solid #eee;
            }
            &:hover {
              background: #eee;
            }
          }
        }
      }
    }
  }
}

.container {
  width: 1160px;
  margin: 0 auto;
  padding: 20px;
  background: #f8f8f8;
  h1 {
    padding: 10px 0;
  }
  .description {
    padding: 10px;
    font-style: italic;
    background: #fbfbb4;
  }
  .the-content {
    margin: 8px 0;
    box-sizing: border-box;
    padding: 20px;
    background: #fff;
    p {
      font-size: 14px;
    }
    img {
      margin: 20px 0;
      width: 500px;
    }
  }
  .btn-showTip {
    cursor: pointer;
    height: 30px;
    margin: 20px 0;
    padding: 0 20px;
    color: #fff;
    font-size: 12px;
    border: 1px solid #3764c3;
    background: #6491e6;
    border-radius: 3px;
  }
  .btn-showToast {
    cursor: pointer;
    height: 30px;
    margin: 20px 0;
    padding: 0 20px;
    color: #fff;
    font-size: 12px;
    border: 1px solid #3764c3;
    background: #6491e6;
    border-radius: 3px;
  }
  .model-tag {
    input {
      height: 30px;
      padding: 0 8px;
      border: 1px solid #eee;
      border-radius: 3px;
    }
    button {
      cursor: pointer;
      margin-left: 5px;
      height: 30px;
      padding: 0 20px;
      color: #fff;
      font-size: 12px;
      border: 1px solid #67a72b;
      background: #74ca2a;
      border-radius: 3px;
      &:hover {
        background: #7bc337;
      }
    }
    .tags {
      margin: 20px 0;
      overflow: hidden;
      list-style: none;
      li {
        float: left;
        margin-right: 6px;
        padding: 2px 2px 2px 10px;
        color: #fff;
        font-size: 12px;
        background: lightblue;
        border-radius: 4px;
        span {
          cursor: pointer;
          padding: 2px 10px;
          color: #7b7b7b
        }
      }
    }
  }
  .list {
    margin: 20px 0;
    li {
      list-style: none;
      list-style-position: inside;
      margin-left: 10px;
      font-size: 16px;
    }
    .inner-list {
      margin: 10px 0;
      li {
        list-style: circle;
        margin: 0 0 10px 50px;
        font-size: 14px;
        color: #666
      }
    }
  }
}

.view-model {
  .mask {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    background: rgba(0, 0, 0, .5);
  }
  .view-content {
    position: fixed;
    z-index: 10;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    width: 100%;
    height: auto;
    color: #333;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 3px 15px 0 #666;
    img {
      display: block;
      width: 80%;
      margin: 0 auto;
    }
  }
}

.tips {
  display: none;
  .mask {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    background: rgba(0, 0, 0, .5);
  }
  .tips-box {
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 450px;
    max-height: 240px;
    color: #333;
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 15px 0 #666;
    .tips-wrap {
      box-sizing: border-box;
      position: relative;
      width: 100%;
      height: 100%;
      padding: 20px 30px;
    }
    .tips-close {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 0;
      display: block;
      width: 36px;
      height: 36px;
      // text-align: center;
      line-height: 30px;
      font-size: 13px;
      color: #fff;
      background: #da6007;
      border-radius: 0 0 0 60px;
    }
    .tips-content {
      height: 180px;
      overflow: auto;
    }
    h3 {
      padding: 20px 0;
      text-align: center;
      font-size: 16px;
    }
    p {
      line-height: 1.8;
      font-size: 14px;
    }
  }
}

.footer {
  .copy-right {
    padding: 30px 0;
    text-align: center;
    color: #999;
  }
}

.toast-tip {
  opacity: 0;
  position: fixed;
  left: 50%;
  top: 50%;
  display: inline-block;
  padding: 16px 30px;
  white-space: no-wrap;
  background: rgba(0, 0, 0, .5);
  border-radius: 5px;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-transition: .2s;
  transition: .3s;
  span {
    text-align: center;
    color: #fff;
    font-size: 16px;
  }
  &.show {
    opacity: 1;
  }
}