Vue基础语法（上）

已于 2023-07-19 10:06:34 修改
阅读量67 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-07-18 22:41:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/theHider/article/details/131797975
版权

插值

文本

{{msg}}

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<body>
		<div id="app">
			{{msg}}
		</div>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						msg: 'hello,Vue!'
					}
					
				}
				
			});
		</script>
	</body>
</html>

HTML

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

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<body>
		<div id="app">
			<div>{{msg}}</div>
			<div v-html="htmlstr">{{htmlstr}}</div>
		</div>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						msg: 'hello,Vue!',
						htmlstr: '<strong>hello,Vue!</storng>'
					}
					
				}
				
			});
		</script>
	</body>
</html>

属性

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

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<body>
		<div id="app">
			<a v-bind:href="hrefstr">百度</a>
		</div>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						hrefstr: 'http://www.baidu.com'
					}
					
				}
				
			});
		</script>
	</body>
</html>

表达式

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<input :value="valuestr"/>
			<p>表达式</p>
			{{str.substring(0,4).toUpperCase()}}
			张三:{{number+1}}
			{{ok ? 'yes' : 'no'}}
			<span :id="'goods_id_'+id">xx</span>
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					valuestr:'2223',
					str:'Java是最牛的语言',
					number:59,
					ok:false,
					id:66
				};
			}
		})
	</script>
</html>

指令

定义

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

核心指令

(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

1）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>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>v-if/v-else-if/v-else</p>
			<input v-model="score"/>
			<span v-if="score > 90">优秀</span>
			<span v-else-if="score > 80">良好</span>
			<span v-else-if="score > 70">中等</span>
			<span v-else-if="score > 60">及格</span>
			<span v-else="">不及格</span>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data() {
					return {
						score: 90
					}
					
				}
			});
		</script>
	</body>
</html>

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

示例代码

<!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">
			<p>v-if/v-else-if/v-else</p>
			<input v-model="score"/>
			<span v-if="score > 90">优秀</span>
			<span v-else-if="score > 80">良好</span>
			<span v-else-if="score > 70">中等</span>																<span v-else-if="score > 60">及格</span>
			<span v-else="">不及格</span>
			<span v-if="score > 100">不存在</span>
			<p>v-show</p>
			<span v-show="score > 100">不存在</span>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data() {
					return {
						score: 90
					}
					
				}
			});
		</script>
	</body>
</html>

3）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>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-for="n in arr">
				{{n}} <br>
			</div>
			<div v-for="n in likes">
				{{n}} <br>
			</div>
			<div v-for="n in likes">
				{{n.id}} == {{n.name}} <br>
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data() {
					return {
						arr: ['篮球','足球','洗脚'],
						likes: [
							{id:1,name: '洗脚'},
							{id:2,name:'洗头'},
							{id:3,name:'推油'}
						]
					}
					
				}
			});
		</script>
	</body>
</html>

4） v-bind

5） v-on

示例代码

<!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">
			<p>v-on</p>
			<button type="button" v-on:click="do_spa">点我</button> <br>
			<button type="button" @click="do_spa">点我</button> <br>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data() {
					return {
						arr: ['篮球','足球','洗脚'],
						likes: [
							{id:1,name: '洗脚'},
							{id:2,name:'洗头'},
							{id:3,name:'推油'}
						]
					}
					
				},
				methods: {
					do_spa() {
						alert('叫了一个spa服务')
					}
				}
			});
		</script>
	</body>
</html>

6） v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

7） 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.filter('filterName', function (value) {
// value 表示要过滤的内容
});

局部过滤器

new Vue({
filters:{'filterName':function(value){}}
});

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

{{ name | capitalize }}

  <div v-bind:id="rawId | formatId"></div>

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

注2：过滤器可以串联

​ {{ message | filterA | filterB }}

注3：过滤器是JavaScript函数，因此可以接受参数：

​ {{ message | filterA(‘arg1’, arg2) }}

注4：js定义一个类

function Stu(){};

Stu.prototype.add(a,b){};//添加一个新的实例方法

Stu.update(a,b){};//添加一个新的类方法

