vue基本语法

最新推荐文章于 2024-08-16 08:39:42 发布
最新推荐文章于 2024-08-16 08:39:42 发布
阅读量169 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43934140/article/details/98056137
版权

vue基本语法

插值

插值 
	<div id="app">
		<ul>
			<li>
				<h3>文本插值</h3>
				{{msg}}
			</li>
			<li>
				<h3>html指令</h3>
				<div v-html="vuehtml"></div>
			</li>
			<li>
				<h3>属性</h3>
				<!-- 
					v-bind与v-model的区别
					v-model：是做数据双向邦定的指令
					v-bind知识将对应的值给填写到指定属性中
					列如：v-bind：value4简单来说就是将值填写到value=“”
					然后value的值发生改变，并不会影响vue实例中变量值
				 -->
				<input type="text" :value="msg" />
				<input type="text" v-model="msg" />
			</li>
			<li>
				<h3>表达式</h3>
				{{str.substr(0,6).toUpperCase()}}
				{{ number + 1 }}
				{{ ok ? 'YES' : 'NO' }}
			</li>
			<li :id="'list-' + id">我的Id是js动态生成的</li>
		</ul>

	</div>
</body>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data() {
			return {
				msg: 'aa',
				vuehtml: '<span style="color:red">vue对html代码解析</span>',
				str: 'http://www.baidu.com',
				number:6,
				ok:true,
				id:5,
				
			}
		}
	})
</script>

在这里插入图片描述

指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>

		<div id="app">
			<ul>
				<li>
					<h3>条件指令（if elseif else）</h3>
					{{msg}}
					<input type="text" v-model="score" />
					<div v-if="score>90">A</div>
					<div v-else-if="score>80">B</div>
					<div v-else-if="score>70">c</div>
					<div v-else-if="score>60">d</div>
					<div v-else="">e</div>
				</li>
				<li>
					<h3>v-show</h3>
					<input type="text" v-model="show" />
					<div v-show="show">出来了</div>
				</li>
				<li>
					<h3>v-for</h3>
					<div v-for="item,index in arr">
						{{item}},{{index}}
					</div>
					<div v-for="item,index in objArr">
						{{item.name}},{{index}}
					</div>
				</li>
				<li>
					<h3>动态参数</h3>
					<input type="text" v-model="evname" />
					<!-- dblclick双击事件 -->
					<button v-on:[evname]="xxx">ok</button>
				</li>
			</ul>

		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					msg: 'aa',
					score: 88,
					show: null,
					arr: [1, 4, 7, 9],
					objArr: [{
						id: 's1',
						name: '狗蛋'
					}, {
						id: 's2',
						name: 'GD'
					}, {
						id: 's3',
						id: 'DG'
					}],
					evname:'click'
				};
			},
			methods:{
				xxx(){
					console.log('xxx方法执行');
				}
			}
		})
	</script>
</html>

在这里插入图片描述

过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>

		<div id="app">
			<ul>
				<li>
					<h3>局部过滤器</h3>
					{{msg}}
					{{msg | a}}
				</li>
				<li>
					<h3>局部过滤器的可串联</h3>
					{{msg}}
					{{msg | a | b}}
					{{msg | b | a}}
				</li>
				<li>
					<h3>全局过滤器</h3>
					{{msg}}
					{{msg | a | b}}
					{{msg | b | a}}
				</li>

				<li>
					<h3>局部过滤器的可串联</h3>
					{{msg}}
					{{msg | c}}
				</li>
			</ul>

		</div>
	</body>
	<script type="text/javascript">
		Vue.filter('c', function(v) {
			return v.substring(4);
		})
		new Vue({
			el: '#app',
			data() {
				return {
					msg: 'http://www.baidu.com',
				};
			},
			filters: {
				a(v) {
					console.log('=========')
					console.log(v)
					return v.substring(3)

				},
				b(v) {
					return v.substring(4, 7)
				}
			}
		})
	</script>
</html>

在这里插入图片描述

