Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

try use component

  • Loading branch information...
commit 1f6fd852bb3b040f7682e36f662784d802cec3ec 1 parent ff0f2a2
@switer authored
View
1  .gitignore
@@ -1 +1,2 @@
/bower_components
+/server/node_modules
View
13 common.css
@@ -0,0 +1,13 @@
+ul {
+ padding: 0;
+ margin: 0;
+}
+ul li {
+ padding: 0;
+ border-bottom: 1px solid #666;
+ line-height: 30px;
+ color: #999;
+}
+.hide {
+ display: none;
+}
View
0  header/header.css
No changes.
View
12 header/header.js
@@ -0,0 +1,12 @@
+!function (exports) {
+ Vue.component('vd-ello', {
+ template: 'hello world',
+ data: {
+ title: '首页'
+ },
+ created: function () {
+ console.log('header instance');
+ }
+ });
+
+}(window);
View
42 index.html
@@ -3,31 +3,18 @@
<head>
<meta charset="UTF-8">
<title>Vue Demo -- the MVVM Framework</title>
- <link rel="stylesheet" href="./search.css">
- <style>
- .hide {
- display: none;
- }
- .index-header {
- line-height: 50px; font-size: 18px;
- height: 50px;
- }
- ul {
- padding: 0;
- margin: 0;
- }
- ul li {
- padding: 0;
- border-bottom: 1px solid #666;
- line-height: 30px;
- color: #999;
- }
- </style>
+ <link rel="stylesheet" href="./common.css">
+ <link rel="stylesheet" href="./index/index.css">
+ <link rel="stylesheet" href="./header/header.css">
</head>
<body>
-
-<div class="search page" id="search">
- <div class=""></div>
+<script type="x-template" id='tpl-header'>
+ <header class="header">
+ <span>{{title}}</span>
+ </header>
+</script>
+<div class="search" id="search" message="hellow world">
+ <div v-component="vd-ello"></div>
<div class="" >
<input type="text" class="search-input"
v-model="searchInput"
@@ -43,8 +30,8 @@
<div class="{{suggestionStatus}}">
<div class="title-head {{historyPanelStatus}}">
<div class="title-text">搜索历史</div>
- <div class="title-btn title-btn-del tap-on tap-shadow"
- v-on="click: clearHistories">清空</div>
+ <button class=""
+ v-on="click: clearHistories">清空</button>
</div>
<div class="search-history {{historyPanelStatus}}" v-repeat="histories">
<button>{{name}}</button>
@@ -55,11 +42,10 @@
<div class="search-board">
<button v-repeat="boards">{{$value}}</button>
</div>
- <div class="searchFooter"></div>
</div>
-
<script src="bower_components/vue/dist/vue.js"></script>
- <script src="index.js"></script>
+ <script src="./header/header.js"></script>
+ <script src="./index/index.js"></script>
</body>
</html>
View
0  search.css → index/index.css
File renamed without changes
View
17 index.js → index/index.js
@@ -1,10 +1,21 @@
!function (exports) {
'use strict;'
+ Vue.component('vd-ello', {
+ template: 'hello world',
+ data: {
+ title: '首页'
+ },
+ created: function () {
+ console.log('header instance');
+ }
+ });
var index = new Vue({
el: '#search',
+ paramAttributes: ['message'],
+
data: {
searchInput: '',
histories: [],
@@ -12,14 +23,10 @@
suggetions: [],
historyPanelStatus: 'hide'
},
- directives: {
-
- },
created: function () {
+ console.log(this.message);
this.fetchHistories();
},
- computed: {
- },
methods: {
clearHistories: function () {
this.historyPanelStatus = 'hide';
Please sign in to comment.
Something went wrong with that request. Please try again.