vue基础语法

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

目录

1.模板语法

1.1插值

1.2 指令

1.3参数、动态参数及简写

1.4过滤器

1.5计算属性

1.6监听属性

1.模板语法

1.1插值

文本：{{msg}} 

<!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>
	<body>
		<!-- 指定vue管理内容区域，通常我们也把它叫做边界，这意味着我们接下来的改动全部在指定的div内，div外部不受影响 -->
		<div id="a">
			<h1>{{ts}}</h1>
			<h2>插值</h2>
			<ol>
				<li>文本</li>
				<span>
					{{msg}}
				</span>
			</ol>
		</div>
	</body>
	<script>
		//每一个Vue示例都是从new构造函数开始
		var vm = new Vue({
			el:'#a',		// DOM 元素，挂载视图模型(element,管理边界)
			data:{			//data在组件开发中的写法必须是一个函数
				ts:new Date().getTime(),
				msg:'hello vue',
			},
			methods:{		//定义方法，用于事件交互时使用的函数 
				
			}
		});
	</script>
</html>

使用v-html指令用于输出html代码     

<!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>
	<body>
		<!-- 指定vue管理内容区域，通常我们也把它叫做边界，这意味着我们接下来的改动全部在指定的div内，div外部不受影响 -->
		<div id="a">
			<h1>{{ts}}</h1>
			<h2>插值</h2>
			<ol>
				<li>html</li>
				<span v-html="a"></span>
			</ol>
		</div>
	</body>
	<script>
		//每一个Vue示例都是从new构造函数开始
		var vm = new Vue({
			el:'#a',		// DOM 元素，挂载视图模型(element,管理边界)
			data:{			//data在组件开发中的写法必须是一个函数
				ts:new Date().getTime(),
				a:'<input type="text" value="123" />'
			},
			methods:{		//定义方法，用于事件交互时使用的函数 
				
			}
		});
	</script>
</html>

HTML属性中的值应使用v-bind指令

<!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: lawngreen;
		}
	</style>
	<body>
		<!-- 指定vue管理内容区域，通常我们也把它叫做边界，这意味着我们接下来的改动全部在指定的div内，div外部不受影响 -->
		<div id="a">
			<h1>{{ts}}</h1>
			<h2>插值</h2>
			<ol>
				<li>v-bind绑值</li>
				<!-- 
				 v-model:数据双向绑定
				 v-bind:绑定标签属性值
				 {{}}:插值:针对标签中文本值进行插入操作
				 -->
				<span v-bind:class="cls">
					大帅比
				</span>
			</ol>
		</div>
	</body>
	<script>
		//每一个Vue示例都是从new构造函数开始
		var vm = new Vue({
			el:'#a',		// DOM 元素，挂载视图模型(element,管理边界)
			data:{			//data在组件开发中的写法必须是一个函数
				ts:new Date().getTime(),
				cls:'cl',
			},
			methods:{		//定义方法，用于事件交互时使用的函数 
				
			}
		});
	</script>
</html>

表达式：Vue提供了完全的JavaScript表达式支持

<!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>
	<body>
		<!-- 指定vue管理内容区域，通常我们也把它叫做边界，这意味着我们接下来的改动全部在指定的div内，div外部不受影响 -->
		<div id="a">
			<h1>{{ts}}</h1>
			<h2>插值</h2>
			<ol>
				<li>表达式</li>
				<span>
					{{msg.substr(0,6).toUpperCase()}}<br>
					{{ number + 1 }}<br>
					{{ ok ? 'YES' : 'NO' }}<br>
					<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
				</span>
			</ol>
		</div>
	</body>
	<script>
		//每一个Vue示例都是从new构造函数开始
		var vm = new Vue({
			el:'#a',		// DOM 元素，挂载视图模型(element,管理边界)
			data:{			//data在组件开发中的写法必须是一个函数
				ts:new Date().getTime(),
				msg:'hello vue',
				number:21,
				ok:true,
				id:231
			},
			methods:{		//定义方法，用于事件交互时使用的函数 
				
			}
		});
	</script>
</html>

1.2 指令

v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素

他们只能是兄弟元素

 v-else-if上一个兄弟元素必须是v-if

v-else上一个兄弟元素必须是v-if或者是v-else-if

