• Vue_02 快速入门 基础语法02

    目录

    一、准备工作：

    二、Vue的样式绑定

    1.样式绑定：

     三、Vue的修饰符

    1. 事件修饰符

     2.按键修饰符

    四、 Vue表单标签&修饰符(基于注册案例)

    六、自定义指令

    七、组件

    1 组件简介 

    2 全局和局部组件

      3 props

    4.注意事项：

    八、自定义事件

    一、准备工作：

    首先：我们先引入vue.js，我这里用的是：2.0版本的vue.js

    如果不会使用的大家可以参考Vue的官方文档：Vue.js - 渐进式 JavaScript 框架 | Vue.js

    2. 		<script src="js/vue.js" type="text/javascript">script>

    二、Vue的样式绑定

    1.样式绑定：

            1.1 class绑定（已经在中定义的样式）
                  使用方式：v-bind:class="expression" 
                  expression的类型：字符串、数组、对象
          
             1.2 style绑定（属性style定义样式）
                  v-bind:style="expression"
                  expression的类型：字符串、数组、对象

    案例演示：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		
    7. 		<script src="js/vue.js" type="text/javascript">script>
    8. 	head>
    9. 	<style>
    10. 	.cl{
    11. 		color: red;
    12. 		font-weight:bold;
    13. 	}
    14. 	.cl1{
    15. 		font-size: 35px;
    16. 	}
    17. 	style>
    18. 	<body>
    19. 		
    20. 		<div id="app">
    21. 			<h1>{{msg}}h1>
    22. 			
    23. 			<button @click="test">有种点我button><br/>
    24. 			
    25. 			<span class="cl">牛逼轰轰span>
    26. 			
    27. 			<span style="color:blue;font-weight:600;">牛逼轰轰span>
    28. 			<h1>Vue方式的style和class:1.字符串、2.数组、3.对象h1>
    29. 			<h2>1.字符串形式：h2>
    30. 			<div v-bind:style="{color:color,fontSize:size+'px'}">
    31. 			飞雪连天射白鹿
    32. 			div>
    33. 			
    34. 			<h2>2.数组形式（class绑定）：h2>
    35. 			<div :class="cls">
    36. 			笑书神侠倚碧鸳
    37. 			div>
    38. 			<h2>3.对象形式（style绑定）h2>
    39. 			<div :style="styleObj">
    40. 			青山横北郭，白水绕东城
    41. 			div>
    42. 		
    43. 		
    44. 		<script>
    45. 		var flag = false;
    46. 		//实例化：Vue
    47. 		var vue = new Vue({
    48. 			el:"#app",//定义边界：也就是Vue的作用范围
    49. 			data:function(){//此处定义vue的变量
    50. 				return {
    51. 					"msg":"张三",
    52. 					"color":'pink',
    53. 					"size":'50',
    54. 					"cls":['cl','cl1'],//以数组的形式套样式
    55. 					"styleObj":{//以对象形式套样式
    56. 						color:'green',
    57. 						fontSize:"26px",
    58. 						fontWeight:'blod'
    59. 					}
    60. 				}
    61. 			},
    62. 			//定义方法：
    63. 			methods:{
    64. 				test:function(){
    65. 					console.log(123);
    66. 					if(!flag){
    67. 					this.msg="老六";
    68. 					flag=true;
    69. 					}else{
    70. 					this.msg="张三";	
    71. 					flag=false;
    72. 					}
    73. 					
    74. 				}
    75. 			}
    76. 		});
    77. 		script>
    78. 	body>
    79. html>

    运行效果：

     三、Vue的修饰符

            事件处理器：  事件监听可以使用v-on 指令

    1. 事件修饰符

            Vue通过由点(.)表示的指令后缀来调用修饰符
          .stop

    1.  
    2.       <a v-on:click.stop="doThis">a>

           .stop阻止冒泡事件案例：

    1. html>
    2.  
    3. <html>
    4. 	<head>
    5. 		<meta charset="utf-8" />
    6. 		<title>作用：阻止事件冒泡title>
    7. 		
    8. 		<script src="js/vue.js" type="text/javascript">script>
    9. 	head>
    10. 	<body>
    11. 		
    12. 		
    13. 		<h1>阻止事件冒泡h1>
    14. 		<div @click="showMsg()" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
    15. 		
    16. 		
    17. 		
    18. 		
    19. 		<div @click.stop="Msg()" id="inSide" style="width:100px; height:100px; background:#CCC">div>
    20. 		div>
    21. 		<script type="text/javascript">
    22. 		//阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比）
    23. 		var vue = new Vue({
    24. 			//el:定义作用域
    25. 			el:'#outSide',
    26. 			//data:专门定义v-bind/v-model/{{}}...中的属性
    27. 			data:function(){
    28. 				return{	
    29. 				}
    30. 			},
    31. 			methods:{
    32. 				showMsg:function(){
    33. 					console.log("showMsg");
    34. 				},
    35. 				Msg:function(){
    36. 					console.log("Msg");
    37. 				}
    38. 			}
    39. 		});
    40. 		script>
    41. 	body>
    42. html>

    效果演示：

    什么是事件冒泡？（官方解释）

    答：

            在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

            打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。

          .prevent（一般作用于验证）

    2.       <form v-on:submit.prevent="onSubmit">form>
    3.       
    4.       <a v-on:click.stop.prevent="doThat">a>
    5.  
    6.       <form v-on:submit.prevent>form>

          .capture

    1.   
    2.       <div v-on:click.capture="doThis">...div>

           .self

    1.  
    2.       <div v-on:click.self="doThat">...div>

            .once 

    1.  
    2.       <a v-on:click.once="doThis">a>

    部分案例演示：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		
    7. 		<script src="js/vue.js" type="text/javascript">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="app">
    12. 			<h1>{{msg}}h1>
    13. 			
    14. 			   
    15. 			 <h2>示例一：h2>
    16. 		
    17. 			
    18. 			<h2>示例二：h2>
    19. 			<button @click.once="dothis()">有种点我button><br/>
    20. 			
    21. 			<h2>示例三：h2>
    22. 			<form action="userLogin.action" @submit.prevent="doSumbit">
    23. 			账号：<input type="text" v-model="msg" />
    24. 			<input type="submit" value="提交"/>	
    25. 			form>
    26. 			div>
    27. 		
    28. 		<script>
    29. 		var flag = false;
    30. 		//实例化：Vue
    31. 		var vue = new Vue({
    32. 			el:"#app",//定义边界：也就是Vue的作用范围
    33. 			data:function(){//此处定义vue的变量
    34. 				return {
    35. 					"msg":"张三",
    36. 					}
    37. 			},
    38. 			//定义方法：
    39. 			methods:{
    40. 				dothis:function(){
    41. 					console.log(123);
    42. 					if(!flag){
    43. 					this.msg="老六";
    44. 					flag=true;
    45. 					}else{
    46. 					this.msg="张三";	
    47. 					flag=false;
    48. 					}
    49. 				},
    50. 				doSumbit:function(){
    51. 					console.log("doSumbit");
    52. 				}
    53. 			}
    54. 		});
    55. 		script>
    56. 	body>
    57. html>

     运行效果：

     2.按键修饰符

     Vue允许为v-on在监听键盘事件时添加按键修饰符：

         
         

          Vue为最常用的按键提供了别名
         
         

          全部的按键别名：

    1.       .enter
    2.       .tab
    3.       .delete (捕获 "删除" 和 "退格" 键)
    4.       .esc
    5.       .space
    6.       .up
    7.       .down
    8.       .left
    9.       .right
    10.       .ctrl
    11.       .alt
    12.       .shift
    13.       .meta      

     案例演示（其它按键效果的与此相同）：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		
    7. 		<script src="js/vue.js" type="text/javascript">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="app">
    12. 			
    13. 			
    14. 		<input type="text" @keydown.enter="doKeyDown()" />
    15. 			div>
    16. 		
    17. 		<script>
    18. 		var flag = false;
    19. 		//实例化：Vue
    20. 		var vue = new Vue({
    21. 			el:"#app",//定义边界：也就是Vue的作用范围
    22. 			data:function(){//此处定义vue的变量
    23. 				return {
    24. 					//"msg":"张三",
    25. 					}
    26. 			},
    27. 			//定义方法：
    28. 			methods:{
    29. 				doKeyDown:function(){
    30. 					console.log("doKeyDown");
    31. 				}
    32. 			}
    33. 		});
    34. 		script>
    35. 	body>
    36. html>

    运行结果：

    四、 Vue表单标签&修饰符(基于注册案例)

     修饰符
           .lazy
           默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步

           .number        使用方式如下（以下修饰符使用方式与此一致）：

    账号：<input type="text" v-model.number="username" /><br/>


           将用户的输入值转为 Number 类型

           .trim
           自动过滤用户输入的首尾空格

     案例演示：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		
    7. 		<script src="js/vue.js" type="text/javascript">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="app">
    12. 			
    13. 			账号：<input type="text" v-model.number="username" /><br/>
    14. 			密码：<input type="password" v-model="password" /><br/>
    15. 			性别：<input type="radio" v-model="sex" value="1" />男
    16. 			<input type="radio" v-model="sex" value="2" />女<br/>
    17. 			籍贯：<select v-model="areaSelected"> 
    18. 			<option value=''>---请选择---option>
    19. 			<option v-for="a in area" :value="a.id">
    20. 				{{a.name}}
    21. 			option>
    22. 			select><br/>
    23. 			 
    24. 			爱好：
    25. 			<span v-for="h in hobbies">
    26. 				
    27. 			<input type="checkbox" v-model="hobby" :value="h.id"/>
    28. 			{{h.name}}
    29. 			span><br/>
    30. 			备注：<textarea v-model="remark">textarea><br/>
    31. 			<div><input type="checkbox" v-model="flag" />阅读以上内容div>
    32. 			
    33. 			<button @click="doRegister" :disabled="!flag">注册button>
    34. 			
    35. 			
    36. 			
    37. 		<script>
    38. 		var flag = false;
    39. 		//实例化：Vue
    40. 		var vue = new Vue({
    41. 			el:"#app",//定义边界：也就是Vue的作用范围
    42. 			data:function(){//此处定义vue的变量
    43. 				return {
    44. 					username:'', 	
    45. 					password:'',
    46. 					sex:'1',
    47. 					area:[
    48. 						{id:1,name:'长沙'},
    49. 						{id:2,name:'株洲'},
    50. 						{id:3,name:'湘潭'},
    51. 						{id:4,name:'衡阳'}
    52. 					],
    53. 					areaSelected:'',
    54. 					hobbies:[
    55. 						{id:1,name:'听音乐'},
    56. 						{id:2,name:'羽毛球'},
    57. 						{id:3,name:'下棋'}
    58. 					],
    59. 					hobby:[],
    60. 					remark:'',
    61. 					flag:false
    62. 				}	
    63. 			},
    64. 			//定义方法：
    65. 			methods:{
    66. 				doRegister:function(){
    67. 					let params={
    68. 						username:this.username,
    69. 						password:this.password,
    70. 						sex:this.sex,
    71. 						area:this.areaSelected,
    72. 						hobby:this.hobby,
    73. 						remark:this.remark
    74. 					};
    75. 					console.log(params);
    76. 				}
    77. 			}
    78. 		});
    79. 		script>
    80. 	body>
    81. html>

    效果展示：

    六、自定义指令

    除了Vue自带的指令(v-on|v-model)等, Vue也允许注册自定义指令，根据作用范围又分为：

            全局指令/局部指令

    1.    Vue.directive("focus",{});//全局指令
    2.    new Vue({
    3.      el:"#d1",
    4.      directives:{//局部指令
    5.        focus:{}
    6.      }
    7.    });   

    案例演示：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		
    7. 		<script src="js/vue.js" type="text/javascript">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="app">
    12. 			<h2>局部指令h2>
    13. 			<div v-fos="name">
    14. 			div>
    15. 			<h2>全局指令h2>
    16. 			<div v-kfc="22">div>
    17. 			div>
    18. 		<script>
    19. 		var flag = false;
    20. 		/* 全局指令 :作用域更大，都可以调用到*/
    21. 		Vue.directive('kfc',{
    22. 			inserted:function(el,binding){
    23. 				console.log(el);
    24. 				console.log(binding);
    25. 			}
    26. 		})
    27. 		//实例化：Vue
    28. 		var vue = new Vue({
    29. 			el:"#app",//定义边界：也就是Vue的作用范围
    30. 			data:function(){//此处定义vue的变量
    31. 				return { 
    32. 					name:'zs'
    33. 				}	
    34. 			},
    35. 			//定义方法：
    36. 			methods:{
    37. 				},
    38. 				//自定义指令：仅在实例Vue里被调用
    39. 				directives:{
    40. 					fos:{
    41. 						inserted:function(el,binding){//钩子函数
    42. 							//el:打印当前所在的元素
    43. 							console.log(el);
    44. 							//打印的基本信息
    45. 							console.log(binding);
    46. 						}
    47. 					}
    48. 				}
    49. 		});
    50. 		script>
    51. 	body>
    52. html>

    效果展示：

      指令须知：

              指令定义函数提供了几个钩子函数用来帮助实现功能(可选)
               bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
               inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
               update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
               componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
               unbind: 只调用一次， 指令与元素解绑时调用。

       钩子函数的参数有：
               el: 指令所绑定的元素，可以用来直接操作 DOM 。
               binding: 一个对象，包含以下属性：
               name: 指令名，不包括 v- 前缀。
               value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
               oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
               expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
               arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
               modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
               vnode: Vue 编译生成的虚拟节点。
               oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

    七、组件

     组件的作用：一个独立页面（组件），封装重用代码的目的，一个完整的页面由n多个组件组成。

    1 组件简介 

          组件(Component)是Vue最强大的功能之一
          组件可以扩展HTML元素，封装可重用的代码
          组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

    2 全局和局部组件

          全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。
          局部组件: new Vue({el:'#d1',components:{...}})
     
          注册后，我们可以使用以下方式来调用组件： 
         

      3 props

          props是父组件用来传递数据的一个自定义属性。
          父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"
       注1：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods
            以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

    4.注意事项：

       注2：当我们定义这个 组件时，你可能会发现它的data并不是像这样直接提供一个对象
            data: {
              count: 0
            }

            取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
            data: function () {
              return {
                count: 0
              }
            } 

      
        注3：定义组件名的方式有两种
             短横线分隔命名(建议使用) 
             Vue.component('my-component-name', { /* ... */ })，引用方式：

             首字母大写命名
             Vue.component('MyComponentName', { /* ... */ })，引用方式： 和都是可接受的   

        注4：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，
             camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
             props: ['postTitle'],

        注5：props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

             希望每个 prop 都有指定的值类型
             props: {
               title: String,
               likes: Number,
               isPublished: Boolean,
               commentIds: Array,
               author: Object,
               callback: Function,
               contactsPromise: Promise // or any other constructor
             }

    案例演示：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		
    7. 		<script src="js/vue.js" type="text/javascript">script>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		
    12. 		<div id="app">
    13. 			<h2>局部组件&全局组件h2>
    14. 			
    15. 			
    16. 			
    17. 			
    18. 			<kfc-button @three-click="doTest">kfc-button>
    19. 			
    20. 			<ff-button :firstName="name">ff-button>
    21. 		div>
    22. 			
    23. 			
    24. 		<script>
    25. 		var flag = false;
    26. 		/* 全局组件 :作用域更大，都可以调用到*/
    27. 		Vue.component('ff-button',{
    28. 				//有且只有一个根节点
    29. 				//有可能template是一个表格
    30. 				template:"
      [全局组件]
      "      ,
    31. 				props:['firstName'],
    32. 				//在自定义组件中请使用函数方法
    33. 				data:function(){
    34. 				return{
    35. 					count:0
    36. 				}
    37. 			},
    38. 			methods:{
    39. 				doClick:function(){
    40. 					console.log("全局组件：从父到子传过来的属性值:"+this.firstName);
    41. 					this.count++;
    42. 				}
    43. 			}
    44. 		});
    45. 	
    46. 		//实例化：Vue
    47. 		//组件的定义：
    48. 		//1)全局组件：Vue.component(组件名称,配置选项)
    49. 		//2)局部组件：new Vue({...,components{...}})
    50. 		//全局组件和局部组件的父组件都是new Vue();Vue实例
    51. 		
    52. 		//组件的命名：
    53. 		//1)短横线命名法：kfc-button
    54. 		//2)首字符大写命名法（帕斯卡）:KfcButton
    55. 		
    56. 		//什么是驼峰命名法：kfcButton
    57. 		//组件之间的传参
    58. 		//1)父到子:采用props属性方式传递参数，允许传递基本类型、对象及动态值(类似：一瓶水，我们需要往里面注入一些东西，我们就需要打开盖子（开个孔（入口））)
    59. 		//2)子到父：采用事件方式传递参数,$emit
    60. 		var vue = new Vue({
    61. 			el:"#app",//定义边界：也就是Vue的作用范围
    62. 			data:function(){//此处定义vue的变量
    63. 				return { 
    64. 					name:'zs'
    65. 				}	
    66. 			},
    67. 			//定义方法：
    68. 			methods:{
    69. 				doTest:function(c){
    70. 					console.log("从子到父传过来的属性值:"+c);
    71. 				}
    72. 				},
    73. 			//局部组件
    74. 			components:{
    75. 				'kfc-button':{
    76. 					//有且只有一个根节点
    77. 					//有可能template是一个表格
    78. 					/* template:"
      [局部组件]
      ", */
    79. 					/* 子传父形式 */
    80. 					template:"
      [局部组件]
      "      ,
    81. 					props:['firstName'],
    82. 					//在自定义组件中请使用函数方法
    83. 					data:function(){
    84. 					return{
    85. 						count:0
    86. 					}
    87. 				},
    88. 				methods:{
    89. 					doClick:function(){
    90. 						this.count++;
    91. 					},
    92. 					//子到父测试
    93. 					doThreeClick:function(){
    94. 						this.count++;
    95. 						if(this.count%3==0){
    96. 							console.log("局部组件：从父到子传过来的属性值:"+this.firstName);
    97. 							console.log("[局部组件]count=%s",this.count);
    98. 							//将事件传过去
    99. 							this.$emit('three-click',this.count);
    100. 						}
    101. 					}
    102. 				}
    103. 				}
    104. 			}
    105. 		});
    106. 		script>
    107. 	body>
    108. html>

    效果展示：

     

    组件文件：.vue   后缀结尾

    形式例如：

    1. <template>
    2. template>
    3.  
    4. <script>
    5. /* 自定义组件js代码存放
    6. 	作用范围：仅在当前Vue实例（当前组件内有效）
    7. 	例如：
    8. 	data:function(){
    9. 					return{
    10. 						count:0
    11. 					}
    12. 				},
    13. 				methods:{
    14. 					doClick:function(){
    15. 						this.count++;
    16. 					}
    17. 					}
    18.  
    19.  */
    20. script>
    21.  
    22. <style>
    23. 	/* 组件样式 */
    24. style>

    组件传值作用：用于主页面左侧菜单折叠的参数传递 

    八、自定义事件

      监听事件：$on(eventName) 
       触发事件：$emit(eventName) 

       注1：Vue自定义事件是为组件间通信设计   
            vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定
         
            父Vue实例->Vue实例，通过prop传递数据
            子Vue实例->父Vue实例，通过事件传递数据 

       注2：事件名
            不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称
            建议使用“短横线分隔命名”，例如：three-click

     

    # 只配合一个事件名使用 $emit：

    1. <div id="emit-example-simple">
    3.   <welcome-button v-on:welcome="sayHi">welcome-button>
    4. div>
    5. <script>
    6. Vue.component('welcome-button', {
    7.   template: `
    8.     
    9.       Click me to be welcomed
    10.     
    11.     `
    12. })
    13. new Vue({
    14.   el: '#emit-example-simple',
    15.   methods: {
    16.     sayHi: function () {
    17.       alert('Hi!')
    18.     }
    19.   }
    20. })
    21. script>


    # 配合额外的参数使用 $emit: 

    1.    <div id="app">        
    2.         <div id="counter-event-example">
    3.         
    4.             <magic-eight-ball v-on:give-advice="showAdvice">welcome-button>
    5.         div>
    6.     div>
    7.  
    8.     <script>
    9.     Vue.component("magic-eight-ball", {
    10.         data:function(){
    11.             return{
    12.                 possibleAdvice:["Yes","No","Maybe"]
    13.             }
    14.         },
    15.         methods:{
    16.             giveAdvice:function(){
    17.                 var randomAdviceIndex=Math.floor(Math.random()*this.possibleAdvice.length)
    18.                 this.$emit('give-advice',this.possibleAdvice[randomAdviceIndex])
    19.             }
    20.         },
    21.         template: `
    22.             
    23.                 Click me to for advice
    24.             
    25.         `
    26.     });
    27.     new Vue({
    28.         el: '#counter-event-example',        
    29.         methods: {
    30.             showAdvice: function (advice) {
    31.                 alert(advice)
    32.             }  
    33.         }
    34.     })
    35.     script>
    36. 数据传递
    37.  
    38. <div id="app">        
    39.       <parent>parent>
    40.     div> 
    41.     <script>
    42.       //定义局部子组件
    43.       var childNode={
    44.         template:`
    45.           <div class="child">
    46.             <div>
    47.               <span>子组件数据span>
    48.               <input v-model="childMsg" v-on:input="data">
    49.             div>
    50.             <p>{{childMsg}}p>
    51.           div>
    52.         `,
    53.         data(){
    54.           return {
    55.             childMsg:"我不猜"
    56.           }
    57.         },
    58.         methods:{
    59.           data(){
    60.             this.$emit('pass-data',this.childMsg)
    61.           }
    62.         }
    63.       }
    64.       //定义父组件
    65.       var parentNode={
    66.         template:`
    67.           <div class="parent">
    68.             <div>
    69.               <span>父组件数据span>
    70.               <input v-model="msg">
    71.             div>
    72.             <p>{{msg}}p>
    73.             <child v-on:pass-data="getData">child>
    74.           div>
    75.         `,
    76.         components:{
    77.           'child':childNode
    78.         },
    79.         data(){
    80.           return {
    81.             msg:"你猜"
    82.           }
    83.         },
    84.         methods:{
    85.           getData(value){
    86.             this.msg=value;
    87.           }
    88.         }
    89.       }
    90.       new Vue({
    91.         el: '#app',        
    92.         components:{
    93.           'parent':parentNode
    94.         }
    95.       })
    96.     script>

    效果演示：

    子组件通过数据绑定将自身的信息传递给父组件，从而改变父组件内容。

    注：

    现在在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件，可以使用 .native 修饰符，比如：

    <my-component v-on:click.native="doSomething">my-component>

  • 相关阅读:
    创建vue3项目、链式调用、setup函数、ref函数、reactive函数、计算和监听属性、vue3的生命周期、torefs的使用、vue3的setup写法
    Windows命令行查找并kill进程及常用批处理命令汇总
    从零上手双指针
    电磁仿真CST软件探针的设置和使用交叠检查功能【基础教程】
    STM32F4串口USART发送为00的解决方案
    @RequestMapping 注解以及其它使用方式
    【设计模式 05】原型模式
    软件测试项目实战，一比一还原可以写进简历的
    (十三) minAreaRect函数
    化学之理财之道
  • 原文地址：https://blog.csdn.net/m0_60786924/article/details/126471187