Vue基础语法02

最新推荐文章于 2024-07-14 11:16:56 发布
最新推荐文章于 2024-07-14 11:16:56 发布
阅读量112 收藏
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zy2303201381/article/details/124473410
版权

1. 样式绑定

样式分为二种：class绑定和style绑定

class绑定：

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

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

style绑定：

v-bind:style="expression"

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- CDN方式 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<style>
		.cl{
			color: red;
			font-size: 30px;
		}
		.cla{
			font-weight:bold ;
		}
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="a">
			<h1>{{ts}}</h1>
			<h2>样式绑定</h2>
			<!-- class样式 -->
			<div v-bind:class="clsplus">
				大帅比
			</div>
			<!-- style样式 -->
			<div :style="clsObject">
				王炸
			</div>
		</div>
	</body>
	<script>
		//每一个Vue实例都是从new构造函数开始
		var vm = new Vue({
			el:'#a',
			data:{
				ts:new Date().getTime(),
				cls:'cl',
				clsObject:{
					color:'blue',
					fontSize:'20px',
					fontWeight:'bold'
				},
				clsplus:['cl','cla']
				
			},
			methods:{
				
			}
		});
	</script>
</html>

二. 事件处理器

事件修饰符：

        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>

2.2 按键修饰符
      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="js/vue.js"></script>
		</head>
	<body>
		<div id="app">
			<h1>{{ts}}</h1>
			{{msg}}
			<div>
				消息:<input type="text" v-model="msg"/>
				<button @click="send">发送 </button><br />
			</div>
			<!-- 通过once修饰符控制事件只能点击一次 -->
			<div>
				消息:<input type="text" v-model="msg"/>
				<button @click.once="send">发送 </button><br />
			</div>
			<!-- 提交事件不再重载页面 -->
			<form action="book.action" v-on:submit.prevent="doSubmit">
				消息:<input type="text" v-model="msg"/>
				<input type="submit" value="提交"/>
			</form>
			<div>
				消息：<input type="text" @keyup.enter="doKeyup()"/>
			</div>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				msg:''
			},
			methods:{
				send:function(){
					console.log(this.msg);
				},
				doSubmit:function(){
					console.log('doSubmit');
				},
				doKeyup:function(){
					console.log(111);
				}
			}
		});
	</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="js/vue.js"></script>
		</head>
	<body>
		<div id="app">
			<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="0"/>女<br />
			地址:<select v-model="area">
				<option value="">------请选择------</option>
				<option v-for="d in dz" :value="d.id">{{d.name}}</option>
			</select><br />
			爱好:<span v-for="h in hobby">
				<input type="checkbox" v-model="hobbies" :value="h.id"/>{{h.name}}
			</span><br />
			简介:<textarea v-model="remark">
			</textarea><br />
			<input type="checkbox" v-model="flag"/>已阅读<br />
			<button @click="doRegister()" :disabled="disable">注册</button>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				username:'',
				password:'',
				sex:'1',
				dz:[
					{id:1,name:'湖南长沙'},
					{id:2,name:'湖南岳阳'},
					{id:3,name:'湖南湘潭'},
					{id:4,name:'湖南株洲'}
				],
				hobby:[
					{id:1,name:'打游戏'},
					{id:2,name:'敲代码'},
					{id:3,name:'看美眉'},
					{id:4,name:'看帅哥'}
				],
				hobbies:[],
				area:'',
				remark:'',
				flag:false
			},
			methods:{
				doRegister:function(){
					let params={
						username:this.username,
						password:this.password,
						sex:this.sex,
						dz:this.area,
						hobby:this.hobbies,
						remark:this.remark
						
					};
					console.log(params);
				}
				
					},
					computed:{
						disable:function(){
							return !this.flag
				}
			}
		});
	</script>
</html>

四. 自定义指令

new Vue({
     el:"#d1",
     directives:{//局部指令
       focus:{}
     }
 });   

## 下面的内容直接百度或查API即可
指令定义函数提供了几个钩子函数用来帮助实现功能(可选)
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="js/vue.js"></script>
		</head>
	<body>
		<div id="app">
			<h1>{{ts}}</h1>
			<h2>自定义指令（全局和局部）</h2>
			<div v-fos="name">121321</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');
			}
		});
		var vm = new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				name:'zs'
			},
			methods:{
				
			},
			directives:{
				/* 局部指令，所对应的钩子函数bind/inderted/unbind */
				fos:{
					bind:function(el,binding){
						console.log(el);
						console.log(binding);
						console.log('bind');
					},
					inserted:function(el,binding){
						console.log('inserted');
					}
				}
			}
		});
	</script>
</html>

五. vue组件

组件简介:

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

