VUE—从入门到飞起（四）

￡神魔★判官ぃ 2023-02-21 02:25 113阅读 0赞

目录

组件

组件创建方式

组件中的data和methods

组件切换方式

父组件向子组件传值

父组件把方法传递给子组件

案例：评论添加及列表显示

ref获取dom和组件

VUE—从入门到飞起（一）

VUE—从入门到飞起（二）

VUE—从入门到飞起（三）

VUE—从入门到飞起（四）

VUE—从入门到飞起（五）

组件

组件创建方式

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>创建组件1</title>
  6.         <script src="../../../thirdlib/vue/vue.min.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <!--如果要使用组件，直接把组件的名称以HTML标签的形式引入到页面中即可-->
  11.             <!--驼峰样式需要将字母小写，然后用-分隔-->
  12.             <my-com1></my-com1>
  13.         </div>
  14.         <script>
  15.             //1.1使用Vue.extend来创建全局Vue组件
  16.             /*var com1 = Vue.extend({
  17.                 //通过template属性，指定了组件要展示的html结构
  18.                 template: '<h3>这是用Vue.extend创建的组件</h3>'
  19.             })*/
  20.             //1.2使用Vue.component('组建的名称', 创建出来的组件模板对象)
  21.             //Vue.component('myCom1', com1);
  23.             //这里也可以不用分开
  24.             Vue.component('myCom1', Vue.extend({
  25.                 template: '<h3>这是用Vue.extend创建的组件</h3>'
  26.             }));
  27.             var vm = new Vue({
  28.                 el:"#app",
  29.                 data:{
  31.                 },
  32.                 methods:{
  34.                 }
  35.             })
  36.         </script>
  37.     </body>
  38. </html>
  40. <!DOCTYPE html>
  41. <html>
  42.     <head>
  43.         <meta charset="UTF-8">
  44.         <title>创建组件2</title>
  45.         <script src="../../../thirdlib/vue/vue.min.js"></script>
  46.     </head>
  47.     <body>
  48.         <div id="app">
  49.             <my-com1></my-com1>
  50.         </div>
  51.         <script>
  53.             Vue.component('myCom1', {
  54.                 template:'<div><h3>这是直接使用Vue.component创建的组件</h3><span>123</span></div>'
  55.             });
  57.             var vm = new Vue({
  58.                 el:"#app",
  59.                 data:{
  61.                 },
  62.                 methods:{
  64.                 }
  65.             })
  66.         </script>
  67.     </body>
  68. </html>
  70. <!DOCTYPE html>
  71. <html>
  72.     <head>
  73.         <meta charset="UTF-8">
  74.         <title>用template创建组件</title>
  75.         <script src="../../../thirdlib/vue/vue.min.js"></script>
  76.     </head>
  77.     <body>
  78.         <div id="app">
  79.             <my-com1></my-com1>
  80.         </div>
  82.         <div id="app2">
  83.             <my-com2></my-com2>
  84.         </div>
  86.         <!--在被控制的#app外面 使用template元素，定义组件的模板元素-->
  87.         <template id="tmpl">
  88.             <div>
  89.                 <h1>这是通过template在外部定义的组件结构，这个方式有代码的提示</h1>
  90.                 <h4>好用</h4>
  91.             </div>
  92.         </template>
  93.         <script>
  95.             Vue.component('myCom1', {
  96.                 template:'#tmpl'
  97.             });
  99.             var vm = new Vue({
  100.                 el:"#app",
  101.                 data:{
  102.                 },
  103.                 methods:{
  104.                 }
  105.             });
  106.             var vm2 = new Vue({
  107.                 el:"#app2",
  108.                 data:{
  109.                 },
  110.                 methods:{
  111.                 },
  112.                 components:{
  113.                     //定义实例内部私有组件
  114.                     myCom2:{
  115.                         template:'#tmpl'
  116.                     }
  117.                 }
  118.             })
  119.         </script>
  120.     </body>
  121. </html>