案例：首字母大写/日期格式化

Vue.filter('format', function(v) {
    return fmtDate(v, 'yyyy-mm-dd hh:MM:ss')
})

var vm = new Vue({
    el: "#app",
    data: {
        name: 'xiaoli之JAVAXL',
        currentTime: new Date()
    },
    filters: {
        // 过滤器函数接受表达式的值作为第一个参数,这里的v指的是name
        upCase: function(v) {
            return v.substr(0, 1).toUpperCase() + v.substr(1);
        },
        lowCase: function(v) {
            return v.substr(0, v.length - 2) + v.substr(v.length - 2).toLowerCase();
        },
        upCasePlus: function(v, start, end) {
            return v.substring(0, start) + v.substring(start, end).toUpperCase() + v.substring(end);
        }
    }
});

// 这个写到vue实例后是不行的,双向数据绑定会出错,format函数会读取不到
// 		Vue.filter('format', function(v) {
// 			return fmtDate(v, 'yyyy-mm-dd HH:mm:ss')
// 		})

计算属性与监听属性

计算属性

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

computed:{}

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<body>
		<div id="app">
			<p>计算属性</p>
			<table>
				<tr>
					<td>单价</td>
					<td>数量</td>
					<td>小计</td>
				</tr>
				<tr>
					<td>
						<input v-model="danjia"/>
					</td>
					<td>
						<input v-model="n"/>
					</td>
					<td>
						{{xiaoji}}
					</td>
				</tr>
			</table>
		</div>
		<script>
			new Vue({
				el: '#app',
				data() {
					return { 
						danjia: 199,
						n: 1
					}
				},
				computed: {
					xiaoji:function() {
						return this.danjia * this.n;
					}	
				}
				
			});
		</script>
	</body>
</html>

监听属性

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

watch:{}

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<body>
		<div id="app">
			<p>监听属性</p>
			m:<input v-model="m"/> </br>
			km:<input v-model="km"/> </br>
		</div>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						m: 1000,
						km: 1
					}
				},
				watch: {
					m:function(v) {
						this.km = parseInt(v)/1000; 
					},
					km:function(v) {
						this.m = parseInt(v)*1000
					}
				}
				
			});
		</script>
	</body>
</html>

计算属性和监听属性的区别

1）computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

2）computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，

​ 举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

3）watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象

4）监听属性缓存机制比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!

