Vue基本语法

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

插值（文本、html、属性、表达式）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript"></script>
	<style>
		.cl{
			color: red;
		}
	</style>
	<body>
		<div id="app">
			{{ts}}
			<h1>插值</h1>
			<ol>
				<li>文本</li>
				<span>{{title}}</span>
				<li>html</li>
				<span v-html="html"></span>
				<li>v-bind绑值</li>
				<!-- 1.v-model:数据双向绑定
				 2.v-bind:绑定标签属性值 例如：v-bind:class/v-bind:id
				 3.插值：{{msg}} 针对标签中文本值进行插入操作
				 -->
				<span v-bind:class="cls">斯蒂芬库里</span>
				<li>表达式</li>
				{{title.substr(0,6).toUpperCase()}}<br />
				{{ number + 1 }}<br />
				{{ ok ? 'YES' : 'NO' }}
				 <li v-bind:id="'list-' + number">我的Id是js动态生成的</li>
			</ol>
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:function(){
					return{
						ts:new Date().getTime(),
						title:'hello vue!!!',
						html:'<input type="text" value="2"/>',
						cls:'123',
						number:3,
						ok:false
					}
				},
				methods:{
					
				},
				
				
			});
			
		</script>
	</body>
</html>

指令

指的是带有“v-”前缀的特殊属性

   v-if|v-else|v-else-if：

            根据其后表达式的bool值进行判断是否渲染该元素
            他们只能是兄弟元素
            v-else-if上一个兄弟元素必须是v-if
            v-else上一个兄弟元素必须是v-if或者是v-else-if

  v-show：

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

v-for：

类似JS的遍历
                 遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
                 遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

          v-bind
          v-on
          v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值   
            v-for/v-model一起绑定[多选]复选框和单选框 

 参数

   一些指令能够接收一个“参数”，在指令名称之后以冒号表示，例如：
          <a v-bind:href="url">...</a>
          在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定
          <a v-on:click="doSomething">...</a>
          在这里click参数是监听的事件名。

动态参数

   从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数
          <a v-bind:[attrname]="url"> ... </a>

          同样地，你可以使用动态参数为一个动态的事件名绑定处理函数
          <a v-on:[evname]="doSomething"> ... </a>

          注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

 简写

   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>
	</head>
	<script src="js/vue.js" type="text/javascript"></script>
	<style>
		.cl{
			color: red;
		}
	</style>
	<body>
		<div id="app">
			{{ts}}
			<h1>文本</h1>
			<ol>
				<li>v-if/v-else-if/v-else</li>
				<span v-if="sex=='boy'">我是男的</span>
				<span v-else-if="sex=='girl'">我是女的</span>
				<span v-else="sex=='gey'">我啥也不是</span>
				<li>v-show和v-model</li>
				<input type="checkbox" v-model='flag'/>我已阅读该协议
				<div v-show='flag'>
					盘州单，29岁
				</div>
				<li> v-for</li>
				
				<!-- <select>
					<option value="">请选择</option>
					<option v-for='b in bm' v-bind:value="b.id">{{b.name}}</option>
					</span>
				</select> -->
				<!-- <span v-for='b in bm'>
				<input type="checkbox"  v-bind:value="b.id" v-model="xz">{{b.name}}
				</span><br>
				<span v-if="xz.length!=0">
				{{xz}}
				</span> -->
				<span v-for="(b,i) in bm">
					i={{i}},b={{b.id}},name={{b.name}}<br />
				</span>
				<li>参数、动态参数及简写</li>
				<!-- 参数 -->
				<a href="https:www.baidu.com">百度</a>
				 <a v-bind:href="url">baidu</a>
				 <a v-on:click="doClick()">点我</a>
				 <!-- 动态参数-->
				 <a v-bind:[attrname]="url">baidu</a>
				 <a v-on:[evname]="doClick">点我</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> 
					-->
					<a :href="url">百度</a>
					<a @click="doClick">点我</a>
				 
			</ol>
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:function(){
					return{
						ts:new Date().getTime(),
						sex:'y',
						flag:false,
						bm:[
							{id:1,name:'研发部'},
							{id:2,name:'开发部'},
							{id:3,name:'市场部'},
							{id:4,name:'客服部'}
						],
						xz:[],
						url:'https:www.baidu.com',
						attrname:'href',
						evname:'dblclick'
					}
				},
				methods:{
					doClick(){
						alert(123);
					}
				},
				
				
			});
			
		</script>
	</body>
</html>

过滤器

全局过滤器

