Vue基本格式及常用V-指令

最新推荐文章于 2024-09-23 15:32:57 发布
最新推荐文章于 2024-09-23 15:32:57 发布
阅读量6.1k 收藏 21
点赞数 5
分类专栏： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chijiajing/article/details/82768700
版权

目录

常用指令例子v-on:click

v-model(双向绑定，即其中一方改变值，另一方也随之改变)

例子2:

v-show

v-for

v-bind(绑定元素)其中一种写法

获得当前点击对象

v-for渲染填充值，并通过click动态改变样式例子

  


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
     //先导入vue.js
	<script src="素材/vue.js"></script>
</head>
<body>
    //确定vue的作用于是下面这个div id是box，显示数据的格式是 {{内容}}
	<div id="box"><h1>{{mess}}</h1></div>
	<script type="text/javascript">
        //new一个Vue，并在里面操作
		var vm=new Vue({
            //el就是值作用范围，只能指向一个对象(可以是id选择器或者class选择器)
			el:"#box",   //只能用逗号分隔，不能用分号，否则不执行也不报错
            //data指向数据，{}里面的内容可以是键值对关系，下面就是通过{{mess}}获得hello world
			data:{mess:"hello world!"},  
            
            //对应方法体   
            methods:{    
            fn1:function(参数){
                //方法体
                }
            } 
		})
	</script>
</body>
</html>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="素材/vue.js"></script>
<body>
	<div id="box">
		//{{}}里面可以进行基本运算，还能用三元表达式
		<h1>Messagee:{{mess}}</h1>
		<h1>{{num+1}}</h1>
		<h1>{{flag==true?"yes":"no"}}</h1>
	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#box",
			data:{mess:"今天天气不错",num:"20",flag:false}
		});
	</script>
</body>
</html>


常用指令例子
v-on:click
 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="素材/vue.js"></script>
</head>
<body>
	<div id="box">
		<h1>{{mess}}</h1>
		//通过点击指令调用方法v-on:click类似onclick方法，可以简写为@click
		//若方法没有参数可以传，则可以省略括号
		<button v-on:click="fn1">倒叙</button>
	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#box",
			data:{mess:"hello"},
			methods:{fn1:function(){
				this.mess=this.mess.split('').reverse().join('');
			}}
		})
	</script>
</body>
</html>

v-model(双向绑定，即其中一方改变值，另一方也随之改变)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="素材/vue.js"></script>
<body>
	<div id="box">
		//v-model指向data里面的对象，这个key的value可以为空("")，但必须要有
		<input type="text" v-model="name" placeholder="你的名字">
		//对应显示的数据，在上面input改变的值，会在这里实时更新改变
		<h1>{{name}}</h1>
	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#box",
			data:{name:"小明"},
			
		});
	</script>
</body>
</html>

例子2:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="素材/vue.js"></script>
</head>
<body>
	<div id="dox2">
	<div id="box">
		<form action="">
		<p>用户名:<input type="text" v-model="lname"></p>
		<p>密码: <input type="password" v-model="lpassword"></p>
		<p>性别: <input type="radio" name="sex" value="男" checked="checked" v-model="sex">男 <input type="radio" name="sex" value="女" v-model="sex">女</p>
		<p>爱好(多选按钮): <input type="checkbox" name="love" value="eat" v-model="love">吃
			<input type="checkbox" name="love" value="play" v-model="love">玩
			<input type="checkbox" name="love" value="sleep" v-model="love">睡觉
			<input type="checkbox" name="love" value="song" v-model="love">唱歌</p>
		<p><input type="reset" value="重置"></p>
	</form>
	</div>
	<div >
		<h1>表单内容如下</h1>
		<p>用户名:{{lname}}</p>
		<p>密码:{{lpassword}}</p>
		<p>性别:{{sex}}</p>
		<p>爱好(多选):{{love}}</p>
		
	</div>
	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#dox2",
			//v-model必须要有key，但是value可以为空！
			data:{lname:"",lpassword:"",sex:"",love:[]}
		});
	</script>