var vm = new Vue({
    el: "#app",
    data: {
        num: 1,
        price: 60,
        results: [{
            name: '语文',
            score: 70
        }, {
            name: '数学',
            score: 80
        }, {
            name: '英语',
            score: 90
        }],
        km: 2,
        m: 2000
    },
    // 计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
    computed: {
        sum: function() {
            return this.num * this.price
        },
        total: function() {
            // debugger;
            let num = 0;
            for (let index = 0; index < this.results.length; index++) {
                num += parseInt(this.results[index].score);
            }
            return num;
        }
    },
    watch: {
        km: function(v2) {
            this.m = parseInt(v2) * 1000;
        },
        m: function(v2) {
            this.km = parseInt(v2) / 1000;
        }
    }

});
theHider
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue基础语法
qq_52262541的博客
04-10 1123
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 1291
一、Vue的概念 1.什么是vue.js 1、Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 2、Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！ 二、MVC与MVVM的区别 1、MVC 是后端的分层开发概念; 2、MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为
VUE 超级详细教程
热门推荐
weixin_42371679的博客
06-06 5万+
一、安装 二、基础练习 1）引入vue.js 解释： 注意：被挂载的div要放在vue的上面，否则vue管不到 2）v-for 3）做一个计数器(v-on:click) 方法一：直接在标签里实现 <div id="app"> <h2>当前计数: {{count}}</h2> <button v-on:click="count++">+</button> <button v-on:cl
vue基础语法
日常学习总结
07-04 1022
内容渲染指令，属性绑定指令，事件绑定，事件修饰符，按键修饰符，双向绑定，列表渲染，v-for语法
Vue3 基础语法
code袁的博客
05-09 1539
项目文件下运行 npm init vue@latest。1.在父组件在vue3中引入子组件，直接使用，不需要注册。ref执行的响应式数据，要用.value接受,2.在子组件通过defineProps接受数据。provide 发送消息，inject接受消息。调用computed，返回值用一个常量接受。2.watch 默认是监听ref浅层监听。vue3的生命周期和vue2类似。响应式api，完成响应式数据。1.监听单个值的变化。2.监听多个值的变化。
Vue2基础语法
weixin_52441428的博客
05-07 1851
Vue2基础语法【插值语法 指令 事件 事件修饰符 条件渲染 遍历渲染 变更方法 checkbox和radio 】
vue3.0基础语法总结
dum_plings的博客
05-11 3353
vue3.0基础语法总结 前言 大家好！我叫椰_季，是一个刚入行不久得前端工程师，本着在提升自我学习能力为前提和认识一些前端方面得朋友为主要任务。准备发布一篇自己学习vue3.0基础语法的总结。学习途径来源于B站张天禹老师。 vue2.0的一些缺陷 我们先来说一说vue2.0存在的一些缺陷，大家都知道vue2.0中数据的代理方式是使用的defineProperty来实现响应式的。那么defineProperty存在什么样的问题呢 不能监听数组的变化 必须遍历对象的每个属性 必须深层遍历嵌套的对象
VUE基础语法
老程的小白博客空间
05-03 697
vue的语法与JavaScript的语法没有什么太大的区别，总体来说还是基于基础的JavaScript语法，只不过多了一些更加方便、高效的写法。
Vue知识（一）Vue基础语法
果子哥丶的博客
05-05 1万+
Vue是一个渐进式的框架，什么是渐进式的呢？ - 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 - 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。 - 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
vue基础语法和指令
m0_62181310的博客
06-16 725
vue基础语法-插值表达式、vue指令1.v-bind语法：简写：样式绑定：1.1动态class1.2动态style2.v-on绑定事件2.1 语法：2.2 简写:2.3 获取事件对象语法:2.4 修饰符2.5 按键修饰符3.v-model:双向绑定3.1 绑定不同表单标签3.2 修饰符语法:修饰符:4.v-text和v-html语法:5.v-show和v-if的使用语法:6.v-for6.1 更新监测6.2 更新DOM就地更新 三、虚拟DOM1.vue数据更新2.diff算法2.1 根元素变了, ....
Vue 基础语法 实例演示 示例代码
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码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基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
从Vue基础语法入手
08-10
本教程将从Vue的基础语法开始，逐步深入，帮助你理解这个强大的工具在实际项目中的应用。 首先，我们从Vue的基本结构说起。一个基本的Vue实例包含`<template>`、`<script>`和`<style>`三个部分。`<template>`用于...
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 574
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue ref和reactive区别
灰海
08-25 3549
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue3插件原理
m0_46281382的博客
08-26 1861
简述vue3中use方法加载第三方插件原理
足球联赛|基于SprinBoot+vue的足球联赛管理系统(源码+数据库+文档)
伟庭的博客
08-27 1060
系统阐述的是使用足球联赛管理系统的设计与实现，对于Java、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计，描述，实现和分析与测试方面来表明开发的过程。开发中使用了ssm框架和MySql数据库技术搭建系统的整体架构。
关于 Vue/React 的 cli 中运用 webpack 打包的原理简单解析
weixin_47342624的博客
08-27 312
引入 webpack.config.js 文件，通过webpack 去加载 webpack.config.js 文件，会返回一个compiler对象，里面内置了 run方法即可对 webpack.config.js 文件进行编译运行build.jsif(err) {} else {})命令行中通过 node 命令执行该文件即可实现运用 webpack 对资源文件进行打包。
Vue基础语法详解及项目构建规范介绍
综上所述，Vue是一种强大而灵活的JavaScript框架，通过理解和掌握Vue的基本语法和重要概念，可以帮助开发者构建出更加优秀的应用程序。Vue的简洁语法和丰富功能使得前端开发变得更加高效和便捷，是目前前端开发领域...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值