前端知识-vue-1、基本语法

最新推荐文章于 2024-04-04 20:16:24 发布
最新推荐文章于 2024-04-04 20:16:24 发布
阅读量586 收藏 1
点赞数 2
分类专栏： 前端知识 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44844572/article/details/121738099
版权

一、VUE基本语法
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1、安装vue

        方式一：直接使用script标签引入

                <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        方式二： npm安装

                在用 Vue 构建大型应用时，推荐使用 NPM 安装：npm install v

2、vue的指令 和 插值

        {{ value}｝:插值表达式

        v-text:填充纯文本内容
        v-html:填充html
        v-pre:填充原始数据

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
		  <p>{{age}}</p>
		  <div v-text="msg">123</div>
		  <div v-html="desc"></div>
		  <div v-pre>{{desc}}</div>
		</div>
		<script type="text/javascript">
		  var vm = new Vue({
		    el:"#app",
		    data:{
		      msg:"hello qiangqiang",
		      age:18,
		      desc:'<h1>guaniu<\h1>'
		   }
		 })
		</script>
	</body>
</html>

页面：

 

3、属性绑定

        属性绑定：使用v-bind:属性 也可以简写为 :属性

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<!-- <a v-bind:href="url">{{name}}</a> -->
			<!-- 属性绑定：使用v-bind:属性 也可以简写为 :属性 -->
			<a :href="url">{{name}}</a>
		</div>
		<script type="text/javascript">
		  var vm = new Vue({
		    el:"#app",
		    data:{
			  name:"百度",
		      url:"http://www.baidu.com",
		   }
		 })
		</script>
	</body>
</html>

页面：

 

 

 4、通过:style，绑定CSS样式

 示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		
		<div id='app' :style="boxStyle">
			box and python
		</div>
		<script type="text/javascript">
		  var vm = new Vue({
		    el:"#app",
		    data:{
			  // 通过style绑定css样式
			  boxStyle: {
			  	color: "red",
			  	fontSize: "30px"
			  }
		   }
		 })
		</script>
	</body>
</html>

页面：

5、通过:class，绑定CSS样式

 示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<style type="text/css">
			.box1 {
				width: 200px;
				height: 200px;
				background: #00AAFF;
			}
		</style>
		
	</head>
	<body>
		
		<div id='app'>
			<!-- 数组形式绑定class -->
			<div :class="[boxCls]">
				box11111 and python
			</div>
		</div>
		<script type="text/javascript">
		  var vm = new Vue({
		    el:"#app",
		    data: {
				boxCls: 'box1'
				}
		 })
		</script>
	</body>
</html>

页面：



 6、事件绑定

v-on:为元素绑定一个事件，绑定点击事件：
        v-on:click = '指定执行的方法'
        v-on：可以简写为 @：@click

 示例：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<style type="text/css">
			.box1 {
				width: 200px;
				height: 200px;
				background: #00AAFF;
			}
			.bj {
				width: 200px;
				height: 200px;
				background: #FF0000;
				border: solid 2px #000000;
			}
		</style>
		
	</head>
	<body>
		
		<div id='app'>
			<!-- 对象形式绑定class -->
			<div :class="{box1:isbox1,bj:isbj}">
				box11111 and python
				
			</div>
			<input type="button" value="更改样式按钮" @click="changeStyle()"/>
		</div>
		<script type="text/javascript">
		  var vm = new Vue({
		    el:"#app",
		    data: {
				isbox1:true,
				isbj:false
				},
			methods:{
				changeStyle(){
					this.isbox1=!this.isbox1
					this.isbj=!this.isbj
				}
				}
		 })
		</script>
	</body>
</html>

页面：

 

7、vue的双向数据绑定

v-model:页面修改数据会变，数据改变，页面也会改

           事件监听
view -----> vm ------>model
   数据绑定
view <----- vm <------model

 示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		
	</head>
	<body>
		
		<div id="app">
		  <div v-text="msg">123</div>
		 <div>
		   <input type="text" v-model="msg">
		 </div>
		</div>
		<script type="text/javascript">
		  var vm = new Vue({
		    el:"#app",
		    data:{
		      msg:"hello 瓜牛"
		   }
		 })
		</script>
	</body>
</html>

页面：

 

8、分支语句

通过条件来控制元素是否渲染到页面
        v-if（v-else-if）：判断条件成立时显示
        v-else: 条件不成立时显示
        v-show:控制元素是否显示到页面（本质就是display属性的控制）

 示例（ v-if，v-else-if，v-else）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			  <h1 v-if='result=="success"' style="color: #55AA7F;">
				用例id:{{caseId}}
				名称:{{caseName}}
				结果:{{result}}
			</h1>
			<h1 v-else-if='result=="error"' style="color: #ffaa00;">
				用例id:{{caseId}}
				名称:{{caseName}}
				结果:{{result}}
			</h1>
			<h1 v-else='result=="fail"' style="color: #ff0000;">
				用例id:{{caseId}}
				名称:{{caseName}}
				结果:{{result}}
			</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					caseId: "case1",
					caseName: "用例名称",
					result: 'fail'
				}
			})
		</script>
	</body>
