<meta charset="utf-8"/>

<title>Vue 示例</title>

<div id="app">

<!-- <table>

<my-component message="来之父组件的数据"> </my-component>

<my-component warning-text="提示信息"> </my-component>

<input type="text" v-model="msg"/>

<my-component :message="msg" @input="handleInput"> </my-component>

<my-component :init-count="100"></my-component>

<!-- <Card style="width: 350px;">

<select name="" id="" v-model="selected">

<!-- <option :value="{ number: 123 }">123</option> -->

<option v-for="option in books" :value="option.name">{{option.author}}</option>

</select>

<p>{{ selected.number }}</p>

<input type="checkbox" name="" id="toggle-id" v-model="toggle" :true-value="value1" :false-value="value2">

<label for="toggle-id">复选框</label>

<p>{{ toggle }}</p>

<p>{{ value1 }}</p>

<p>{{ value2 }}</p>

<input type="radio" name="" id="" v-model="picked" :value="value">

<label for="">单选框</label>

<p>{{ picked }}</p>

<p>{{ value }}</p>

<input type="radio" id="radiolog" name="radiolog" :checked="picked"/>

<label for="radiolog">单选框</label>

<input type="checkbox" v-model="pickedValue" name="" value="html" id="html" />

<label for="html">HTML</label>

<input type="checkbox" v-model="pickedValue" name="" value="js" id="js" />

<label for="js">JavaScript</label>

<input type="checkbox" v-model="pickedValue" name="" value="css" id="css" />

<label for="css">CSS</label>

<p>{{ pickedValue }}</p>

<select name="" id="" v-model="selected" multiple>

<option value="html">HTML</option>

<option>JavaScript</option>

<option>Css</option>

</select>

<p>{{ selected }}</p>

<textarea @input="handleInput" name="" id="" cols="30" rows="10"></textarea>

<input type="text" v-model="message" placeholder="输入">

<p>输入的内容是{{ message }}</p>

<ul>

<li v-for="book in books">

{{ book.name }}

</li>

</ul>

<input type="text" v-model="username" placeholder="your name" />

<p>{{ username }}</p>

<p>{{ a / 2 }}</p>

<p> {{ a > 1 ? 'OK' : 'No'}}</p>

<p>当前时间: {{ date }}</p>

<p>格式化后 当前时间: {{ date | formatDate }}</p>

<span v-html="link"></span>

<span v-pre>{{data.books}}</span>

<span >{{ text.split(',').reverse().join(',') }}</span>

<span >{{ reversedText }}</span>

<!-- 注意，不使用计算属性时，在方法中定义要带() -->

<span >{{ reversedTextNumber() }}</span>

<hr/>

<span v-if="show">显示这段话</span>

<!-- <button v-on:dblclick="handleClose">点击隐藏上面一段话</button> -->

<button v-on:click="show = false">点击隐藏上面一段话</button>

<hr/>

<!-- <a v-bind:href="url">www.flycode.me</a>

<a :href="url">www.flycode.me</a>

<!-- <img :src="imgUrl" alt=""> -->

<hr/>

<p>姓名： {{ fullName }}</p>

<div class='static'　:class="{ 'active' : isActive, 'error' : isError } "></div>

<div :class="classes"></div>

<div :class="[activeCls, errorCls]"> </div>

<div :class="[isActive ? activeCls : '' , errorCls]"> </div>

<div :class="[{'active' : isActive }, errorCls]"> </div>

<div :style="{'color': color, 'fontSize': fontSize + 'px' }"> 文本 </div>

<div :style="styles"> 文本 </div>

<div id="app" v-clock>

<span v-once>{{ message }}</span>

</div>

<span v-if="status == 1">状态为1时 显示这段话</span>

<span v-else-if="status == 2">状态为2时 显示这段话</span>

<span v-else>其他情况 显示这段话</span>

<template v-if="type == 'name'">

<label for="" >your name</label>

<input type="text" placeholder="你的名字" key="name-input"/>

</template>

<template v-else>

<label for="" >your Email</label>

<input type="text" placeholder="你的邮箱" key="email-input"/>

</template>

<button @click="handleToggleClick">切换输入类型</button>

<div v-show="status === 2">display 显示这段文字</div>

<ul>

<li v-for="(value, key, index) in user">

{{ index }} - {{ key }} - {{ value }}

</li>

</ul>

<ul>

<template v-for="book in filterBooks">

<li>书名 {{ book.name }}</li>

<li>作者 {{ book.author }}</li>

</template>

</ul>

点击次数 ：{{ counter }}

