Vue快速入门之第三章 基础语法2

菜鸟笔记 2022-08-26

目录

一：样式绑定

   ①：class绑定

     ps:expression的类型：字符串、数组、对象

 ②：style绑定

案例演示：

 二：事件修饰符

三： 按键修饰符

 案例演示：

四：vue表单

常用控件

修饰符

案例演示：

五：自定义指令

全局指令

局部指令

六：vue组件

        1.组件简介

       2.全局和局部组件

      3. props

注意：

重点：

一：样式绑定

   ①：class绑定

  使用方式：v-bind:class="expression"

     ps:expression的类型：字符串、数组、对象

 ②：style绑定

  v-bind:style="expression"

案例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- CDN方式 -->
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<style>
		.cl{
			color: red;
			font-size: 30px;
		}
		.cl1{
			font-weight: bold;
		}
		
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="a" style="margin-bottom: 200px;">
			<h1>{{ts}}</h1>
			<!-- class样式 -->
			<div :class="clsArrs">
				真理与我同在
			</div>
			<!-- style样式 -->
			<div :style="clsObj">
				李太白
			</div>
		</div>
	</body>
	<script>
	//每一个Vue实例都是从new构造函数开始
		var vm=new Vue({
			el:'#a',
			data:{
				ts:new Date().getTime(),
				cls:'cl',
				clsArrs:['cl','cl1'],
				clsObj:{
					color:'blue',
					fontSize:'20px',
					fontWeight:'bold'
				}			
			},
			methods:{			
			}		
		});		
		
	</script>	
</html>

效果展示：

 二：事件修饰符

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

<!-- 阻止单击事件冒泡 -->
      <a v-on:click.stop="doThis"></a>
      <!-- 提交事件不再重载页面 -->
      <form v-on:submit.prevent="onSubmit"></form>
      <!-- 修饰符可以串联  -->
      <a v-on:click.stop.prevent="doThat"></a>
      <!-- 只有修饰符 -->
      <form v-on:submit.prevent></form>
      <!-- 添加事件侦听器时使用事件捕获模式 -->
      <div v-on:click.capture="doThis">...</div>
      <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
      <div v-on:click.self="doThat">...</div>
      <!-- click 事件只能点击一次 -->
      <a v-on:click.once="doThis"></a>

三： 按键修饰符

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

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
      <input v-on:keyup.13="submit">

      Vue为最常用的按键提供了别名
      <!-- 同上 -->
      <input v-on:keyup.enter="submit">

      全部的按键别名：
      .enter
      .tab
      .delete (捕获 "删除" 和 "退格" 键)
      .esc
      .space
      .up
      .down
      .left
      .right
      .ctrl
      .alt
      .shift
      .meta

 案例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- CDN方式 -->
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	
	<body>
		<!-- 定义管理边界 -->
		<div id="a" style="margin-bottom: 200px;">
			<h1>{{ts}}</h1>
			{{msg}}
			<div>
				信息:<input type="text"  v-model="msg"/>
				<button @click="send">发送</button>
			</div>
			<!--  事件只能点击一次 -->
			<div>
				信息:<input type="text"  v-model="msg"/>
				<button @click.once="send">发送</button>
			</div>
			<!-- 提交事件不再重载页面  -->
			<div>
				<form action="bookAction.action" v-on:submit.prevent="doSumbit">
					信息:<input type="text"  v-model="msg"/>
				    <input type="submit" value="提交"/>
				</form>
			</div>
			<!-- 按键修饰符 -->
			<div>
				信息:<input type="text"  @keyup.enter="doKeyup()"/>
				
			</div>
		</div>
	</body>
	<script>
	//每一个Vue实例都是从new构造函数开始
		var vm=new Vue({
			el:'#a',
			data:{
				ts:new Date().getTime(),
				msg:''
			},
			methods:{
				send:function(){
					console.log(this.msg)
				},
				doSumbit:function(){
					console.log("doSumbit....")
				},
				doKeyup:function(){
					console.log("keyup......")
				}
			}		
		});		
	</script>	
</html>