</html>

页面：

 

示例（v-show）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 600px;
				height: 400px;
				margin: 200px auto;
				box-shadow: 0 0 5px #00AAFF;
				background: #d3d2ce;
			}
		</style>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 通过 v-show控制元素的显示和隐藏，本质上是通display去实现的-->
			<div class="box" v-show="show"></div>
			<button type="button" @click="show=!show">按钮1</button>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data:{
					show:false
				}
			})
		</script>
	</body>
</html>

页面：

 

 

9、遍历语句

        v-for：遍历数组
                {{name}}
        v-for:遍历对象
                {{key}}{{value}}

 示例（遍历数组）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			 <!-- 使用v-for时，最好给元素添加一个key属性（key属性的值要是唯一的），方便vue去跟踪和维护这个节点中的数据 -->
			<h1 style="color: #55AA7F;" v-for="(item,index) in cases " :key='index'>
				遍历出来的数据值：{{item}}------数据的索引：{{index}}
			</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data:{cases: [
					{caseId: "case1",
					caseName: "用例名称",
					result: 'fail'},
					{caseId: "case1",
					caseName: "用例名称",
					result: 'fail'},
					{caseId: "case1",
					caseName: "用例名称",
					result: 'fail'}
				]}
			})
		</script>
	</body>
</html>

页面：

 示例（遍历对象）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<h1 style="color: #55AA7F;" v-for="(value,key) in cases " >
				遍历出来的数据值：{{value}}------数据key：{{key}}
			</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data:{cases:{case:123,
				title:"haha",
				res:"fail"}}
			})
		</script>
	</body>
</html>

页面：

 10、v-for和v-if结合使用

 示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<h1 style="color: #55AA7F;" v-for="(item,index) in cases " :key='index'>
				<!-- 遍历出来的数据值：{{item}}------数据的索引：{{index}} -->
				<span v-if="item.result=='success'" style="color: #55ff7f;">{{item}}</span>
				<span v-else-if="item.result=='fail'" style="color: #ff5500;">{{item}}</span>
				<span v-else-if="item.result=='error'" style="color: #ffaa00;">{{item}}</span>
				<span v-else style="color: #000000;">{{item}}</span>
			</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					cases: [{
							case_id: 1,
							title: "用例001",
							result: "success"
						},
						{
							case_id: 1,
							title: "用例002",
							result: "error"
						},
						{
							case_id: 1,
							title: "用例003",
							result: "fail"
						},
						{
							case_id: 1,
							title: "用例003",
							result: "aa"
						}
					]
				}
		
		
			})
		</script>
	</body>
</html>

页面：

 未完待续，点个关注，持续更新。。。