</body>
</html>


v-show

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="素材/vue.js"></script>
	<style type="text/css">

	</style>
</head>
<body>
	<div id="box" style="height: 100%;width: 100%">
		<div style="height: 200px;width: 100px;margin: auto;" ><h3 @click="fn1"><img src="素材/image/pic.png" alt="">Edit Me</h3>
			//v-show的值为true则显示，为false则隐藏，这里是用@click动态改变flag的值
		<input type="text" v-show="flag" v-model="mess">
		<h3>{{mess}}</h3>
		</div>
		
	</div>

	<script type="text/javascript">
		

		var vm=new Vue({
			el:"#box",
			data:{mess:"",flag:false},
			methods:{
				fn1:function(){
					//每次都等于自己相反的值，效果为点击一下则
					this.flag=!this.flag;
				}
			}
		});
	</script>
</body>
</html>


v-for

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="素材/vue.js"></script>
</head>
<body>
	<div id="box">
		<ul>
			//动态渲染格式为 (自定义数据名,下标) in 数据/集合 {{这些写的是自定义数据名}}
			<li v-for="jingdong in arr">{{jingdong}}</li>
		</ul>
	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#box",
			data:{arr:['全部商品分类','家用电器','手机 数码 相机','电脑 办公','家居 家具 家装','男装 女装 珠宝','鞋靴 箱包 钟表']}
		});
	</script>
</body>
</html>

v-bind(绑定元素)

其中一种写法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="素材/vue.js"></script>
	<script src="素材/jquery-1.8.3.js"></script>
	<style>
		.bgcL{
			display: inline-block;
			margin: 2px;
			background-color:#7FFFAA;
			color: #FFFAF0;
		}
		.bgcR{
			background-color: #FFC0CB;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			//动态绑定属性class，里面的参数也必须为data里面存在的key
			<li v-for="data1 in arr" @click="fn1(this)" v-bind:class=[bgcL]>{{data1}}</li>
		</ul>
		<p id="messP"></p>
	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#box",
			//key对应的value指向css，最终网页是class=bgcL
			data:{arr:['html','css','javaScript','vue.js'],bgcL:"bgcL"},
			methods:{
				fn1:function(obj){
					$(event.target).addClass("bgcR").siblings('li').removeClass('bgcR');
					let dd=$(event.target).html();	
					$("#messP").text("你选择的是："+dd);
				}
			}
		});
	</script>
</body>
</html>


获得当前点击对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="素材/vue.js"></script>
	<script src="素材/jquery-1.8.3.js"></script>
</head>
<body>
	<div id="box">
		<ul>
			<li @click="fn1(obj)">李师傅<span>3000</span></li>
			<li @click="fn1(obj)">吴师傅<span>1000</span></li>
			<li @click="fn1(obj)">陈师傅<span>2000</span></li>
			<li @click="fn1(obj)">赵师傅<span>2200</span></li>
		</ul>
		<p>Total:<span >{{dd}}</span></p>
	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#box",
			data:{dd:""},
			methods:{
				fn1:function(e){
					//获得当前点击对象是event.target
					let sum=$(event.target).children('span').html();
					if (sum===undefined) {
						sum=$(event.target).html();
					}
					this.dd=sum;
				}
			}
		});
	</script>
</body>
</html>

v-for渲染填充值，并通过click动态改变样式例子
 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="素材/vue.js"></script>
	<script src="素材/jquery-1.8.3.js"></script>
	<style>
		#box{
			width: 50%;
			height: 100%;
			border: 1px solid #000;
			margin: auto;
		}
		.firstCss{
			display: inline-block;
			line-height:0;
         font-size:0;
         overflow:hidden;
		}
		.secondCss{

		}
	</style>