<button @click="counter++"> + 1 </button>

<button @click="handleAdd(10)"> + 10 </button>

</div>

<script src="https://unpkg.com/vue/dist/vue.min.js" ></script>

<script>

var Child = {

template : '<div> 局部组件 </div>'

};

var data = {

counter: 0

};

var app = new Vue({

// el:　'#app',

el: document.getElementById('app'),

data:{

msg: '',

toggle: false,

value1: 'a',

value2: 'b',

picked: false,

value: 123,

// selected: ['Css', 'html'],

selected: '',

// picked: false,

pickedValue: ['js', 'html'],

message: '',

books : [

{ name:'中华上下五千年'},

{ name:'世界上下一万年'},

{ name:'十万个为什么'},

],

username : '',

a :　10,

date: new Date(),

link: '<a href="#"> 这是一个链接 </a>',

text: '123,456',

show: true,

url: 'http://www.flycode.me',

imgUrl: 'http://static.v5.javamall.com.cn/attachment/goods/201511240139201504_thumbnail.jpg',

firstName: 'Jack',

lastName: 'Green',

isActive: true,

isError: false,

// error: false,

// error: null,

error: {

type: 'fail'

},

activeCls: 'active',

errorCls: 'error',

color: 'red',

fontSize: 14,

styles: {

color: 'red',

fontSize: 14 + 'px',

},

message: 'hello world',

status: 2,

type : 'name',

user: {

name: 'Areason',

gender: '男',

age: 6

},

books: [

{name : 'Vue 实战', author: 'rocky'},

{name : 'D JavaScript 实战', author: 'rocky'},

{name : 'C JavaScript 实战1231', author: 'rocky'},

{name : 'B JavaScript 实战12', author: 'rocky'},

{name : 'A JavaScript 实战12', author: 'rocky'},

],

counter: 0,

},

component: {

'my-component': Child,

},

methods: {

handleClose: function () {

this.show = false;

},

reversedTextNumber: function () {

//这里的this指向的是当前的Vue实例

return this.text.split(',').reverse().join(',')

},

handleToggleClick: function() {

this.type = this.type === 'name' ? 'mail' : 'name';

},

handleAdd: function (counter) {

counter = counter || 1

this.counter += counter;

},

handleInput: function(e) {

return this.message = e.target.value;

}

},

computed: {

classes: function () {

return {

active: this.isActive && !this.error,

'text-fail': this.error && this.error.type === 'fail'

}

},

reversedText: function () {

//这里的this指向的是当前的Vue实例

return this.text.split(',').reverse().join(',')

},

fullName: {

// getter 用于读取

get: function () {

return this.firstName + ' ' + this.lastName;

},

// 写入时触发

set: function (newValue) {

var names = newValue.split(' ');

this.firstName = names[0];

this.lastName = names[names.length - 1];

}

},

filterBooks: function() {

return this.books.sort(function (a, b){

if (a.name < b.name)

return -1;

if (a.name > b.name)

return 1;

return 0;

});

},

},

created: function () {

// console.log(this.a); //2

},

// mounted: function () {

// console.log(this.$el) // <div id="app"></div>

// var _this = this;

// this.timer = setInterval(function () {

// _this.date = new Date();

// }, 1000)

// },

// beforeDestory: function () {

// if (this.timer) {

// clearInterval(this.timer);

// }

// },

});

app.books = app.books.filter(function (item){

return item.name.match(/JavaScript/);

});

Vue.component('my-component', {

// template: '<div>{{ msg }}</div>',

// data: function() {

// return {

// msg: '组件内容',

// }

// }

// template: '<button @click="counter++">{{ counter }}</button>',

// data: function() {

// return data;

// }

// template: '<button @click="counter++"> {{ counter }} </button>',

// data: function () {

// return {

// counter: 0

// };

// }

// props: ['message'],

// template: '<div>{{ message }}</div>'

// props: ['warningText'],

// template: '<div> {{ warningText }} </div>'

props: ['message'],

template: '<div>{{ message }}</div>'

// props: ['initCount'],

// // template: '<div> {{ count }} </div>',

// template: '<div :style="style"> 组件内容 </div>',

// data: function () {

// return {

// count: this.initCount,

// }

// },

// computed: {

// style: function () {

// return {

// width: this.initCount + 'px',

// }

// }

// }

});

// Vue.set(app.books, 2, {

// name: '<CSS 泄密>',

// author: ' Lea Verou'

// });

// this.$set(app.books, 3, {

// name: '<CSS 泄密>',

// author: ' Lea Verou'

// });

</script>