组件中的data和methods

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>组件中data和methods</title>
  6.         <script src="../../../thirdlib/vue/vue.min.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  11.             <mycom1></mycom1>
  12.             <hr />
  13.             <mycom1></mycom1>
  14.             <hr />
  15.             <mycom1></mycom1>
  16.             <hr />
  17.         </div>
  19.         <template id="temp">
  20.             <div>
  21.                 <input type="button" value="+1" @click="add" />
  22.                 <h3>{
  23.    { count }}</h3>
  24.             </div>
  25.         </template>
  26.         <script>
  27.             //1.组件可以有自己的data数据，
  28.             //2.组件的data和实例的data不一样。实例 的data是一个对象；组件中的data是一个function，并且return一个对象。
  29.             //3.组件中的data和实例中的data使用方式完全一样
  30.             Vue.component('mycom1', {
  31.                 template:'#temp',
  32.                 data:function(){
  33.                     return {
  34.                         count:0
  35.                     }
  36.                 },
  37.                 methods:{
  38.                     add(){
  39.                         this.count ++;
  40.                     }
  41.                 }
  42.             });
  44.             var vm = new Vue({
  45.                 el:"#app",
  46.                 data:{
  47.                 },
  48.                 methods:{
  49.                 }
  50.             })
  51.         </script>
  52.     </body>
  53. </html>

组件切换方式

  1. <div id="app">
  3.     <a @click.prevent="flag = true" href="">登录</a>
  4.     <a @click.prevent="flag = false" href="">注册</a>
  5.     <login v-if="flag"></login>
  6.     <regest v-else></regest>
  7. </div>
  9. <script>
  10.     Vue.component('login', {
  11.         template:'<h3>登录组件</h3>'
  12.     });
  13.     Vue.component('regest', {
  14.         template:'<h3>注册组件</h3>'
  15.     });
  17.     var vm = new Vue({
  18.         el:"#app",
  19.         data:{
  20.             flag:false
  21.         },
  22.         methods:{
  23.         }
  24.     })
  25. </script>
  27. <div id="app">
  28.     <a @click.prevent="flag = 'login'" href="">登录</a>
  29.     <a @click.prevent="flag = 'regest'" href="">注册</a>
  30.     <!--Vue提供了component， 来展示对应名称的组件-->
  31.     <!--component是一个 占位符 ，:is属性 ， 可以用来指定要展示的组件名称-->
  32.     <component :is="flag"></component>
  33. </div>
  35. <script>
  36.     //组件名称是字符串
  37.     Vue.component('login', {
  38.         template:'<h3>登录组件</h3>'
  39.     });
  40.     Vue.component('regest', {
  41.         template:'<h3>注册组件</h3>'
  42.     });
  44.     var vm = new Vue({
  45.         el:"#app",
  46.         data:{
  47.             flag:'login'
  48.         },
  49.         methods:{
  50.         }
  51.     })
  52. </script>
  54. <!DOCTYPE html>
  55. <html>
  56.     <head>
  57.         <meta charset="UTF-8">
  58.         <title>组件切换动画</title>
  59.         <script src="../../../thirdlib/vue/vue.min.js"></script>
  60.         <style>
  61.             .v-enter,
  62.             .v-leave-to {
  63.                 opacity: 0;
  64.                 transform: translateX(150px);
  65.             }
  66.             .v-enter-active,
  67.             .v-leave-active {
  68.                 transition: all 0.5s ease;
  69.             }
  71.         </style>
  72.     </head>
  73.     <body>
  74.         <div id="app">
  75.             <a @click.prevent="flag = 'login'" href="">登录</a>
  76.             <a @click.prevent="flag = 'regest'" href="">注册</a>
  77.             <!--Vue提供了component， 来展示对应名称的组件-->
  78.             <!--component是一个 占位符 ，:is属性 ， 可以用来指定要展示的组件名称-->
  79.             <!--通过mode属性设置组件切换时候的 方式-->
  80.             <transition mode="out-in">
  81.                 <component :is="flag"></component>
  82.             </transition>
  83.         </div>
  85.         <script>
  86.             //组件名称是字符串
  87.             Vue.component('login', {
  88.                 template:'<h3>登录组件</h3>'
  89.             });
  90.             Vue.component('regest', {
  91.                 template:'<h3>注册组件</h3>'
  92.             });
  94.             var vm = new Vue({
  95.                 el:"#app",
  96.                 data:{
  97.                     flag:'login'
  98.                 },
  99.                 methods:{
  100.                 }
  101.             })
  102.         </script>
  103.     </body>
  104. </html>