局部过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript"></script>
	<script src="js/date.js" type="text/javascript"></script>
	<style>
		.cl{
			color: red;
		}
	</style>
	<body>
		<div id="app">
			{{ts}}
			<h1>过滤器（全局和局部）</h1>
			<!-- 局部过滤器 -->
			{{title|strFilter}}
			 <!-- 在 v-bind 指令中 -->
			<!-- 全局过滤器 -->
			{{dt|dateFilter|strFilter}}
		</div>
		<script>
			//全局过滤器
			Vue.filter('dateFilter',function(v){
				return fmtDate(v,'yyyy年MM月dd日');
			});
			var vm=new Vue({
				el:'#app',
				data:function(){
					return{
						ts:new Date().getTime(),
						title:'hello vue???',
						dt:new Date()
					}
				},
				methods:{
					
				},
				filters:{
					/* 局部过滤器 */
					'strFilter':function(v){
						return v.substr(0,6).toUpperCase();
					}
				}
				
				
			});
			
		</script>
	</body>
</html>

 计算属性（computed）

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript"></script>
	<script src="js/date.js" type="text/javascript"></script>
	<style>
		.cl{
			color: red;
		}
	</style>
	<body>
		<div id="app">
			{{ts}}
			<h1>计算属性</h1>
			<div v-for="s in score">
				id={{s.id}},name={{s.name}},score={{s.score}}<br />
			</div>	
			<span>总分：{{sum}}</span>
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:function(){
					return{
						ts:new Date().getTime(),
						score:[
							{id:1,name:"语文",score:100},
							{id:2,name:"数学",score:120},
							{id:3,name:"英语",score:60},
							{id:4,name:"理综",score:223}
						]
					}
				},
				methods:{
					
				},
				computed:{
					sum:function(){
						let s=0;
						for(let sc of this.score){
							s+=sc.score;
						}
						return s;
					}
				}
				
				
			});
			
		</script>
	</body>
</html>