计算属性以及监听属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>

		<div id="app">
			<ul>
				<li>
					<h3>计算属性</h3>
					数量：<input type="text" v-model="num" />
					单价：<input type="text" v-model="price" />
					计算总价：{{total}}
					<h3>计算监听属性</h3>
					km：<input type="text" v-model="km" />
					m:<input type="text" v-model="m" />
				</li>

			</ul>

		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					num: 1,
					price: 16,
					km: 1,
					m: 1000
				};
			},
			computed: {
				//在计算属性定义的时候,是可以获取到Vue实例中定义任何变量
				total() {
					return parseInt(this.num) * parseInt(this.price)
				}
			},
			watch: {
				km(v) {
					this.m = v * 1000;
				},
				m(v) {
					this.km = v / 1000;
				}
			}
		})
	</script>
</html>

在这里插入图片描述

E往如前
关注
专栏目录
vue基础语法
weixin_66277385的博客
04-27 792
模板语法 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number...
Vue的基础语法
m0_65849649的博客
03-21 314
1.什么是vue.js 1、Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 2、Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！ 二、MVC与MVVM的区别 1、MVC是后端的分层开发概念; 2、MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、...
Vue.js 基础语法详解：带你领略渐进式 JavaScript 框架的魅力
最新发布
weixin_63490470的博客
08-16 1203
Vue.js 是一款用于构建用户界面的渐进式 JavaScript 框架。它易学易用，性能出色，并且拥有活跃的社区支持，成为了众多开发者构建 Web 应用的首选框架。自定义指令允许我们扩展 HTML 元素的功能，实现更复杂的交互效果。el.focus();});: 定义一个名为focus的自定义指令。: 指令插入到 DOM 中时执行的回调函数。el.focus(): 将焦点设置到input元素上。
Vue基本语法
weder的博客
01-15 467
本文Vue模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <tit
vue —— 基本语法
我的博客
11-08 911
vue基本语法 1. 插入到html中的{{}}是动态变化的，随着括号内的变量的变化而变化 2. v-bind和v-model v-bind和v-model都是绑定属性的。v-model只作用于表单元素的属性绑定，且它是双向绑定的。即在页面上的直接操作也会改变变量。v-bind可以作用于所有属性，它是单向绑定的。在页面的直接操作不会改变变量。 v-bind可以简写为: 3. v-text和...
一、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 基础语法 实例演示 示例代码
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例...
vue基础语法练习源码
12-09
首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的核心，它通过`new Vue()`创建。在HTML文件中，我们通常使用`<script>`标签引入Vue库，并创建实例，将DOM元素与Vue实例绑定。例如： ```html ...
从Vue基础语法入手
08-10
本教程将从Vue的基础语法开始，逐步深入，帮助你理解这个强大的工具在实际项目中的应用。 首先，我们从Vue的基本结构说起。一个基本的Vue实例包含`<template>`、`<script>`和`<style>`三个部分。`<template>`用于...
Vue的基本语法
j20020227的博客
03-17 7054
1、Vue 基本语法 在标签中绑定 v-bind ：（要绑定的属性,也可以自定义声明的变量）="(要绑定的属性值)" 动态绑定数据。 如以下使用 注：这里的message是声明的变量 <span v-bind:message="message">{{message}}</span> <span v-bind:style="message" >{{message}}</span> <span v-bind:t.
Vue基础一文速通（基础语法篇）
qq_45799465的博客
03-17 3209
插值表达式 v-text v-html v-cloak v-once v-bind v-on 语法v-on的修饰符 v-on的事件对象event v-on的按键修饰符 ​v-model v-for v-if v-show 自定义指令 computed计算属性 watch监听属性 filter过滤器
VUE基本语法
交小新的博客
04-12 361
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>VUE入门案例</title> </head> <body> <!-- 入门案例步骤: 1.导入vue.js文件 html下部编辑 2.指定区域进行渲染 需要准备div vue.js代码 3.创建VUE.js对象 指定渲染区域
Vue基础语法
qq_52262541的博客
04-10 1130
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基本语法思维导图
08-26
请注意，以上只是Vue基本语法的思维导图，具体的语法细节和用法请参考官方文档或相关教程。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* [vue（框架 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值