瓜牛强强
关注
专栏目录
VUE｜VUE前端开发--基本语法
匿名用户小易
12-21 912
VUE｜基本语法 一、声明式渲染 ◼ hellovue1.html <html> <head><title>HelloWorld!</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <b...
前端-Vue3.x-知识图谱
02-19
这份“前端-Vue3.x-知识图谱”旨在全面概述Vue3.x的核心概念、特性和最佳实践。 一、核心概念 1. **Composition API**：Vue3.x引入了Composition API，允许开发者以模块化的方式组织代码，提高了代码的可复用性...
前端——Vue基础语法
温良
07-27 451
Vue介绍 Vue是一套构建用户界面的渐进式前端框架。 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。 特点 易用：在有HTMLCSSJavaScript的基础上，快速上手。 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。 Vue的使用 下载和引入vue.js文件。 编写入门程序。
前端框架Vue语法部分(一)
m0_64226820的博客
11-24 1206
各类指令、属性语法
前端-vue 基本语法
weixin_45020244的博客
10-30 161
<!-- * @description 参数1 * @fileName vue01 * @author userName * @date 2020-10-29 11:28:04 * @version V1.0.0 !--> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid
前端基础学习——Vue基础与语法介绍
weixin_53919192的博客
07-08 985
本文为大家做了前端基础学习——Vue基础与语法介绍，希望对你有帮助~~
前端开发-vue级联地址选择器的纯前端实现-基于javascript来实现.zip
04-02
这个项目不仅涵盖了Vue.js的基础知识，还涉及了前端开发中的数据获取、状态管理、性能优化等多个方面，是提升Vue.js实战技能的好实践。通过学习和实现这样的组件，开发者可以更好地理解和运用Vue.js框架，提高前端...
tts-vue-1.9.0 语音合成
05-23
1. **Vue.js基础** - **组件化开发**：Vue.js的核心理念是组件，每个UI部分都可以被封装为一个独立的组件，便于复用和维护。 - **模板语法**：Vue.js使用HTML-like的模板语法，允许开发者声明式地将数据绑定到DOM...
前端项目-vue-form.zip
09-03
1. **Vue.js基础知识** - **Vue实例**：Vue.js项目的核心是Vue实例，它包含了应用的状态和行为。在这个项目中，Vue实例将用于管理表单状态和验证逻辑。 - **模板语法**：Vue.js使用简洁的模板语法，使得在HTML中...
前端工程师--vue练习小项目
09-25
这个"前端工程师--vue练习小项目"旨在帮助初学者巩固Vue的基础知识，包括组件化开发、数据绑定、指令、生命周期等核心概念。在这个项目中，你可以看到两个实际的应用场景：网页记事本和网页天气预报，这些都是基于...
Vue 前端笔记 | 常用指令及语法
qq_41497111的博客
07-11 338
学习完，基本指令回顾总结下，方便日后回忆。 一、基本指令 {{ xxx }} 差值表达式 v-cloak 防止页面加载时出现 vuejs 的变量名 <div v-cloak> {{ xxx}} </div> <style> [v-cloak] { display: none; } </style> 这样直至div内...
Vue语法和项目构建
weixin_41249041的博客
04-11 409
Node.js: 基于事件循环的异步IO 单线程运行，避免多线程的变量同步问题 JS可以编写后台代码，前后台统一编程语言 node.js的伟大之处不在于让JS迈向了后端开发，而是构建了一个庞大的生态系统。 NPM是node.js的包管理系统。 MVVM模式 M：即Model，模型，包括数据和一些基本操作 V：即View，视图，页面渲染结果 ...
vue基本语法总结大全
xueluoyouying的博客
02-04 2184
vue基本语法总结
Vue基础语法知识（自用，完整版）
m0_62068678的博客
09-12 9462
vue基础语法、尚硅谷、欢迎交流
Vue基础语法介绍
热门推荐
qq_42697338的博客
01-01 1万+
什么是Vue？ Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js借鉴了Angular以及React的一些核心思想，综合各自的长处进行了操作以及性能等方面的优化，进而打造出一款性能更优，学习更容易的MVVM框架。 它的作者是：尤雨溪 vue对比ang...
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（一）vue概述与用法、绑定语法、vue指令，8个优秀的CSS实践
最新发布
2401_84091110的博客
04-04 768
以数据操作(增删改查)为主的项目，都可以由vue框架开发如：饿了么、大众点评\淘宝、京东、今日头条、微博、网易云音乐、小红书、知乎、自如、链家、携程…等等；不是以数据操作为主的如大型游戏、微信、qq、抖音、爱奇艺等则尽量不用vue框架。1.vue的下载（1）只下载一个vue.js文件，引入网页使用vue版本分为开发版和生产版，开发版(未压缩版)有完备的注释、代码格式，以及见名知意的变量名和极其友好的错误提示，可读性好，适合学习和开发之用，但是体积大，不适合生产环境快速下载运行。
2021-07-07
YuanYi_M的博客
07-07 91
jQuery jQuery的历史 1.2005年8月，John Resig提议改进Prototype的“Behaviour”库 2.2006年1月John Resig等人创建了jQuery；8月，jQuery的第一个稳定版本，并且已经支持CSS选择符、事件处理和AJAX交互 3.2007年7月，jQuery 1.1.3版发布 4.2008年5月，jQuery 1.2.6版发布，这版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中，同时也修改了许多BUG，而且有不少
Vue.js基本的语法一
xm_w_xm的博客
05-10 3937
一、vue.js基本的语法1.1vue.js是什么？Vue.js（读音 /vjuː/，类似于 view 的读音）是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是，Vue 从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专注于视图层，并且很容易与其他第三方库或现有项目集成。另一方面，当与单文件组件和 V...
Vue前端框架基础：易用高效，MVC与MVVM详解
Vue（发音近似“view”）...Vue框架通过其基础语法、组件化设计、声明式编程思想以及事件驱动机制，使得前端开发者能够快速构建出高性能和用户体验优秀的Web应用。学习并掌握这些基础知识，是理解和使用Vue框架的关键。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值