父组件向子组件传值

  1. <div id="app">
  2.     <!--父组件可以在引用子组件的时候，通过自定义属性绑定的形式v-bind将数据传递到子组件-->
  3.     <com1 v-bind:parentmsg="msg"></com1>
  4. </div>
  6. <script>
  7.     var vm = new Vue({
  8.         el:"#app",
  9.         data:{
  10.             msg:"123 父组件中的数据"
  11.         },
  12.         methods:{},
  13.         components:{
  14.             com1:{
  15.                 //结论：子组件中默认无法访问到父组件中data中的数据和methods中的方法
  16.                 template:"<h1 @click='change'>处理这是子组件---{
  17.    { parentmsg }}</h1>",
  18.                 //data数据并不是父组件传递过来的，而是自身私有的
  19.                 //比如，组件通过ajax请求的数据，都可以放在data身上
  20.                 //data中的数据，都是可读可写的，props中的数据都是只读的
  21.                 data:function(){
  22.                     return {
  23.                         title:"123",
  24.                         content:"111"
  25.                     }
  26.                 },
  27.                 //组件中的所有props中的数据，都是通过父组件传递给子组件的
  28.                 props : [//把父组件传递过来的parentmsg，在props中定义一下，这样才能使用这个数据
  29.                     'parentmsg'
  30.                 ],
  31.                 methods:{
  32.                     change(){
  33.                     }
  34.                 }
  35.             }
  36.         }
  37.     })
  38. </script>

父组件把方法传递给子组件

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>父组件把方法传递给子组件</title>
  6.         <script src="../../../thirdlib/vue/vue.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             {
  11.    { msg }}
  12.             <!--父组件向子组件传递方法使用的是 事件绑定机制v-on-->
  13.             <!--这里不用带括号，直接将方法的引用传给子组件-->
  14.             <com2 v-on:func="show"></com2>
  15.         </div>
  16.         <template id="temp">
  17.             <div>
  18.                 <h1>这是子组件</h1>
  19.                 <input type="button" @click="myclick" value="父组件传递的func方法"/>
  20.             </div>
  21.         </template>
  23.         <script>
  24.             var com2 = {
  25.                 template:'#temp',
  26.                 data(){
  27.                     return {
  28.                         sonmsg:{name:'小头儿子', age:6}
  29.                     }
  30.                 },
  31.                 methods:{
  32.                     myclick(){
  33.                         //如何拿到父组件的show方法，拿到func方法
  34.                         //emit 英文原意 ： 是触发、调用的意思
  35.                         //参数依次写在后面
  36.                         this.$emit('func', this.sonmsg, 321);
  37.                     }
  38.                 }
  39.             }
  41.             var vm = new Vue({
  42.                 el:"#app",
  43.                 data:{
  44.                     msg : null
  45.                 },
  46.                 methods:{
  47.                     show(data, data2){
  48.                         this.msg = data;
  49.                         console.log('调用了父组件身上的show方法:' + data + data2);
  50.                     }
  51.                 },
  52.                 components:{
  53.                     com2:com2
  54.                 }
  55.             })
  56.         </script>
  57.     </body>
  58. </html>

