<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- //基本变量 -->
<p>{{message}}</p> <br>
<hr>
<!-- 绑定属性v-bind 简写： -->
<p v-bind:title='title'>Look at me,put mouse here</p> <br>
<hr>
<!-- 绑定事件v-on 简写@ -->
<button v-on:click='reverseMessage'>Click me</button> <br>
<hr>
<!-- 绑定条件v-if -->
<p v-if='seen'> Can you look at me?</p> <br>
<button type="submit" @click='isShow' value="Click">Click</button> <br>
<hr>
<!-- 绑定循环v-for -->
<ul>
<li v-for='(book,index) in books' :key='index'>
{{index}}==========={{book.id}}======={{book.author}}========={{book.name}}</li>
</ul>
<br>
<hr>
<!-- 绑定函数methods function（）{} -->
<button @click='deletebook'>DEL</button> <br>
<hr>
<!-- input type=text v-model绑定-->
<input type="text" v-model='inputmessage'>{{inputmessage}} <br>
<!-- <input type="text" v-model.lazy='inputmessage'>{{inputmessage}} <br> -->
<!-- <input type="text" v-model.trim='inputmessage'>{{inputmessage}} <br> -->
<!-- <input type="text" v-model.number='inputmessage'>{{inputmessage}} <br>
不要用 -->
<hr>
<!-- input radio v-model绑定 字符串或者数字属性 -->
<input type="radio" v-model='radiomessage' value="Yes">YES <br>
<input type="radio" v-model='radiomessage' value="No">NO <br>
{{radiomessage}} <br>
<hr>
<!-- input chcekbox v-model 绑定 复选框 数组属性 -->
<input type="checkbox" v-model='chcekmessage' value='a'>A <br>
<input type="checkbox" v-model='chcekmessage' value='b'>B <br>
<input type="checkbox" v-model='chcekmessage' value='c'>C <br>
{{chcekmessage}} <br>
<hr>
<!-- input textarea v-model 绑定文本信息 -->
<textarea v-model='testareamessage'></textarea> <br>
{{testareamessage}} <br>
<hr>
<!-- input button v-on 属性 简写@事件绑定 -->
<input type="button" value='Click' @click='say("你好，中国")'> <br>
<hr>
<!-- select option v-model 属性 绑定基本类型属性 -->
<select v-model='selectmessage'>
<option selected disabled value="">请选择</option>
<option value="AA">A</option>
<option value="BB">B</option>
<option value="CC">C</option>
<option value="DD">D</option>
</select> <br>
{{selectmessage}} <br>
<hr>
<!-- 插槽slot 组件插槽 绑定Vue.component('',{template:{},props:{}}) -->
<!-- 父组件和子组件通信 v-bind 简写： props绑定 -->
<!-- 子组件向父组件传值，子组件绑定事件，发送$emit('事件名称',传递参数),父组件监听事件'事件名称',触发事件 -->
<!-- 子组件向父组件传递多个值的时候，用arguments 来接住。 -->
<!-- 子组件向父组件传递单个值的时候，可以直接用传递的参数名来接住 -->
<app-view>
<app-header slot='app-header' :header='message'></app-header>
<app-content slot='app-content' v-for='(book,index) in books' :key='index' :index='index' :book=book
@subevent='sub(arguments)'></app-content>
</app-view>
</div>
<script>
// 自定义组件，组件插槽 // v-slot插槽 <slot name=""> slot=""
// template 中自定义组件不能作为根节点，要用其他标准标签包裹，在容器里。
Vue.component('app-view', {
template: `
<div>
<slot name='app-header'></slot>
<ul>
<slot name='app-content'></slot>
</ul>
</div>
`
})
Vue.component('app-header', {
props: ['header'],
template: '<div>{{header}}</div>'
})
Vue.component('app-content', {
props: ['book', 'index'],
template: `<li >
{{index}}==========={{book.id}}======={{book.author}}========={{book.name}}=====
<input type='submit' value="Alert" @click='subclick'/>
</li>`,
// template模板里 input标签定义子组件事件 点击事件 触发子组件方法。
// 子组件触发click事件通过$emit ==》发射==》 【事件名subevent 和参数值】 给父组件，父组件监听事件【事件名subevent】，触发事件函数sub(arguments)，调用父组件的方法。
methods: {
subclick: function () {
this.$emit('subevent', this.book, this.index, event);
}
}
}
)
// 创建Vue对象 Vue对象的属性包括 el data methods created computed mouted watch
var vm = new Vue({
// el 唯一最外层容器 document.getElementById #app document.getElementByClassName .app
el: '#app',
data: {
// 要绑定的属性 可以绑定到
// {{}}、 v-bind标签属性class style id等 v-on(注意事件名称要小写)标签事件 v-model(修饰符.trim .lazy .number)表单值value
// v-if 判断属性 控制标签的display:block v-show 标签的创建和销毁.
// v-for ul-li ol-li table-tr-td的标签的循环(item,index) in items 获取的(item,index)有顺序关系,
message: 'Hello,China.',
title: 'loading at' + new Date().toString(),
seen: true,
inputmessage: '',
radiomessage: '',
chcekmessage: [],
selectmessage: '',
testareamessage: '',
books: [
{ id: 1, author: 'A', name: 'Java' },
{ id: 2, author: 'B', name: 'Python' },
{ id: 3, author: 'C', name: 'C++' },
{ id: 4, author: 'D', name: 'PHP' },
{ id: 5, author: 'E', name: 'Javascript' },
]
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('');
},
isShow: function () {
this.seen = !this.seen;
},
deletebook: function () {
this.books.pop();
},
say: function (message) {
alert(message);
},
sub: function (arguments) {
console.log(arguments[0].author, arguments[0].name, arguments[1], arguments[2]);
// console.log(arguments.book);?
}
}
})
</script>
</body>
</html>