四：vue表单

         用v-model指令在表单控件元素上创建双向数据绑定

  • 常用控件

  • 文本框/密码框/文本域/隐藏域
  • 单选复选框/多选复选框
  • 单选按钮
  • 下拉框

  • 修饰符

 .lazy  默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步
 
 .number   将用户的输入值转为 Number 类型
.trim  自动过滤用户输入的首尾空格

案例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- CDN方式 -->
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	
	<body>
		<!-- 定义管理边界 -->
		<div id="a" style="margin-bottom: 200px;">
			<h1>{{ts}}</h1>
				账号：<input type="text" v-model="username"/><br/>
						密码：<input type="password" v-model="password"/><br/>
						性别：<input type="radio" v-model="sex" value="1"/>男&nbsp;
							 <input type="radio" v-model="sex" value="2"/>女<br/>
						爱好：
						<span v-for="h in hobby">
							<input type="checkbox" v-model="hobbies" :value="h.id"/>{{h.name}}
						</span><br/>
						籍贯：<select v-model="areaname">
							<option value="">---请选择---</option>
							<option v-for="a in area" :value="a.id">
								{{a.name}}
							</option>
						</select><br/>
						备注：
						<textarea v-model="remark"></textarea><br/>
						<input type="checkbox" v-model="flag" />已阅读<br/>
						<button @click="doRegister()" :disabled="disable">注册</button>
		</div>
	</body>
	<script>
	//每一个Vue实例都是从new构造函数开始
		var vm=new Vue({
			el:'#a',
			data:{
				ts:new Date().getTime(),
			username:'',
							password:'',
							sex:'1',
							hobby:[
								{id:1,name:'看美女'},
								{id:2,name:'写代码'},
								{id:3,name:'打游戏'},
								{id:4,name:'撸撸撸'},
							],
							hobbies:[],
							area:[
								{id:1,name:'长沙'},
								{id:2,name:'株洲'},
								{id:3,name:'湘潭'},
								{id:4,name:'衡阳'},
							],
							areaname:'',
							remark:'',
							flag:false
						},
						methods:{
							doRegister:function(){
								let params={
									username:this.username,
									password:this.password,
									sex:this.sex,
									hobby:this.hobbies,
									area:this.areaname,
									remark:this.remark
								};
								console.log(params);
							}
						},
						computed:{
							disable:function(){
								return !this.flag;
							}
						}
					});
		
	</script>	
</html>

效果展示：

 

五：自定义指令

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

  • 全局指令

 Vue.directive("focus",{});

  • 局部指令

 new Vue({
     el:"#d1",
     directives:{
       focus:{}
     }
   });

ps：

     指令定义函数提供了几个钩子函数用来帮助实现功能

 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 钩子中可用

案例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- CDN方式 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="a">
			<h1>{{ts}}</h1>
			<h2>自定义指令(全局和局部)</h2>
			<div v-fos="name">123123</div>
			<span v-yy></span>
		</div>
	</body>
	<script>
		/* 全局指令 */
		Vue.directive('yy',{
			bind:function(el,binding){
				console.log('[全局指令]bind');
			},
			inserted:function(el,binding){
				console.log('[全局指令]inserted');
			}
		});
		//每一个Vue实例都是从new构造函数开始
		var vm=new Vue({
			el:'#a',
			data:{
				ts:new Date().getTime(),
				name:'zs'
			},
			methods:{
				
			},
			directives:{
				/* 局部指令，所对应的钩子函数bind/inserted/unbind */
				fos:{
					bind:function(el,binding){
						//el: 指令所绑定的元素，可以用来直接操作 DOM 
						console.log(el);
						// 一个对象
						console.log(binding);
						console.log('bind');
					},
					inserted:function(el,binding){
						console.log('inserted');
					}
				}
			}
		});
		
	</script>
</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.当我们定义这个 <button-counter> 组件时，你可能会发现它的data并不是像这样直接提供一个对象

   data: {
          count: 0
        }

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

data: function () {
          return {
            count: 0
          }
        }

  3.定义组件名的方式有两种

  •    短横线分隔命名
   Vue.component('my-component-name', { /* ... */ })，引用方式：<my-component-name>
  •  首字母大写命名
  Vue.component('MyComponentName', { /* ... */ })，引用方式： <my-component-name>和<MyComponentName>都是可接受的