全局和局部组件:

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

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>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- CDN -->
		<script src="js/vue.js"></script>
		</head>
	<body>
		<div id="app">
			<h1>{{ts}}</h1>
			<h2> 组件 Component（全局和局部）</h2>
			<kfc-button @three-click="doTest"></kfc-button>
			<yy-button :first-name="Obj"></yy-button>
		</div>
	</body>
	<script>
		/* 1.组件的定义：全局和局部
		2.组件语法
		2.1 全局组件
		Vue.components('组件名',options)
		2.2 局部组件
		var vm=new Vue({
			components:{
				组件名:{
					....
				},
				....
			}
		}) */
		/* 3.组件命名：
		3.1 短横线命名法：kfc-button
		3.2 首字母大写命名法（帕斯卡）：KfcButton
		补充：驼峰命名法：kfcButton
		4.组件作用：扩展HTML元素，封装可重用的代码
		5.组件理解：可以把组件理解为JSP中的<%@include%>指令,组件其实就是一个独立的页面
		SPA */
		/* 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);
				}
			}
		});
		var vm = new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				Obj:{
					tname:'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>

六. 自定义事件

监听事件：$on(eventName) 

触发事件：$emit(eventName) 

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

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

hdsfadsfdsaf
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue基础语法
qq_52262541的博客
04-10 1109
Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容。 写法：{{XXX}}，XXX是Js表达式，且可以直接读取到date中的所有属性。 2.指令语法： 功能：用于解析标签（包括：标签属性、标签内容、绑定事件…）。 举例：v-bind:href=“XXX” 或简写为：href=“XXX”,XXX同样要写js表达式，且可以直接读取到date中的所有属性。 备注：Vue中有很多的指令，且形式都是：v-???,此处我们只是拿v-bind举个例子。 Vue中有2种数据绑定的方式： 1.单向绑定
Vue的基础语法
China_11111的博客
03-21 852
一、Vue的概念 1.什么是vue.js 1、Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 2、Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！ 二、MVC与MVVM的区别 1、MVC 是后端的分层开发概念; 2、MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为
vue基础语法
若有所执，必有所成，心之所向，必显光芒
07-04 764
内容渲染指令，属性绑定指令，事件绑定，事件修饰符，按键修饰符，双向绑定，列表渲染，v-for语法
vue基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
从Vue基础语法入手
08-10
本教程将从Vue的基础语法开始，逐步深入，帮助你理解这个强大的工具在实际项目中的应用。 首先，我们从Vue的基本结构说起。一个基本的Vue实例包含`<template>`、`<script>`和`<style>`三个部分。`<template>`用于...
前端框架Vue基础语法笔记
01-20
Vue基础语法笔记 本笔记主要涵盖了Vue基础语法的知识点，包括创建Vue实例、数据绑定、事件绑定、循环和数据双向绑定、组件化等方面的内容。 一、创建Vue实例 在Vue中，创建一个实例需要使用Vue.createApp()方法，...
02-Vue模板基础语法.zip
04-06
【技术分析】 ... CSS，可以帮助把网页外观做得更加美观； JavaScript，是一种轻量级的解释型编程语言； ... Bootstrap 是快速开发 Web 应用程序的前端工具包。...AJAX，创建交互式网页应用的网页开发技术。...
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1193
vue切换主题
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 784
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
vuejs v-for和v-if同时使用报变量未定义
最新发布
业余程序猿
07-14 145
vue3中v-if优先级高，v-if使用v-for循环体数据时数据还未加载，就报未定义了。vue2中v-for优先级高，同时使用v-if可以直接使用v-for的循环体数据。无论时vue2还是3，官方都不建议两者一起使用，建议通过template嵌套。vue3和vue2 v-if和v-for同时使用时渲染优先级变了。查了下官方文档才找到问题所在。风格指南 — Vue.js。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1388
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
CSS特效：pointer-events: none；的一种特殊应用
q1003675852的博客
07-11 477
本文记录了pointer-events: none;的一种特殊应用，既能显示模糊渐变的同时还能保持元素可点击的效果。
vue vite+three在线编辑模型导入导出
regretTAT的博客
07-10 487
要实现一个类似于数字孪生的场景 可以在线、新增、删除模型 、以及编辑模型的颜色、长宽高 然后还要实现 编辑完后 保存为json数据 记录模型数据 既可以导入也可以导出
vue3 路由跳转新页面并传递参数与获取参数
Anlittlecat的博客
07-10 325
parmas的形式传参需在路由处定义。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 258
通过sm4对文件进行加解密，用户输入密码
Vue.js学习笔记（五）抽奖组件封装——转盘抽奖
summer_gf的博客
07-11 379
动态配置转盘组件开发，只需要改动数据，就自动生成转盘，减少UI和前端的工作量。
vue基本语法讲解.pdf
05-11
Vue是一种流行的JavaScript框架，它具有简单易用的语法和强大的功能，使得构建单页面应用程序变得更加容易。在Vue的项目中，有一些重要的概念需要理解和掌握。 首先，Vue中使用的一些重要概念包括单页面应用程序、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值