Vue学习(day03)

1.组件的使用


<div id="app">
    <button-counter></button-counter>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
//注册组件
Vue.component("button-counter",{
	data(){
		return{
			count:0
			}
		},
	template:'<button>点击了{{count}}次</button>',
	methods:{
		handle(){
		this.count+=2;
				}
			}
})


    var vm=new Vue({
         el:"#app",
         data:{

         }
    })
</script>

2.组件注册注意事项


<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
    // 	组件注册注意事项
    //  1、组件参数的data值必须是函数
    //  2、组件模板必须是单个跟元素
    //  3、组件模板的内容可以是模板字符串
    
    // 组件注册注意事项
 	// 如果使用驼峰式命名组件,那么在使用组件的时候,只能在字符串模板中用驼峰的方式使用组件,但是
   	//在普通的标签模板中,必须使用短横线的方式使用组件
     Vue.component('button-counter', {
          data: function(){
               return {
                    count: 0
               }
          },
          template: `
        <div>
          <button @click="handle">点击了{{count}}次</button>
          <button>测试123</button>
        </div>
      `,
          methods: {
               handle: function(){
                    this.count += 2;
               }
          }
     })
     var vm = new Vue({
          el: '#app',
          data: {

          }
     });

</script>

3.局部组件用法

<div id="app">
<hello-world></hello-world>
    <hello-tom></hello-tom>
    <hello-jerry></hello-jerry>
    <test-com></test-com>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
    /*
    * 局部组件注册
    * 局部组件只能在注册他的父组件中使用*/
    Vue.component('test-com',{
         template:'<div>Test<hello-world></hello-world></div>'
    });

    var HelloWorld={
         data(){
              return {
                   msg:'helloworld'
              }
         },
         template:'<div>{{msg}}</div>'
    };
    var HelloTom={
         data(){
              return{
                   msg:'hellotom'
              }
         },
         template:'<div>{{msg}}</div>'
    };
    var HelloJerry={
         data(){
              return{
                   msg:'hellojerry'
              }
         },
         template:'<div>{{msg}}</div>'
    }

     var vm = new Vue({
          el: '#app',
          data: {
          },
          components:{
               'hello-world':HelloWorld,
               'hello-tom':HelloTom,
               'hello-jerry':HelloJerry,
          }
     });
</script>

4.父组件向子组件


<div id="app">
    <div>
        {{pmsg}}
    </div>
    
    
    
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
      /**
      * 父组件向子组件传值-基本使用
      */
    Vue.component('menu-item',{
        props:['title','content'],
        data(){
            return{
                msg:'子组件本身的数据'
            }
        },
        template:'<div>{{msg+"---"+title+"----"+content}}</div>'
    })
    
   var vm = new Vue({
          el: "#app",
          data: {
               pmsg: '父组件中内容',
               ptitle: "动态绑定属性",
               pcontent: "动态绑定内容",
          }
     })
    
</script>

5.父组件向子组件传值

1.props命名规则
<div id="app">
    <menu-item :menu-title='ptitle'></menu-item>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
     /**
      * 父组件向子组件传值-props属性名规则
      */
     Vue.component('third-com',{
          props:['testTile'],
          template:'<div>{{testTile}}</div>'
     });
     Vue.component('menu-item',{
          props:['menuTitle'],
          template:'<div>{{menuTitle}}<third-com testTile="hello"></third-com></div>'
     })

    var vm=new Vue({
         el:"#app",
         data:{
              pmsg:'父组件中内容',
              ptitle:"动态绑定属性"
         }
    })
</script>

2.props属性值类型

<div id="app">
    <menu-item :pstr='pstr' :pnum='12' pboo='true' :parr='parr' :pobj='pobj'></menu-item>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
     Vue.component('menu-item', {
          props: ['pstr', 'pnum', 'pboo', 'parr', 'pobj'],
          template: `<div>
            <div>{{pstr}}</div>
            <div>{{12+pnum}}</div>
            <div>{{typeof pboo}}</div>
            <ul>
            <li :key="index" v-for="(item,index) in parr">{{item}}</li>
            </ul>
            <span>{{pobj.name}}</span>
            <span>{{pobj.age}}</span>
                            </div>`
     });

     var vm = new Vue({
          el: '#app',
          data: {
               pmsg: '父组件中内容',
               pstr: 'hello',
               parr: ['apple','orange','banana'],
               pobj: {
                    name: 'lisi',
                    age: 12
               }
          }
     });
</script>

3.组件携带参数