案例：评论添加及列表显示

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>评论列表</title>
  6.         <script src="../../../thirdlib/vue/vue.js"></script>
  7.         <link rel="stylesheet" href="../../../thirdlib/css/bootstrap.min.css" />
  8.     </head>
  9.     <body>
  10.         <div id="app">
  11.             <cmtbox @fresh="loadComments" @test="test"></cmtbox>
  13.             <ul class="list-group">
  14.                 <li v-for="item in list" :key="item.id" class="list-group-item">
  15.                     <span class="badge">{
  16.    { item.user }}</span>
  17.                     {
  18.    { item.content}}
  19.                 </li>
  20.             </ul>
  21.         </div>
  24.         <template id="tmpl">
  25.             <div>
  26.                 <div class="form-group">
  27.                     <label>评论人：</label>
  28.                     <input v-model="user" type="text" class="form-control" />
  29.                 </div>
  30.                 <div class="form-group">
  31.                     <label>评论内容：</label>
  32.                     <textarea v-model="content" class="form-control"></textarea>
  33.                 </div>
  34.                 <div class="form-group">
  35.                     <input @click="add" type="button" value="发表评论" class="btn btn-primary" />
  36.                 </div>
  37.             </div>
  38.         </template>
  39.         <script>
  40.             var commentBox = {
  41.                 template : "#tmpl",
  42.                 data(){
  43.                     return {
  44.                         user:"",
  45.                         content:""
  46.                     }
  47.                 },
  48.                 methods:{
  49.                     add(){
  50.                         var comment = {id:Date.now(), user : this.user, content:this.content};
  51.                         //从localstorage获取所有评论
  52.                         var list = JSON.parse(localStorage.getItem('cmts') || '[]');
  53.                         list.push(comment);
  54.                         //保存最新的评论数据
  55.                         localStorage.setItem('cmts', JSON.stringify(list));
  56.                         this.user = this.content = "";
  58.                         //触发父组件的刷新数据方法
  59.                         //可以同时绑定多个父组件方法
  60.                         this.$emit('fresh');
  61.                         this.$emit('test');
  62.                     }
  63.                 }
  64.             }
  67.             var vm = new Vue({
  68.                 el:"#app",
  69.                 data:{
  70.                     list:[
  71.                         {id:Date.now(), user:'李白', content:'天生我材必有用'},
  72.                         {id:Date.now(), user:'白居易', content:'蜀道之难'},
  73.                         {id:Date.now(), user:'江小白', content:'劝君更尽一杯酒'}
  74.                     ]
  75.                 },
  76.                 methods:{
  77.                     loadComments(){
  78.                         //从本地localStorage中加载评论
  79.                         var locallist = JSON.parse(localStorage.getItem('cmts') || '[]');
  80.                         this.list = locallist;
  81.                     },
  82.                     test(){
  83.                         console.log("ok");
  84.                     }
  85.                 },
  86.                 components:{//组件
  87.                     cmtbox:commentBox
  88.                 },
  89.                 created(){
  90.                     this.loadComments();
  91.                 }
  92.             })
  93.         </script>
  94.     </body>
  95. </html>

ref获取dom和组件

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>ref获取dom和组件</title>
  6.         <script src="../../../thirdlib/vue/vue.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <input type="button" ref="btn" value="获取元素" @click="getele" />
  11.             <h3 ref="myh3">哈哈哈</h3>
  12.             <hr />
  13.             <login ref="mylogin"></login>
  14.         </div>
  16.         <script>
  17.             var login = {
  18.                 template:'<h1>登录组件</h1>',
  19.                 data(){
  20.                     return {
  21.                         msg:"组件msg"
  22.                     }
  23.                 },
  24.                 methods:{
  25.                     show(){
  26.                         console.log("调用子组件的方法");
  27.                     }
  28.                 }
  29.             }
  31.             var vm = new Vue({
  32.                 el:"#app",
  33.                 data:{
  35.                 },
  36.                 methods:{
  37.                     getele(){
  38.                         //ref 是 reference 引用
  39.                         //console.log(this.$refs.myh3.innerText);
  40.                         console.log(this.$refs.mylogin.msg);
  41.                         this.$refs.mylogin.show();
  42.                     }
  43.                 },
  44.                 components:{
  45.                     login : login
  46.                 }
  47.             })
  48.         </script>
  49.     </body>
  50. </html>

发表评论

表情：
评论列表 （有 0 条评论，113人围观）

还没有评论，来说两句吧...

相关阅读