<!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>
	<body>
		<!-- 定义管理边界 -->
		<div id="a">
			<h1>{{ts}}</h1>
			<h2>指令</h2>
			<ol>
				<li>v-if/v-else-is/v-else</li>
				<span v-if="sex=='boy'">
					他是个爷们
				</span>
				<span v-else-if="sex=='girl'">
					他是个娘们
				</span>
				<span v-else>
					他是个人妖
				</span>
			</ol>
		</div>
	</body>
	<script>
		//每一个Vue实例都是从new构造函数开始
		var vm = new Vue({
			el:'#a',
			data:{
				ts:new Date().getTime(),
				sex:'gay'
			},
			methods:{
				
			}
		});
	</script>
</html>

v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

下面我们来看一个v-show和v-model的综合案例

<!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>
	<body>
		<!-- 定义管理边界 -->
		<div id="a">
			<h1>{{ts}}</h1>
			<h2>指令</h2>
			<ol>
				<li>v-show和v-model</li>
				<input type="checkbox" v-model="flag" />已阅读
				<div v-show="flag">
					出来了
				</div>
			</ol>
		</div>
	</body>
	<script>
		//每一个Vue实例都是从new构造函数开始
		var vm = new Vue({
			el:'#a',
			data:{
				ts:new Date().getTime(),
				flag:false
			},
			methods:{
				
			}
		});
	</script>
</html>

v-for：类似JS的遍历

遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

<!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>
	<body>
		<!-- 定义管理边界 -->
		<div id="a">
			<h1>{{ts}}</h1>
			<h2>指令</h2>
			<ol>
				<li>v-for/v-model/v-bind/{{}}</li>
				<!-- <div v-for="(item,i) in items">    <!-- i表示下标-->
					i={{i}},id={{item.id}},name={{item.name}}
				</div> -->
				<!-- 下拉框 -->
				<!-- <div>
					<select>
						<option value="">---请选择---</option>
						<option v-for="item in items" v-bind:value="item.id">
							{{item.name}}
						</option>
					</select>
				</div> -->
				<!-- 复选框 -->
				<span v-for="item in items">
					<input type="checkbox" v-bind:value="item.id" v-model="rs"/>
					{{item.name}}
				</span><br>
				<!-- 判断是否选中，如果没有选中就隐藏 -->
				<span v-if="rs.length!=0">
					<!-- 输出被选中的对象的ID -->
					{{rs}}
				</span>
			</ol>
		</div>
	</body>
	<script>
		//每一个Vue实例都是从new构造函数开始
		var vm = new Vue({
			el:'#a',
			data:{
				ts:new Date().getTime(),
				items:[
					{id:1,name:'市场部'},
					{id:2,name:'研发部'},
					{id:3,name:'人事部'}
				],
				rs:[]
			},
			methods:{
				
			}
		});
	</script>
</html>

1.3参数、动态参数及简写

参数： 一些指令能够接收一个“参数”，在指令名称之后以冒号表示

例如：<a v-bind:href="url">...</a>

在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定

<a v-on:click="doSomething">...</a>

在这里click参数是监听的事件名。

动态参数：

从vue2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数

<a v-bind:[attrname]="url"> ... </a>

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数

<a v-on:[evname]="doSomething"> ... </a>

简写：

Vue为v-bind和v-on这两个最常用的指令，提供了特定简写

<a v-bind:href="url">...</a>

<a :href="url">...</a>

<a v-on:click="doSomething">...</a>

<a @click="doSomething">...</a> 

下面我们来看一个综合案例

<!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>
	<body>
		<!-- 定义管理边界 -->
		<div id="a">
			<h1>{{ts}}</h1>
			<h2>指令</h2>
			<ol>
				<li>参数、动态参数及简写</li>
				<a v-bind:href="url">百度</a><br>
				<a v-on:click="doClick">有种点我</a><br>
				<!-- 简写 -->
				<!-- 
				 v-bind 简写变为 :  例如:v-bind:href -> :href
				 v-on 简写变为 @    例如:v-on:click -> @click
				 -->
				<a :[attrname]="url">百度</a><br>
				<a @[eventname]="doClick">有种点我</a>
		</div>
	</body>
	<script>
		//每一个Vue实例都是从new构造函数开始
		var vm = new Vue({
			el:'#a',
			data:{
				ts:new Date().getTime(),
				url:'https://www.baidu.com',
				attrname:'href',
				eventname:'dblclick'
			},
			methods:{
				doClick(){
					alert(111);
				}
			}
		});
	</script>
