Vue

by superj80820

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>Title</title>
</head>

<body>
    <div id="app">
      <header>
        <ul class="nav nav-pills pull-right">
          <li role="presentation">
            <a href="#" v-on:click="test">選單訊息</a>
          <li>
          <li role="presentation">
            <a href="#">開發中</a>
          <li>
          <li role="presentation">
            <a href="#">開發中</a>
          <li>
          <li role="presentation">
            <a href="#">開發中</a>
          <li>
        </ul>
      </header>
      <br>
       <div class="panel panel-default">
          <div class="panel-heading">
              <h3 class="panel-title">
                  請輸入要line要公佈的選單訊息
              </h3>
          </div>
          <div class="panel-body">
              <div>
                  <img :src="img_url" />
              </div>
              <div class="textDiv">
                  <textarea rows="5" style="resize: none;"></textarea>
              </div>
              <button type="button" class="btn">預覽</button>
          </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</body>

</html>

CSS

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
* {
    font-family: 'Noto Sans TC';
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

header {
  display: flex;
  justify-content: flex-end;
  background-color: #F287A7;
  color: #FFFFFF;
}

img {
  width: 100%;
}

.nav>li>a.active,
.nav>li>a:hover,
.nav>li>a:focus {
   background-color: #f7bacd;
}

a {
  color: white;
}

button {
  float: right;
}

.textDiv {
	display: flex;
  flex-direction: column;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
  	img_url: "https://metabolicapproachtocancer.files.wordpress.com/2016/09/broccoli-chemistry.jpg"
  },
  methods:{
    test: function(){
      alert("設計中");
    }
  }
})