全局过滤器＋调用
一个vue文件就是一个组件，今天学习的是在html文件中使用组件，组件的最大的特点就是复用，组件和模块化的区别就是模块是根据业务逻辑进行拆分，拆分成一个个业务模块，如门诊，药房等，相同点二者都可以复用，组件是针对UI页面的，
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>创建组件</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <login></login> </div> <script type="text/javascript"> //使用extend创建 let login =Vue.extend({ template:"<h1>登录组件</h1>" }); //创建组件 Vue.component("login",login); let vm=new Vue({ el:'#app', data:{ msg:"hello vue" }, methods:{ } }); </script> </body> </html>
创建方式2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>创建组件</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <login></login> </div> <script type="text/javascript"> //使用extend创建 // let login =Vue.extend({ // template:"<h1>登录组件</h1>" // }); //创建组件 Vue.component("login",{ template:"<h1>登录组件</h1>" }); let vm=new Vue({ el:'#app', data:{ msg:"hello vue" }, methods:{ } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>创建组件</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <login></login> </div> <script type="text/javascript"> //使用extend创建 let login ={ template:"<h1>登录组件</h1>" }; //使用模板对象创建组件 Vue.component("login",login); let vm=new Vue({ el:'#app', data:{ msg:"hello vue" }, methods:{ } }); </script> </body> </html>
第三种注册组件，用的最多
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>创建组件</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <login></login> </div> <!-- 定义组件模板时，要放在el外--> <template id="com"> <div> <h1>注册组件</h1> <button type="button">组件</button> </div> </template> <script type="text/javascript"> //使用extend创建 let login ={ template:"#com" }; //使用模板对象创建组件 Vue.component("login",login); let vm=new Vue({ el:'#app', data:{ msg:"hello vue" }, methods:{ } }); </script> </body> </html>
局部
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>创建组件</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <login></login> </div> <!-- 定义组件模板时，要放在el外--> <template id="com"> <div> <h1>注册组件{{msg}}</h1> <button type="button">组件</button> </div> </template> <script type="text/javascript"> //使用模板对象创建组件 let vm=new Vue({ el:'#app', data:{ msg:"hello vue" }, methods:{ }, components:{ login:{ template:"#com", //组件中定义的data必须为function，而且必须要return一个，否则用不了 data(){ return{ msg:'nihao' } }}} }); </script> </body> </html>
组件中定义的data必须为function，而且必须要return一个对象，否则用不了
一个组件可以被引用无数次
return一个对象就是方式被多个组件共享
使用flag实现组件的切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>创建组件</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> .v-enter, .v-leave-to{ opacity: 0; transform: translateX(200px); } .v-enter-active, .v-leave-active{ transition: all 0.8s ease; } </style> </head> <body> <div id="app"> <a href="#" @click="comName='login'">登录</a> <a href="#" @click="comName='register'">注册</a> <a href="#" @click="comName='wxlogin'">微信登录</a> <!-- <login v-if="flag"></login> <register v-else="!flag"></register> <wxlogin v-else="!flag"></wxlogin> --> <!-- 多组件切换用comment便签的is属性 --> <transition mode="out-in"> <comment :is="comName"></comment> </transition> </div> <!-- 定义组件模板时，要放在el外--> <template id="login"> <div> <h1>登录组件</h1> </div> </template> <template id="register"> <div> <h1>注册组件</h1> </div> </template> <template id="wxlogin"> <div> <h1>微信登录</h1> </div> </template> <script type="text/javascript"> //使用extend创建 let login ={ template:"#login" }; let register ={ template:"#register" }; let wxlogin ={ template:"#wxlogin" }; //使用模板对象创建组件 let vm=new Vue({ el:'#app', data:{ comName:'wxlogin' }, methods:{ }, components:{ //如果名字相同可以直接写login login:login, register:register, wxlogin:wxlogin } }); </script> </body> </html>
父组件向子组件数组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{msg}} <!-- 使用子组件用v-bind给父组件的变量绑定一个别名 --> <login :sonmsg="msg"></login> </div> <!-- 定义组件模板时，要放在el外--> <template id="com"> <div> <h1>注册组件{{sonmsg}}</h1> <button type="button" @click="test()">组件</button> </div> </template> <script type="text/javascript"> //使用模板对象创建组件 let vm=new Vue({ el:'#app', data:{ msg:"hello vue" }, methods:{ }, components:{ login:{ template:"#com", //组件中定义的data必须为function，而且必须要return一个，否则用不了 data(){ return{ } }, methods:{ test(){ alert(this.sonmsg) } }, // 数组的作用用来声明接受父组件数据的变量 props:[ 'sonmsg' ] }} }); </script> </body> </html>
子组件向父组件数组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{msg}} <!-- 在使用子组件时，通过v-on 来绑定父组件的方法,show不加括号，加的话就方法的调用，现在只是赋值 --> <login @func="show"></login> </div> <!-- 定义组件模板时，要放在el外--> <template id="com"> <div> <h1>注册组件</h1> <button type="button" @click="test()">按钮</button> </div> </template> <script type="text/javascript"> //使用模板对象创建组件 let vm=new Vue({ el:'#app', data:{ msg:"fuzhujian" }, methods:{ show(data){ alert('fu'+data); }, components:{ login:{ template:"#com", //组件中定义的data必须为function，而且必须要return一个，否则用不了 data(){ return{ } }, methods:{ test(){ // 调用func方法就是调用父组件的show方法,通过$emit调用func this.$emit("func","哈哈") } }, }}} }); </script> </body> </html>
评论列表
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>评论列表</title> <script src="../js/vue-2.4.0.js"></script> <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.css"/> </head> <body> <div id="app"> <!--如果组件命名时，使用了驼峰命名法，则引用组件时要使用中划线--> <com-msg @func="getContent"></com-msg> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item.id"> <span class="badge">评论人： {{ item.name }}</span> {{ item.content }} </li> </ul> </div> <template id="temp"> <div> <div class="form-group"> <label>评论人：</label> <input type="text" class="form-control" v-model="name"> </div> <div class="form-group"> <label>评论内容：</label> <textarea class="form-control" v-model="content"></textarea> </div> <div class="form-group"> <input type="button" value="发表评论" class="btn btn-primary" @click="postContent"> </div> </div> </template> <script type="text/javascript"> let vm = new Vue({ el: "#app", data: { list: [ ] }, created() { //调用方法 this.getContent(); }, methods: { getContent() { //获取localStorage中的数组 let conList = JSON.parse(localStorage.getItem("msg") || "[]"); this.list = conList; } }, components: { comMsg: { template: "#temp", data() { return { name: "", content: "" } }, methods: { postContent() { //1. 用接收表单的值构造对象 let obj = {id: Date.now(),name:this.name,content:this.content} //2. 从localstorage中获得对象数组。但是，localstorage中只能存储字符串。JSON.parse() let list = JSON.parse(localStorage.getItem("msg") || "[]"); //3. 把对象添加到本地存储localStorage中的数组里 list.unshift(obj); //4. 把对象数组保存到localstorage中。JSON.stringify() localStorage.setItem("msg", JSON.stringify(list)); this.name = this.content = ''; //5. 调用getContent刷新列表 this.$emit("func"); } } } } }); </script> </body> </html>