</html>

1.4过滤器

全局过滤器：

Vue.filter('filterName', function (value) {

// value 表示要过滤的内容

});

局部过滤器：

new Vue({

filters:{'filterName':function(value){}}

});

过滤器函数接受表达式的值作为第一个参数 

过滤器可以串联

<!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>
		<script src="js/date.js"></script>
	</head>
	<body>
		<!-- 定义管理边界 -->
		<div id="a">
			<h1>{{ts}}</h1>
			<h2>过滤器(全局和局部)</h2>
			<div>
				<!-- 局部过滤器 -->
				{{title|strFilter}}<br>
				<!-- 全局过滤器 -->
				{{dt|dataFilter}}
				{{dt|dataFilter|strFilter}}
			</div>
		</div>
	</body>
	<script>
		//全局过滤器
		Vue.filter('dataFilter',function(v){
			return fmtDate(v,'yyyy年MM月dd日')
		});
		//每一个Vue实例都是从new构造函数开始
		var vm = new Vue({
			el:'#a',
			data:{
				ts:new Date().getTime(),
				title:'hello vue',
				dt:new Date()
			},
			methods:{
				
			},
			filters:{
				//局部过滤器
				strFilter:function(v){
					return v.substr(0,5).toUpperCase();
				}
			}
		});
	</script>
</html>

1.5计算属性

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

我们来看一个计算总分的案例

<!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>
	<body>
		<!-- 定义管理边界 -->
		<div id="a">
			<h1>{{ts}}</h1>
			<h2>计算属性</h2>
			<div v-for="s in score">
				id={{s.id}},name={{s.name}},sc={{s.sc}}
			</div>
			<span>总分:{{sum}}</span>
		</div>
	</body>
	<script>
		//每一个Vue实例都是从new构造函数开始
		var vm = new Vue({
			el:'#a',
			data:{
				ts:new Date().getTime(),
				score:[
					{id:1,name:'语文',sc:110},
					{id:2,name:'数学',sc:120},
					{id:3,name:'英语',sc:130}
				],
			},
			methods:{
				
			},
			computed:{
				sum:function(){
					let s = 0;
					for(let sc of this.score){
						s+=sc.sc;
					}
					return s;
				}
			}
		});
	</script>
</html>

1.6监听属性

监听属性 watch，我们可以通过 watch 来响应数据的变化

xxx：代表被监听的属性，必须存在

watch:{
      xxx:function(v){

      }
}

来看一个案例

<!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>
	<body>
		<!-- 定义管理边界 -->
		<div id="a">
			<h1>{{ts}}</h1>
			<h2>监听属性</h2>
			kb:<input type="text" v-model="kb" /><br>
			mb:<input type="text" v-model="mb" /><br>
	</body>
	<script>
		//每一个Vue实例都是从new构造函数开始
		var vm = new Vue({
			el:'#a',
			data:{
				ts:new Date().getTime(),
				kb:1024,
				mb:1
			},
			methods:{
				
			},
			watch:{
				//监听属性必须保证属性是存在的
				kb:function(v){
					this.mb=v/1024;
				},
				mb:function(v){
					this.kb=v*1024;
				}
			}
		});
	</script>
