<!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>