• vue03模板语法（下）

    目录

    一、事件处理器

    1.事件修饰符

     2.发送一次

    3.按键修饰符 

     二、自定义组件

      1 组件简介

      2 全局和局部组件

      3 props

    三、 组件通信

      自定义事件

    1.子传父 

    2.组件总结

    定义：template

    父传子：props

    子传父：通过$emit注册事件名

    this.$emit('事件名'，....)    这里一般是json对象 

    四、 表单综合案例

     五、总结

    1.事件处理器

    2.简单组件

    3.父传子

    4.子传父

    5.综合案例表单 

    一、事件处理器

    事件监听可以使用v-on 指令  

    1.事件修饰符

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

      .stop

      .prevent

      .capture

      .self

      .once

      

      

      

      

      

      

      

      

      

      

    ...

      

      

    ...

      

      

      注1：什么是事件冒泡?

    也就是可以这样理解为：当我点击div就会弹出div，传播到body，在到document

    解决方法：阻止冒泡

     

      

    1. html>
    2. <html>
    3. 	<head>
    4. 		
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<meta charset="utf-8">
    7. 		<title>title>
    8. 		<style type="text/css">
    9. 			.red{
    10. 				height: 400px;
    11. 				width: 400px;
    12. 				background-color: red;
    13. 			}
    14. 			.yellow{
    15. 				height: 300px;
    16. 				width: 300px;
    17. 				background-color: yellow;
    18. 			}
    19. 			.blue{
    20. 				height: 200px;
    21. 				width: 200px;
    22. 				background-color: blue;
    23. 			}
    24. 			.green{
    25. 				height: 100px;
    26. 				width: 100px;
    27. 				background-color: green;
    28. 			}
    29. 		style>
    30. 	head>
    31. 	<body>
    32. 		
    33. 		<div id="app">
    34. 			{{msg}}
    35.         
    36. 			
    37. 			<div class="red" @click="red">
    38. 				<div class="yellow" @click.stop="yellow">
    39. 					<div class="blue" @click="blue">
    40. 						<div class="green" @click.stop="green">div>
    41. 					div>
    42. 				div>
    43. 			div>
    44. 		div>
    45. 	body>
    46. 	<script type="text/javascript">
    47. 		// 创建实例
    48. 		new Vue({
    49. 			// 挂载实例
    50. 			el:'#app',
    51. 			// 变量区
    52. 			data() {
    53. 				return {
    54. 					msg:'hello vue!!!'
    55. 				}
    56. 			},
    57. 			methods:{
    58. 				red(){
    59. 					alert('red');
    60. 				},
    61. 				yellow(){
    62. 					alert('yellow');
    63. 				},
    64. 				blue(){
    65. 					alert('blue');
    66. 				},
    67. 				green(){
    68. 					alert('green');
    69. 				}
    70. 			}
    71. 		})
    72. 	script>
    73. html>

     就不会传播了

     2.发送一次

    为了防止有些人，一直点击发送按钮，有可能是因为它的网络慢，或者其他，它就一直在哪里点，每点击一次就会像后台发送一次请求

    演示：

     解决方法：

     

      

    1. html>
    2. <html>
    3. 	<head>
    4. 		
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<meta charset="utf-8">
    7. 		<title>title>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="app">
    12. 			<p>发送一次p>
    13. 			<input type="text" v-model="msg" />
    14. 			<button v-on:click.once="dianwoshishi">点我试试button>
    15. 		div>
    16. 	body>
    17. 	<script type="text/javascript">
    18. 		// 创建实例
    19. 		new Vue({
    20. 			// 挂载实例
    21. 			el:'#app',
    22. 			// 变量区
    23. 			data() {
    24. 				return {
    25. 					msg:'hello vue!!!'
    26. 				}
    27. 			},
    28. 			methods:{
    29. 				dianwoshishi(){
    30. 					console.log(this.msg);
    31. 				}
    32. 			}
    33. 		})
    34. 	script>
    35. html>

    运行结果：

    3.按键修饰符 

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

      

      

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

      

      

    enter = 13  它们两是同一个意思   回车键

      全部的按键别名：

      .enter

      .tab

      .delete (捕获 "删除" 和 "退格" 键)

      .esc

      .space

      .up

      .down

      .left

      .right

      .ctrl

      .alt

      .shift

      .meta  

    1. html>
    2. <html>
    3. 	<head>
    4. 		
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<meta charset="utf-8">
    7. 		<title>title>
    8. 	head>
    9. 	<body>
    10. 		
    11. 		<div id="app">
    12. 			<p>按键修饰符p>
    13. 			<input type="text" v-model="msg" @keyup.enter="dianwoshishi"/>
    14. 		div>
    15. 	body>
    16. 	<script type="text/javascript">
    17. 		// 创建实例
    18. 		new Vue({
    19. 			// 挂载实例
    20. 			el:'#app',
    21. 			// 变量区
    22. 			data() {
    23. 				return {
    24. 					msg:'hello vue!!!'
    25. 				}
    26. 			},
    27. 			methods:{
    28. 				dianwoshishi(){
    29. 					alert(this.msg)
    30. 					// console.log(this.msg);
    31. 				}
    32. 			}
    33. 		})
    34. 	script>
    35. html>

    运行结果如图所示： 

     二、自定义组件

    如果是前端框架，这个自定义组件是要深入的去了解

     vue组件

      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这样根实例特有的选项。

       注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. 		
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<meta charset="utf-8">
    7. 		<title>title>
    8. 	head>
    9. 	<body>
    10. 		<div id="app">
    11. 			<p>简单组件p>
    12. 			<my-button>my-button>
    13. 			<p>父组件 传参 给 子组件p>
    14. 			
    15. 			<my-button m='zhangsan' n='3'>my-button>
    16. 		div>
    17. 	body>
    18. 	<script type="text/javascript">
    19. 		// component有两个参数，一是：自定义组件名称,二是:模板
    20. 		Vue.component('my-button',{
    21. 			// template:'',
    22. 			template:'',
    23. 			props:['m','n']
    24. 		})
    25. 		new Vue({
    26. 			el:'#app',
    27. 			data() {
    28. 				return {
    29. 					msg:'hello vue!!'
    30. 				}
    31. 			}
    32. 		})
    33. 	script>
    34. html>

     运行结果如图所示：

    三、 组件通信

      自定义事件

       监听事件：$on(eventName)

       触发事件：$emit(eventName)

       注1：Vue自定义事件是为组件间通信设计   

            vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定

         

            父Vue实例->Vue实例，通过prop传递数据

            子Vue实例->父Vue实例，通过事件传递数据

       注2：事件名

            不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称

            建议使用“短横线分隔命名”，例如：three-click

    1.子传父 

    子组件 将参数 传递给  父组件 的关键在于下面这两个，要满足下面的两个条件
            1.$emit    2.自定义事件     

    this.$emit('事件名'，{})

    代码块： 

    1. html>
    2. <html>
    3. 	<head>
    4. 		
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<meta charset="utf-8">
    7. 		<title>title>
    8. 	head>
    9. 	<body>
    10. 		<div id="app">
    11. 			<p>子传父p>
    12. 			<my-button m="zhangsan" n="3" @mymethod="xxx">my-button>
    13. 		div>
    14. 	body>
    15. 	<script type="text/javascript">
    16. 		// 内部组件
    17. 		Vue.component('my-button',{
    18. 			template:'',
    19. 			props:['m','n'],
    20. 			methods:{
    21. 				sub(){
    22. 					var name = "张三";
    23. 					var sex = "男";
    24. 					var age = 22;
    25. 					console.log(name);
    26. 					console.log(sex);
    27. 					console.log(age);
    28. 					// 子组件 将参数 传递给  父组件 的关键在于
    29. 					// 1.$emit	2.自定义事件
    30. 					this.$emit('mymethod',name,sex,age);
    31. 				}
    32. 			}
    33. 		})
    34. 		
    35. 		// 外部组件
    36. 		new Vue({
    37. 			el:"#app",
    38. 			data() {
    39. 				return {
    40. 					msg:'hello vue!!!'
    41. 				}
    42. 			},
    43. 			methods:{
    44. 				xxx(a,b,c){
    45. 					console.log(a);
    46. 					console.log(b);
    47. 					console.log(c);
    48. 				}
    49. 			}
    50. 				
    51. 		})
    52. 		
    53. 	script>
    54. html>

     

    2.组件总结

    定义：template

    父传子：props

    子传父：通过$emit注册事件名

    this.$emit('事件名'，....)    这里一般是json对象 

    四、 表单综合案例

    1. html>
    2. <html>
    3. 	<head>
    4. 		
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<meta charset="utf-8">
    7. 		<title>title>
    8. 	head>
    9. 	<body>
    10. 		<div id="app">
    11. 			
    12. 			姓名：<input type="text" v-model="uname"/><br>
    13. 			密码：<input type="password" v-model="pwd"/><br>
    14. 			年龄：<input type="text" v-model="age"/><br>
    15. 			性别：<input type="radio" name="sex" checked="checked"/>男
    16. 				<input type="radio" name="sex"/>女<br>
    17. 			爱好：
    18. 			<div v-for="l in likes">
    19. 				<input v-model="hobby" type="checkbox" :value="l.id"/>{{l.name}}
    20. 			div><br>
    21. 			英语等级：
    22. 			<select v-model="selectedVal">
    23. 				<option v-for="e in englishs" :value="e.id">{{e.name}}option>
    24. 			select><br>
    25. 			<input @click="show" type="checkbox" />
    26. 			<input v-show="showFlag" @click="sub" type="button" value="ok" />
    27. 			<div>div>
    28. 		div>
    29. 	body>
    30. 	<script type="text/javascript">
    31. 		new Vue({
    32. 			el:'#app',
    33. 			data() {
    34. 				return {
    35. 					uname:null,
    36. 					pwd:null,
    37. 					age:null,
    38. 					sex:1,
    39. 					likes:[ //爱好的数据源
    40. 						{id:1,name:'篮球'},
    41. 						{id:2,name:'足球'},
    42. 						{id:3,name:'桌球'},
    43. 						{id:4,name:'乒乓球'}
    44. 					],
    45. 					englishs:[ //英语的数据源  下拉框
    46. 						{id:1,name:'优'},
    47. 						{id:2,name:'良'},
    48. 						{id:3,name:'差'}
    49. 					],
    50. 					hobby:[],//用来存放选中的爱好  比如1,3
    51. 					selectedVal:0,
    52. 					showFlag:false
    53. 				}
    54. 			},
    55. 			methods:{
    56. 				show() {
    57. 					this.showFlag = true;
    58. 				},
    59. 				sub(){
    60. 					// 后续都是json数据交互,向后台提交json对象
    61. 					var obj = {
    62. 						uname:this.uname,
    63. 						pwd:this.pwd,
    64. 						age:this.age,
    65. 						sex:this.sex,
    66. 						hobby:this.hobby,
    67. 						level:this.selectedVal
    68. 					}
    69. 					console.log(obj);
    70. 				}
    71. 			}
    72. 		})
    73. 	script>
    74. html>

     运行结果如图所示：

     五、总结

    1.事件处理器

    阻止冒泡和只能发送一次还有按键的修饰符等等

    阻止冒泡就是为了传播，当点击最外面一层，就不会传播，点击最里面的就会传播到最外面停止，

    就好像河里的水，当你去点击水面的时候，它就会从内传播到外，直到停止。

    发送一次指的的就是，只能向服务发送一次请求，这样就可以减少服务的压力，为了防止某人手不安分，它没反应就一直在哪里狂点。

    按键修饰符指的就是键盘的按键事件，就是不需要鼠标点击，直接用键盘回应，就好比如我们登陆，我们每登陆一个账号都会有一个确定或者注册等等，我们就可以用按键的修饰符来完成，我们就用回车键就可以直接进去登陆，不需要用鼠标移到来点击那个按钮。

    2.简单组件

    通过component里面有两个参数，一定组件名字，二是模板

    Vue.component('定义的组件名称'，{

    模板：template：[标签]

    })

    3.父传子

    是要通过在模板里面写 props：['','',...] 这里面就是你父标签里面的参数，有多少放多少

    4.子传父

    子组件 将参数 传递给父组件要满足两个条件，一是$emit ，二是自定义事件

    this.$emit('自定义事件'，参数)

    5.综合案例表单 

  • 相关阅读:
    第十六篇-Awesome ChatGPT Prompts-备份
    CentOS7安装Kafka_2.12-3.3.1集群及使用
    供需采购报价小程序系统
    【Tomcat专题】如何正确使用线程池
    基于虚拟机源码分析move合约（一）：本地变量
    Kotlin语法入门-自定义注解（7）
    css之复合选择器
    新概念英语（第二册）复习——Lesson 11 - Lesson15
    windows batch文件中 ffmpeg 的部分小坑
    【云原生Kubernetes系列第七篇】一文掌握k8s之YAML文件（少攀谈，多沉潜，清醒而独立）
  • 原文地址：https://blog.csdn.net/weixin_67465673/article/details/126674614