监听属性（watch）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript"></script>
	<script src="js/date.js" type="text/javascript"></script>
	<style>
		.cl{
			color: red;
		}
	</style>
	<body>
		<div id="app">
			{{ts}}
			<h1> 监听属性</h1>
			<input type="text" v-model="kb" /><br />
			<input type="text" v-model="mb" />
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:function(){
					return{
						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>
	</body>
</html>

Pioneer..
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一、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...
vue3插值的四种类型
滴水石穿
06-07 506
vue3插值的四种类型
6.Vue中插入值：文本{{}}，原生HTMLv-html，属性v-bind，JavaScript表达式
cxrlover的博客
04-29 2093
文章目录插入值文本 {{}}原生HTML v-html插入属性 v-bind 插入值 在最下方附上完整代码吧，节省篇幅，过程中的介绍都截取部分代码进行说明。 文本 {{}} 插入文本数据使用{{ 数据名称 }} 的方式。这种方式之前也是经常使用到的，这里不再过多介绍了 前文：3. Vue基础指令:{{}}；v-bind；v-on；v-model；v-if；v-for。 <span>Message: {{ msg }}</span> 原生HTML v-html 使用{{}}的方式会将
Vue.js插值
laok_的博客
02-06 660
vue.js在插入数值的时候有三种方式1、插入纯文本插入纯文本是最简单的方式，使用双大括号就能插入想要的值。<span>{{ msg }}</span> mustache也可以在属性中使用<div id="item-{{ id }}"></div> 就能显示所需要显示的文本信息了。但是有时候，我们想要插入的html文本，这时候要怎么办呢？在插入html的时候有两种方式，一种是用三个大括号的形式，这种
vue核心语法(超详细)
小罗的博客
03-09 6808
全称是Vue.js或者Vuejs。 基于标准HTML，CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型。
vue基本语法
qq_62087717的博客
04-16 3741
1、插值表达式 {{ 、、、 }} 大括号中可以写变量名，对象.属性等，还可以写入js语句 2.变量显示在界面上 v-text： v-html： 两者的区别v-text把内容当纯文本处理，v-html遇到html的标签会当html代码处理 如： v-text: v-html: 3.v-moldel实现双向动态绑定 data:{ username: “” ​ } 当username改变时，页面上的username也会动态改变 页面上的username改变时，data中的us
vue基础语法练习源码
12-09
首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的核心，它通过`new Vue()`创建。在HTML文件中，我们通常使用`<script>`标签引入Vue库，并创建实例，将DOM元素与Vue实例绑定。例如： ```html ...
Vue 基础语法 实例演示 示例代码
最新发布
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例...
从Vue基础语法入手
08-10
本教程将从Vue的基础语法开始，逐步深入，帮助你理解这个强大的工具在实际项目中的应用。 首先，我们从Vue的基本结构说起。一个基本的Vue实例包含`<template>`、`<script>`和`<style>`三个部分。`<template>`用于...
vue基本语法综合案例
08-09
vue基本语法综合案例
Vue基础语法知识（自用，完整版）
m0_62068678的博客
09-12 9402
vue基础语法、尚硅谷、欢迎交流
Vue.js的插值操作概述
qq_45026243的博客
10-09 450
插值 1、文本 ​ 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值： <div id="app1"> <span>Message: {{ msg }}</span><!-- 显示在页面上：Message：这是一个Vue程序 --> </div> <script type="text/javascript"> new Vue({ el:'#app1...
vue.js(5)学习 值插入（数据绑定）
二等碗
04-24 211
标题vue.js(5)学习 值插入（数据绑定） 文章目录标题vue.js(5)学习 值插入（数据绑定）1、文本绑定（值插入）2、原始 HTML3、Attribute4、使用 JavaScript 表达式 1、文本绑定（值插入） 代码如下： <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalab
Vue 常用指令 内容绑定/事件绑定 v-text、v-html、v-on
小楼一夜听春雨，深巷明朝卖杏花
06-16 3004
但是使用v-html的时候那么html的各种属性都能够渲染出来。最终将v-text渲染为一个html的文本。在开发过程当中使用vue的语法，但是在实际最终会将vue的语法转化渲染为html页面。可以看到做文本的时候可以使用v-text，同时也可以看到在vue框架里面可以在HTML标签当中使用vue属性。在前端开发中，我们经常监听用户发生的事件，例如点击、拖拽、键盘事件等。在整个vue的编写过程当中，只要带v-的，那么都是常用的vue的指令。显示HTML文本的，某些情况下，从服务端请求的数据本身就是一个。
Vue插值：深入理解与应用
lqx1013081837的博客
03-17 520
过滤器插值过滤器是Vue中的另一个重要概念，它们允许我们在插值表达式中进行数据转换。例如， <div v-bind:id="itemId"></div> 会将 itemId 的值作为 id 属性绑定到 div 元素上。在Vue.js中，插值是一种强大的功能，它允许我们将数据动态地插入到模板中。插值是Vue.js中的一个核心概念，它允许我们在模板中直接插入JavaScript表达式，并根据数据变化实时更新视图。文本插值是最常用的插值方式，它通过双大括号 {{ }} 来包装表达式。
Vue语法，看这一篇就够了
热门推荐
不停
02-11 1万+
文章目录一 初识Vue二 Vue模板语法1. Mustache语法(双大括号)2. v-once（静态数据）3. v-html（添加标签）4. v-text（添加文本）5. v-pre（禁止解析）6. v-cloak（遮挡）7. v-pre（禁止解析）8. v-bind（:）（动态绑定属性）9. v-on（@）（监听事件）10. v-if v-else-if v-else11. v-show12....
vue基础语法
日常学习总结
07-04 1046
内容渲染指令，属性绑定指令，事件绑定，事件修饰符，按键修饰符，双向绑定，列表渲染，v-for语法
vue学习之插值的五种方式
weixin_42565757的博客
10-26 1035
插值 文本 数据绑定最常见的方式就是使用{{...}}进行文本插值： <body> <div id = "app"> {{name}}{{age}} </div> <script> var app = new Vue({ el:'#app', data:{ name:'lisi',
vue基本语法思维导图
08-26
根据引用和引用提供的信息，可以将Vue的基本语法思维导图如下： 1. Vue的基础指令 - 文本插值：使用双大括号{{}}将Vue实例中的数据显示在HTML中。 - 条件渲染：使用v-if和v-else指令根据条件来显示或隐藏元素。 - 循环列表渲染：使用v-for指令循环渲染数组或对象的数据。 2. 路由 - 路由首位：使用Vue Router来进行前端路由管理。 - 路由导航：使用router-link组件进行页面跳转。 - 路由传参：通过路由参数或query参数传递数据。 - 动态路由：根据路由参数的不同来动态加载组件。 3. 生命周期：Vue实例在创建、更新和销毁时触发不同的生命周期钩子函数。 4. Axios语法：使用Axios库进行HTTP请求。 5. 本地存储：使用localStorage或sessionStorage在浏览器中进行数据的本地存储。 根据引用提供的信息，还可以补充一些内容： 6. 计算属性：通过computed属性来计算和返回Vue实例中的响应式数据。 7. Watch监听：通过watch属性来监听Vue实例中数据的变化，并执行相应的操作。 8. class和style：使用v-bind指令绑定class和style属性，实现动态样式的应用。 9. 事件：使用v-on指令绑定事件处理函数，响应用户的交互操作。 10. 表单：使用v-model指令实现表单与数据的双向绑定，包括输入框、多行文本、复选框、单选框和下拉列表等。 请注意，以上只是Vue基本语法的思维导图，具体的语法细节和用法请参考官方文档或相关教程。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue（框架 思维导图）.xmind](https://download.csdn.net/download/weixin_46174785/12392736)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue基本使用（含思维导图）](https://blog.csdn.net/weixin_38644397/article/details/117775995)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值