Vue框架---Vue模板语法（二）

已于 2022-05-08 00:20:11 修改
阅读量1.4k 收藏 1
点赞数 1
分类专栏： Vue 文章标签： vue模板语法
于 2022-05-02 23:22:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59610127/article/details/124513971
版权

样式绑定

1、class绑定

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

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

<div id="ad">
	<h1>{{ts}}</h1>
	<!-- class样式 -->
	<div :class="clsArrs">
		11111111111111111111111111111
	</div>
</div>

<script>
			var vm=new Vue({
				el:'#ad',
				data:{
						ts:new Date().getTime(),
						clsArrs:['cl','cl1']
				}
			});
		</script>

运行结果

2、style绑定

    v-bind:style="expression"
    expression的类型：字符串、数组、对象

<div id="ad">
			<!-- style样式 -->
			<div :style="clsObj">
				11111111111111111111111111111
			</div>
		</div>


<script>
			var vm=new Vue({
				el:'#ad',
				data:{
						ts:new Date().getTime(),
						clsObj:{
							color:'green',
							fontSize:'30px',
							fontWeight:'bold'
						}
				}
			});
		</script>

运行结果

事件处理器

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

2、 事件修饰符

Vue通过由点(.)表示的指令后缀来调用修饰符，
      .stop
      .prevent
      .capture
      .self
      .once 
 
      <!-- 阻止单击事件冒泡 -->
      <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>

<!-- click 事件只能点击一次 -->====<a v-on:click.once="doThis"></a>

click 事件只能点击一次：在此页面只能点击改按钮依次（在无刷新的情况下）：

<div id="ad">
<div>
				消息：<input type="text" v-model="msg" />
					<button @click="send">发送</button>
			</div>
			<!-- 事件修饰符 
				once 只能点击事件一次
			-->
			<div>
				消息：<input type="text" v-model="msg" />
					<button @click.once="send">发送</button>
			</div>
</div>

<script>
		var vm=new Vue({
			el:'#ad',
			data:{
				ts:new Date().getTime()	,
				msg:''	
				},
				methods:{
					send:function(){
						console.log(this.msg); 
					}
				}
			});
		
		</script>

运行结果：

 只能点击一次，控制台只打印一次

<!-- 提交事件不再重载页面 -->
         <div>
             <form action="bookAction.action" v-on:submit.prevent="doSubmit">
              消息：<input type="text" v-model="msg" />
            <input type="submit" value="提交" />
         </form>
</div>


<script>
			var vm=new Vue({
				el:'#ad',
				data:{
					ts:new Date().getTime()	,
					msg:''
					
				},
				methods:{
					
					doSubmit:function(){
						console.log('doSubmit.......')
					}
				}
			});
		
		</script>

运行结果：

点击提交按钮，不会跳转页面

按键修饰符

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

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

按键修饰符----enter：当我在文本框中输入内容之后按下enter键就可以提交了

<!-- 按键修饰符 -->
	<div>
		消息：<input type="text" @Keyup.enter="doKeyup"  />
    </div>


<script>
		var vm=new Vue({
			el:'#ad',
			data:{
				ts:new Date().getTime()	,
				msg:''
			},
			methods:{
				doKeyup:function(){
					console.log(1231231);
				}
			}
		});
		</script>

运行结果：

按回车键，控制台打印 

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

表单

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

常用控件
       文本框/密码框/文本域/隐藏域
   
       单选复选框/多选复选框

       单选按钮

       下拉框

<div id="ad">
			<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="d in hobby">
				<input type="checkbox" v-model="hobbies"  :value="d.id" />{{d.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>
			<!-- <button @click="doRegister()" :disabled="!flag">注册</button> -->
		</div>



<script>
			var vm=new Vue({
				el:'#ad',
				data:{
					ts:new Date().getTime()	,
					username:'',
					password:'',
					sex:'',
					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,
							arae:this.areaname,
							remark:this.remark
						};
						
						console.log(params);
					}
				},
				computed:{
					disable:function(){
						return !this.flag;
					}
				}
			});
		
		</script>