</html>
hdsfadsfdsaf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-default-value-Vue.js 2.x指令为可编辑元素设置默认值，而不会影响模型状态-Vue.js开发
05-27
vue-default-value一个Vue.js指令，用于为可编辑元素设置默认值，而不会影响模型状态。 通过NPM安装安装vue-default-value A Vue.js指令可为可编辑元素设置默认值，而不会影响模型状态。 通过NPM安装安装软件包$ npm install vue-default-value并在代码中要求它var Vue = require（'vue'）; var VueDefaultValue = require（'vue-default-value'）; Vue.use（VueDefaultValue）; 通过Bower安装软件包$ bower install vue-default-value添加脚本页面
Vue 基础语法 实例演示 示例代码
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例...
Ant Design vue使用组件select设置default-value
weixin_46181037的博客
04-13 8222
Ant Design vue使用组件select设置default-value一、效果图二、代码1、将default-value设置为固定的值2、动态将default-value设置为数据的第一个总结 一、效果图 二、代码 设置 key 和 default-value 的值相同 1、将default-value设置为固定的值 <!-- html代码 --> <a-select :key="DefaultValue" :default-value="DefaultValue" style
vue ant design中关于给select设置初始默认值的问题（initialValue无效、用defaultValue则报`defaultValue` is invalid错误）（已解决）
热门推荐
qiqiliuwu的博客
09-18 2万+
问题：当我们在用vue ant design给select设置默认值时，如果采用v-decorator的方式去注册控件，且要对表单内容进行校验，那么这个时候无论是如下边错误1一样使用defaultValue=“2”这样来设置默认值，还是如同错误2一样使用initialValue: 2来进行设置，还是如同错误3一样使用:value="2"这样设置了值却无法注册typeId，都会设置无效或者报错等等，...
ant design vue中设置defaultValue报错
征途人生&梦
10-15 6959
在做raido组件时，需要一个默认项，从官网拷贝过来，使用defaultValue没问题。 <a-radio-group v-model="value" @change="onChange"> <a-radio-button value="a"> Hangzhou </a-radio-button> <a-radio-button value="b"> Shanghai
vxe-table v4 列表自定义列配置（Promise缓存,拖动排序、置顶）
Zihuatanjo
10-19 7710
​ useCommonHooks==> 请求配置hooks(请求自定义列配置只会在此处触发一次,其余调用皆走缓存，除非主动清除缓存)(视频可见:getOne 即请求自定义配置接口只会触发一次，除非主动清楚缓存)​ queryHeaderOptions==> 递归请求表头下拉options。​ gridQueryRes==> 页面数据请求完毕。​ gridLoadColumns==> 加载列。​ gridMount==> 表格组件渲染钩子。​ routerDone==> 路由结束。
一、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基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
从Vue基础语法入手
08-10
本教程将从Vue的基础语法开始，逐步深入，帮助你理解这个强大的工具在实际项目中的应用。 首先，我们从Vue的基本结构说起。一个基本的Vue实例包含`<template>`、`<script>`和`<style>`三个部分。`<template>`用于...
前端框架Vue基础语法笔记
01-20
Vue基础语法笔记 本笔记主要涵盖了Vue基础语法的知识点，包括创建Vue实例、数据绑定、事件绑定、循环和数据双向绑定、组件化等方面的内容。 一、创建Vue实例 在Vue中，创建一个实例需要使用Vue.createApp()方法，...
vue基础语法——表单绑定语法、计算属性、侦听器、过滤器、vue生命周期
12-09
对vue基础语法一些简单的总结和案例，适合新手小白哦~
vue语法.rar
08-16
二、Vue的数据驱动---mvvm模式的介绍 Vue是一款轻量级的渐进式前端框架，主要功能： 1、模板渲染/数据同步 2、组件化、模块化 3、扩展功能：路由 等等 Vue资源： 中文官网：https://cn.vuejs.org/ Github源码...
(某马培训)Vue-基础语法.ppt
最新发布
07-23
Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础...
Vue 基于vite构建vue3项目 以及基础语法演示
07-17
Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础语法演示Vue 基于vite构建vue3项目 以及基础...
vue响应式源码解析（一）
weixin_43823603的博客
09-09 646
vue响应式源码解析（一） vue.js逐渐热门，在前端框架领域崭露头角这几年，也逐渐成为了前端面试的必考知识点，下面我会通过一系列源码解析的文章来帮助大家梳理这一部分的内容，如有对我的观点持有异议，请在评论区留言，友好交流。 vue的响应式是怎么实现的？ 响应式，即vue的数据驱动视图，数据层面发生变化，导致UI进行重新渲染。数据响应式这部分涉及到的知识点有关依赖收集、依赖触发这两部分，核心思想就是将数据变换成observe的getter和setter形式。 依赖收集 我们都知道在JavaScript中，
defaultValue与value的区别
菜鸟史
12-17 9284
Hello world....This is a text area
Vue基础语法详解及项目构建规范介绍
Vue是一种流行的JavaScript框架，它具有简单易用的语法和强大的功能，使得构建单页面应用程序变得更加容易。在Vue的项目中，有一些重要的概念需要理解和掌握。 首先，Vue中使用的一些重要概念包括单页面应用程序、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值