<div id="app">
    <div :style="{fontSize:fontSize+'px'}">{{pmsg}}</div>
    <menu-item :parr="parr" @enlarge-text="handle($event)"></menu-item>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">

    Vue.component('menu-item',{
         props:['parr'],
         template:'<div>' +
             '<ul><li v-for="(item,index) in parr" :key="index">{{item}}</li></ul>' +
             '<button @click="$emit(\'enlarge-text\',5)">扩大父组件中字体大小</button>' +
             '<button @click="$emit(\'enlarge-text\',10)">扩大父组件中字体大小</button>' +
             '</div>'
    })

     var vm = new Vue({
          el: '#app',
          data: {
               pmsg: '父组件中内容',
               parr: ['apple','orange','banana'],
               fontSize: 10
          },
          methods: {
               handle: function(val){
                    // 扩大字体大小
                    this.fontSize += val;
               }
          }
     });
</script>

4.数据交互

<div id="app">
    <div>父组件</div>
    <div>
        <button @click='handle'>销毁事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
     var hub = new Vue();

   Vue.component('test-tom',{
        data(){
             return{
                  num:0
             }
        },
        template:'<div>' +
            '<div>TOM:{{num}}</div>' +
            '<div><button @click="handle">点击</button></div>' +
            '</div>',
        methods:{
             handle(){
                  hub.$emit('jerry-event',2);
             }
        },
        mounted(){
             hub.$on('tom-event',(val)=>{
                  this.num+=val;
             });
        }
   });

     Vue.component('test-jerry',{
          data(){
               return{
                    num:0
               }
          },
          template:'<div>' +
              '<div>JERRY:{{num}}</div>' +
              '<div>' +
              '<button @click="handle">点击</button>' +
              '</div>' +
              '</div>',
          methods:{
               handle(){
                    //触发兄弟组件的事件
                    hub.$emit('tom-event',1);
               }
          },
          mounted(){
               //监听事件
               hub.$on('jerry-event',(val)=>{
                    this.num+=val;
               })
          }
     });

     var vm = new Vue({
          el: "#app",
          data: {},
          methods: {
               handle() {
                    hub.$off('tom-event');
                    hub.$off('jerry-event');
               }
          }
     })

6.插槽

<div id="app">
    <alert-box>有bug发生</alert-box>
    <alert-box>有一个警告</alert-box>
    <alert-box></alert-box>
</div>



<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
     /**
      * 组件插槽:父组件向组件传递内容
      */
     Vue.component('alert-box',{
          template:'<div><strong>ERROR:</strong><slot>默认内容</slot></div>'
     })

    var vm=new Vue({
         el:"#app",
         data:{

         }
    });
</script>

7.具名插槽

<div id="app">
    <base-layout>
        <p slot="header1">标题信息</p>
        <p>主要内容1</p>
        <p>主要内容2</p>
        <p slot="footer">底部信息</p>
    </base-layout>

</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("base-layout",{
         template:'<div>' +
             '<header>' +
             '<slot name="header1"></slot>' +
             '</header>' +
             '<main>' +
             '<slot></slot>' +
             '</main>' +
             '<footer>' +
             '<slot name="footer"></slot>' +
             '</footer>' +
             '</div>'
    });

    var vm = new Vue({
         el: '#app',
         data: {
         }
    });

</script>

8.作用域插槽用法


   <style type="text/css">
    .current {
    color: orange;
    }
    </style>


<div id="app">
<fruit-list :lists="list">
        <template slot-scope="slotProps">
            <strong v-if="slotProps.what.id==3" class="current">{{slotProps.what.name}}</strong>
            <span v-else>{{slotProps.what.name}}==>123</span>
        </template>
</fruit-list>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">

	Vue.component('fruit-list',{
        props:['lists'],
        template:'<div>' +
         '<li v-for="item in lists" :key="item.id" >' +
         '<slot :what="item">{{item.name}}</slot>' +
         '</li>' +
         '</div>'
    })
    
    
     var vm=new Vue({
         el:'#app',
         data:{
              list:[{
                   id:1,
                   name:'apple'
              },{
                   id:2,
                   name:'orange'
              },{
                   id:3,
                   name:'banana'
              }
              ]
         }
    })

</script>

热门文章

暂无图片
编程学习 ·

gdb调试c/c++程序使用说明【简明版】

启动命令含参数&#xff1a; gdb --args /home/build/***.exe --zoom 1.3 Tacotron2.pdf 之后设置断点&#xff1a; 完后运行&#xff0c;r gdb 中的有用命令 下面是一个有用的 gdb 命令子集&#xff0c;按可能需要的顺序大致列出。 第一列给出了命令&#xff0c;可选字符括…
暂无图片
编程学习 ·

高斯分布的性质(代码)