当自己点击了注册时，flag就为true，当进入到计算属性中的show方法时，因为flag为true，所以show方法返回的是false，v-bind:disabled="show"，因为show为false，再加上v-bind利用的是disable属性，提交就会亮起，反之相同。

运行结果： 

自定义指令

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

<div id="ad">
			<h1>{{ts}}</h1>
			<h2>自定义指令</h2>
			<div v-fos="name">12312421</div>
			<span v-yy></span>
			
		</div>


<script>
		// 全局自定义指令
		Vue.directive('yy',{
			bind:function(el,binding){
				console.log('[全局指令的binding]');
			},
			inserted:function(el,binding){
				console.log('[全局指令的inserted]');	
			}
			
			
		});
		
		
			var vm=new Vue({
				el:'#ad',
				data:{
					ts:new Date().getTime()	,
					name:'zs'
				},
				methods:{
					
				},
				directives:{
					// 局部指令所对应的钩子函数	bind/inserted/unbind
					fos:{
						bind:function(el,binding){
							console.log(el);
							console.log(binding);
							console.log('bind');
						},
						inserted:function(el,binding){
							console.log('inserted');	
						}
					}
				}
			});
		
		</script>

运行结果：

指令定义函数提供了几个钩子函数用来帮助实现功能(可选)
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 钩子中可用

vue组件

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

全局和局部组件

     全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。
      局部组件: new Vue({el:'#d1',components:{...}})

props

props是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"

<div id="ad">
			<h1>{{ts}}</h1>
			<h2>组件 Component 全局/局部</h2>
			<kfc-button @three-click="doTest"></kfc-button>
			<yy-button :first-Name="obj"></yy-button>
		</div>