4.HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时

   camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
         props: ['postTitle'],<my-tag post-title="hello!"></my-tag>

案例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- CDN方式 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="a">
			<h1>{{ts}}</h1>
			<h2>自定义指令(全局和局部)</h2>
			<div v-fos="name">123123</div>
			<span v-yy></span>
		</div>
	</body>
	<script>
		/* 全局指令 */
		Vue.directive('yy',{
			bind:function(el,binding){
				console.log('[全局指令]bind');
			},
			inserted:function(el,binding){
				console.log('[全局指令]inserted');
			}
		});
		//每一个Vue实例都是从new构造函数开始
		var vm=new Vue({
			el:'#a',
			data:{
				ts:new Date().getTime(),
				name:'zs'
			},
			methods:{
				
			},
			directives:{
				/* 局部指令，所对应的钩子函数bind/inserted/unbind */
				fos:{
					bind:function(el,binding){
						//el: 指令所绑定的元素，可以用来直接操作 DOM 
						console.log(el);
						// 一个对象
						console.log(binding);
						console.log('bind');
					},
					inserted:function(el,binding){
						console.log('inserted');
					}
				}
			}
		});
		
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- CDN方式 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="a">
			<h1>{{ts}}</h1>
			<h2>组件Component(全局和局部)</h2>
			<kfc-button @three-click="doTest"></kfc-button><br/>
			<yy-button :first-name="obj"></yy-button>
		</div>
	</body>
	<script>
		//1.组件定义：全局和局部
		//2.组件语法：
		//2.1 全局组件：
		//Vue.component('组件名',options)
		//2.2 局部组件：
		//var vm=new Vue({
		//   components:{
		//	     组件名:{
		//	        ...
		//       },
		//	     ....
		//   }
		//	
		//})
		
		//3.组件命名：
		//3.1 短横线命名法：kfc-button
		//3.2 首字母大写命名法（帕斯卡）：KfcButton
		//补充：驼峰命名法：kfcButton
		
		//4.组件作用：扩展HTML元素，封装可重用的代码
		
		//5.组件理解：可以把组件理解为JSP中的<%@include%>指令,组件其实就是一个独立的页面
		
		//6.组件传值：
		//6.1 子到父：采用事件方式，this.$emit('事件名',参数...)
		//6.2 父到子：采用属性方式，props
		
		//全局组件
		Vue.component('yy-button',{
			//定义HTML代码，每一个template中有且只有一个根节点
			template:'<div><h1>全局组件</h1>'+
					'<button @click="doClick">被点击了{{count}}次</button></div>',
			//采用驼峰命名法
			props:['firstName'],
			//自定义组件中data必须使用函数方式
			data:function(){
				return {
					count:0
				}
			},
			methods:{
				doClick:function(){
					this.count=this.count+1;
					console.log(this.count);
					console.log(this.firstName);
				}
			}
		})
		
		//每一个Vue实例都是从new构造函数开始
		var vm=new Vue({
			el:'#a',
			data:{
				ts:new Date().getTime(),
				obj:{
					fname:'zhang',
					lname:'san'
				}
			},
			methods:{
				doTest:function(v){
					console.log("父组件接受到count="+v);
				}
			},
			components:{
				'kfc-button':{
					//定义HTML代码，每一个template中有且只有一个根节点
					template:'<div><h1>局部组件</h1>'+
							'<button @click="doThreeClick">被点击了{{count}}次</button></div>',
					//自定义组件中data必须使用函数方式
					data:function(){
						return {
							count:0
						}
					},
					methods:{
						doClick:function(){
							this.count=this.count+1;
							console.log(this.count);
						},
						doThreeClick:function(){
							this.count=this.count+1;
							if(this.count%3==0){
								console.log("子组件count="+this.count);
								this.$emit('three-click',this.count);
							}
						}
					}
				}
			}
		});
		
	</script>
</html>

重点：

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

  • 父Vue实例->Vue实例，通过prop传递数据
  •  子Vue实例->父Vue实例，通过事件传递数据 
javascriptvue.js前端前端前端框架开发语言

相关文章

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习...
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面...
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生...
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/v...
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 ...
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服...