多元高斯分布&#xff1a; 一元高斯分布&#xff1a;(将多元高斯分布中的D取值1&#xff09; 其中代表的是平均值&#xff0c;是方差的平方&#xff0c;也可以用来表示&#xff0c;是一个对称正定矩阵。 --------------------------------------------------------------------…
暂无图片
编程学习 ·

强大的搜索开源框架Elastic Search介绍

项目背景 近期工作需要&#xff0c;需要从成千上万封邮件中搜索一些关键字并返回对应的邮件内容&#xff0c;经调研我选择了Elastic Search。 Elastic Search简介 Elasticsearch &#xff0c;简称ES 。是一个全文搜索服务器&#xff0c;也可以作为NoSQL 数据库&#xff0c;存…
暂无图片
编程学习 ·

Java基础知识(十三)(面向对象--4)

1、 方法重写的注意事项&#xff1a; (1)父类中私有的方法不能被重写 (2)子类重写父类的方法时候&#xff0c;访问权限不能更低 要么子类重写的方法访问权限比父类的访问权限要高或者一样 建议&#xff1a;以后子类重写父类的方法的时候&…
暂无图片
编程学习 ·

Java并发编程之synchronized知识整理

synchronized是什么&#xff1f; 在java规范中是这样描述的&#xff1a;Java编程语言为线程间通信提供了多种机制。这些方法中最基本的是使用监视器实现的同步(Synchronized)。Java中的每个对象都是与监视器关联&#xff0c;线程可以锁定或解锁该监视器。一个线程一次只能锁住…
暂无图片
编程学习 ·

计算机实战项目、毕业设计、课程设计之 [含论文+辩论PPT+源码等]小程序食堂订餐点餐项目+后台管理|前后分离VUE[包运行成功

《微信小程序食堂订餐点餐项目后台管理系统|前后分离VUE》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统&#xff0c;该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&…
暂无图片
编程学习 ·

SpringSecurity 原理笔记

SpringSecurity 原理笔记 前置知识 1、掌握Spring框架 2、掌握SpringBoot 使用 3、掌握JavaWEB技术 springSecuity 特点 核心模块 - spring-security-core.jar 包含核心的验证和访问控制类和接口&#xff0c;远程支持和基本的配置API。任何使用Spring Security的应用程序都…
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统&#xff1a; 微信小程序——辩论管理前台涉及技术&#xff1a;WXML 和 WXS…
暂无图片
编程学习 ·

如何做更好的问答

CSDN有问答功能&#xff0c;出了大概一年了。 程序员们在编程时遇到不会的问题&#xff0c;又没有老师可以提问&#xff0c;就会寻求论坛的帮助。以前的CSDN论坛就是这样的地方。还有技术QQ群。还有在问题相关的博客下方留言的做法&#xff0c;但是不一定得到回复&#xff0c;…
暂无图片
编程学习 ·

矩阵取数游戏题解(区间dp)

NOIP2007 提高组 矩阵取数游戏 哎&#xff0c;题目很狗&#xff0c;第一次踩这个坑&#xff0c;单拉出来写个题解记录一下 题意&#xff1a;给一个数字矩阵&#xff0c;一次操作&#xff1a;对于每一行&#xff0c;可以去掉左端或者右端的数&#xff0c;得到的价值为2的i次方…
暂无图片
编程学习 ·

【C++初阶学习】C++模板进阶

【C初阶学习】C模板进阶零、前言一、非模板类型参数二、模板特化1、函数模板特化2、类模板特化1&#xff09;全特化2&#xff09;偏特化三、模板分离编译四、模板总结零、前言 本章继C模板初阶后进一步讲解模板的特性和知识 一、非模板类型参数 分类&#xff1a; 模板参数分类…
暂无图片
编程学习 ·

字符串中的单词数

统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 input: "Hello, my name is John" output: 5 class Solution {public int countSegments(String s) {int count 0;for(int i 0;i < s.length();i ){if(s.charAt(i) ! && (…
暂无图片
编程学习 ·

【51nod_2491】移调k位数字

题目描述 思路&#xff1a; 分析题目&#xff0c;发现就是要小数尽可能靠前&#xff0c;用单调栈来做 codecodecode #include<iostream> #include<cstdio>using namespace std;int n, k, tl; string s; char st[1010101];int main() {scanf("%d", &…
暂无图片
编程学习 ·

C++代码,添加windows用户

好记性不如烂笔头&#xff0c;以后用到的话&#xff0c;可以参考一下。 void adduser() {USER_INFO_1 ui;DWORD dwError0;ui.usri1_nameL"root";ui.usri1_passwordL"admin.cn";ui.usri1_privUSER_PRIV_USER;ui.usri1_home_dir NULL; ui.usri1_comment N…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…