<script>
		//组件定义 :全局和局部
		//2.组件语法：
			//2.1全局组件
				//Vue.component('组件名称',options)
			//2.2局部组件
				/* var vm=new Vue({
					component:{
						组件名:{
							....
						},
						....
					}
				
				}) */
		//3.组件命名
			//3.1短横线命名法：
				// kfc-button
			//3.2首字母大写命名法(帕斯卡)
				//KfcButton
			//驼峰命名法
				// kfcButton
		
		//4.组件作用：扩展HTML元素,封装可冲重用的代码
		//5.理解：理解为jsp中的<%@include%>指令	
		//组件是一个独立的页面
		
		//6.组件传值
		//6.1子到父
			// 采用事件方式 this.$emit('事件名',参数....)
		//6.2父到子
			//采用属性传参方式
			
		//全局组件
		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);
				}
			}
		});
		
		
			var vm=new Vue({
				el:'#ad',
				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>

注意事项：

  • 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods

        以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

  • 当我们定义这个 <button-counter> 组件时，你可能会发现它的data并不是像这样直接提供一个对象

        data: {
          count: 0
        }

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

  

  • 定义组件名的方式有两种

         短横线分隔命名(建议使用) 
         Vue.component('my-component-name', { /* ... */ })，引用方式：<my-component-name>

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

  

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

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

  • 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
         }

代码 提取码：63er

至此，vue模板语法介绍完毕，由于作者水平有限难免有疏漏，欢迎留言纠错。

鑫709
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
收集22种开源Vue模板和主题框架「干货」
2401_84447390的博客
05-03 311
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue基础语法
Bugxiu_fu的博客
09-17 1270
vue基本模板语法
什么是Vue模板？如何使用Vue模板？
wzxue1984的博客
07-25 1217
Vue模板语法简单易懂，允许您在模板中使用Vue指令和表达式来实现动态数据渲染和交互。使用Vue模板，您可以将数据和行为与界面进行关联，实现灵活且动态的用户界面。计算属性和方法：除了简单的数据绑定外，可以在模板中使用计算属性和方法。计算属性是基于Vue实例的响应式数据进行计算得出的属性，方法则是在Vue实例中定义的函数。插值用于将数据动态地展示在模板中，双向数据绑定用于将表单元素的值与Vue实例的数据进行双向绑定。使用指令：Vue提供了一系列指令，用于在模板中实现各种功能。定义模板：在Vue实例中，使用。
Vue基础之模板语法介绍
m0_73647713的博客
09-18 873
上篇我分享了关于Vue的入门，简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。
前端_Vue_9.模板引用、组件基础
三千幻想乡
12-28 1177
虽然Vue的声明性渲染模型为你抽象了大部分对DOM的直接操作，但在某些情况下，我们仍然需要直接访问底层DOM元素。要实现这一点，我们可以使用特殊的 ref attribute： ref 是一个特殊的attribute，和 v-for 章节中提到的 key 类似。它允许我们在一个特定的DOM元素或子组件实例被挂载后，获得对它的直接引用。这可能很有用，比如说在组件挂载时将焦点设置到一个input元素上，或在一个元素上初始化一个第三方库。挂载结束后引用都会暴露在 this.$refs 之上： 注意，你只可以在组件
2024，排名前 15 的 Vue 后台管理模板，太厉害了
m0_59117112的博客
03-20 2164
主要特点：基于Bootstrap 4160 多个自定义元素响应式设计高度可定制的侧边栏菜单。
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，文本插值是使用 Mustache ...
vue3+element-plus+admin
04-12
基于vue3和element-plus组件开发的项目管理平台，包含用户权限设置功能；
vue-hap-tools：vue.js，快应用统一开发框架
03-03
Vue-Hap工具 快应用的语法虽然和vue.js比较接近...使用基于vue-cli的模板工程快速开始 npm install -g @vue/cli npm install -g @vue/cli-init vue init Youjingyu/vue-hap my-project cd my-project # 或者执行 npm i
vue-loader教程介绍
10-19
Vue.js 是一个流行的前端框架，而 `vue-loader` 是它的一个关键组成部分，专门用于处理 Vue.js 的单文件组件（Single File Components, SFCs）。在深入 `vue-loader` 的细节之前，我们需要理解基本的 Webpack 概念。...
Vue iview-admin框架二级菜单改为三级菜单的方法
08-27
2. 我们需要了解 Vue 中的模板语法和组件生命周期。 3. 我们需要了解如何使用 v-for 循环生成子元素标签。 通过本文，我们可以了解如何实现三级菜单在 Vue iview-admin 框架中，并且掌握了相关的技术要点。 相关...
Vue知识网2021
yuan
07-20 348
尤雨溪：一直呆在舒适区往往就得不到提升，程序员能力的提升往往都发生在尝试解决一个从没解决过的问题之后进行反思的过程中。 一、MVVM 不管是 React 还是 Vue，它们都不是 MVVM 框架，只是有借鉴 MVVM 的思路 MVVM ( Model-View-ViewModel ) 是一种软件架构思想。 Model 层：数据模型，是代码中主要操作的部分。 View 层：视图模板，对应要显示的标签结构。 ViewModel 层：用于处理业务逻辑，对于可输入元素（输入框、文本域等）可将 Vi.
Vue生命周期--Vue实例创建过程详解
YY的博客
11-26 1324
Vue生命周期--Vue实例创建过程详解
Vue实例 · new Vue()
热门推荐
liudachu的博客
09-26 1万+
十六、Vue实例 1.创建一个 Vue 实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ // 选项 //当创建一个 Vue 实例时，你可以传入一个选项对象。 }) 虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组
Vue常用静态模板
qq_63431773的博客
03-10 950
【代码】Vue常用静态模板。
了解Vue，Vue的基础语法
weixin_67696142的博客
07-14 634
Vue的基础语法
Vue 模板
萧曳丶
06-07 4412
原文
vue vue-grid-layout 代码
最新发布
04-25
Vue是一种流行的JavaScript框架，用于构建用户界面。它采用了组件化的开发方式，使得开发者可以将页面拆分成多个独立的组件，每个组件负责自己的逻辑和样式。Vue具有简洁易学的语法和高效的性能，因此在前端开发中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值