</head>
<body>
	<div id="box">
		<p>
		<button value="1" @click="fn1(this)">封面</button>
		<button value="2" @click="fn1(this)">带文字的</button></p>
		<div v-for="dd in arr" v-bind:class="flag?firstCss:secondCss" ><img :src="dd.pic" ><span>{{dd.title}}</span></div>
	</div>
<script type="text/javascript">
	var vm=new Vue({
		el:"#box",
		data:{arr:[{pic:"http://img.pconline.com.cn/images/upload/upc/tx/pcdlc/1209/06/c0/13645981_1346882786961.jpg",title:"第一本书"},
		{pic:"http://www.86wan.com/uploads/allimg/1205/2097_120524101635_5.jpg",title:"第二本书"},
		{pic:"http://pic.tyread.com:8082/content_T1TydTB_x71RytvJIE_320x480.jpg",title:"第三本书"},
		{pic:"http://pic.tyread.com:8082/content_T1LydTBsxv1RytvJIE_320x480.jpg",title:"第四本书"},
		{pic:"http://image-7.verycd.com/ea02b5db0461c1e2c0ae17fec0422cde69524%28600x%29/thumb.jpg",title:"第五本书"},
		{pic:"http://im5.tongbu.com/websiteDev/b87ddd3b-2.jpg",title:"第六本书"}],
		flag:true,
		firstCss:"firstCss",
		secondCss:"secondCss"
		},
		methods:{
			fn1:function(e){
				let num=$(event.target).val();
				if (num==1) {
					this.flag=true;
				}else{
					this.flag=false;
				}
			}
		}
	});
</script>
</body>
</html>

 

chijiajing
关注
专栏目录
Vue基本代码结构
Yi_LittleRock的博客
04-15 2051
Vue基本代码结构 1.引入Vue.js文件 <script src="Vue.js"></script> 2.创建Vue实例对象 new Vue() var vm=new Vue({ el:"#app", //选择器的名称，表示当前new的Vue实例，要控制页面上的哪一个区域 data:{ //存放el中要用到的数据 msg:'hello world' //指令 } }) 通过data属性定义数据，这些数据可以在实例对应的模板中进行绑定并使用。
vue.js中常用v-指令
weixin_47525520的博客
05-09 439
Vue中 v-text on if for model bind show 的解释 v-text v-text:元素的InnerText属性,必须是双标签 跟{{ }}效果是一样的 使用较少 注意: v-text 只能用在双标签中 v-html: 元素的innerHTML v-html 其实就是给元素的innerHTML赋值 v-on v-if v-if : 判断是否插入这个元素,相当于对元素的销毁和创建 v-for v-for 使用方式 v-fo="(item,index) in data" index
VUE基本格式
qq_26388781的博客
01-12 756
VUE基本格式
02_Vue基本指令
最新发布
卷不动的程序员
09-23 858
在webstorm中配置serve导入路由 Terminal输入 npm install vue-router@3 可在node_modules文件夹中导入设置路由在main.js中将router挂载到vue实例上在src目录下创建router包，创建index.js，配置路由App.vue中将script内容删除，并在template中加入router-view标签node_modules查看加载的包语法规定提示，可在vue.config.js文件中加入然后设置不显示。
vue ：基本语法格式
weixin_33700350的博客
06-26 299
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue</title> <script src="js/AMjs/vue.min.js"></script></head><body><p&...
vue基本格式
gewuzhizhiya的博客
12-21 745
MVVM模式 vue的基本步骤 数据绑定 v-model {{name}}数据渲染 ，双向绑定
Day01-Vue的基本格式
qq_56567593的博客
04-20 395
创建Vue实例传入的options 我们在创建Vue的时候，会传入一个对象options 这个options包含哪些选项？ 目前掌握这些选项 el: 类型：string | HTMLElement（表示HTML中的一个元素） 作用：决定之后的Vue实例会管理哪一个DOM。 data： 类型：Object | Function(组件当中data必须是个函数) 作用：Vue实例对应的数据对象 methods： 类型：{[key：string]：Function} 作用：定义属于Vue的一些方法，可以在其他地方
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
10-17
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下
Vue事件处理：v-on 指令
pan_junbiao的博客
08-21 784
在 Vue.js 中，事件处理是一个很重要的环节，可以使用v-on 指令对 DOM 事件进行监听。该指令通常在模板中直接使用，在触发事件时执行相应的 JavaScript 代码。在 HTML 元素中使用v-on 指令时，v-on 后面可以是所有的原生事件名称。与事件绑定的方法可以传入原生 DOM 事件对象，将 event 作为参数进行传递。
Vue.js常用指令汇总（v-if、v-for等）
10-21
本文将详细介绍Vue.js中的几个常用指令：v-if、v-for、v-show、v-bind和v-on。 1. **v-if** - 条件渲染指令，用于根据表达式的布尔值决定是否渲染元素。`v-if`更倾向于在条件不满足时避免编译和渲染元素，从而提高...
vue格式
qq_40197100的博客
01-31 517
Vue后部格式 父子类传参： 组件引用赋值时注意：
Vue书写格式
m0_58260634的博客
03-28 277
<div id="app"> </div> <script type="text/javascript"> const app =new Vue( { el:'#app', data:{ } }) </script> <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
vue--1.基本格式
村西头的俏寡妇
04-08 290
官网地址api：https://cn.vuejs.org/v2/api/官网教程：https://cn.vuejs.org/v2/guide/syntax.html菜鸟教程：http://www.runoob.com/vue2/vue-tutorial.html 这只是楼主用来查询的东西1      基本1.1  Api1.1.1  全局1.1.2  选项 1.1.3  实例1.1.4  指令、特...
vue 代码格式解析（初学者必备）
weibuo的博客
04-21 5629
这里写自定义目录标题Vue单页面与多页面的区别定义vue普遍代码格式（ts页面除外）template组件script js交互 Vue单页面与多页面的区别 定义 SPA单页面应用（SinglePage Web Application），指只有一个主页面的应用（一个html页面），一开始只需要加载一次js、css的相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源，vue存在一个index.html,其中类容通过，路由进行局部刷新，更新页面。 MPA多页
vue指令
lf811的博客
05-25 136
1.v-text v-text是一个渲染文本的指令 不能解析标签 会把标签当成字符串渲染在页面上2.v-html v-html 也是一个渲染内容的指令 但是v-html会解析标签 标签不在页面上显示3.v-show v-show 是一个控制元素显示隐藏的指令 他是通过css样式（display:none）控制dom的显示隐藏4.v-if v-if 也是一个控制元素显示隐藏的指令 但是v-if本质上控制的是 dom的删除和增加 意思就是v-if的值如果是false则会从文档中直接删除dom5.v-else-.
Vue的基本语法
qq_47443027的博客
03-08 408
　每个 Vue 应用都需要通过实例化 Vue 来实现。 　　语法格式如下： var vm = new Vue({ //选项 }); 　　让我们通过实例来看下 Vue 构造器中需要哪些内容： <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </di
Vue基础（全篇）
qq_45171942的博客
04-20 400
Vue是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层，可以独立完成前后端分离式Web项目的JavaScript框架。本篇内容主要介绍Vue的基础语法。 一、基础格式 <html> <head> <meta charset="utf-8" /> <title></title> ...
Vue基本写法
SYQ15544423296的博客
07-28 3136
Vue基本写法
vue代码书写格式
Dayunyun2019的博客
03-02 568
<template> <div class=""><div> </template> <script> export default { name:"MyComponentName", components:{}, directives:{}, filters:{}, mixins:[], model:{}, props:{}, data() { return .
Vue入门：掌握基本语法与常用指令详解
本文将深入讲解Vue.js的基本语法和常用指令，帮助读者快速理解和上手。 首先，让我们了解一下Vue的核心概念。Vue.js作为当前最热门的前端框架之一，与React和Angular.js并列为前端三大主流框架。Vue特别强调视图层...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值