Vue基础语法（一）

最新推荐文章于 2023-08-24 16:40:07 发布
最新推荐文章于 2023-08-24 16:40:07 发布
阅读量108 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46690290/article/details/108026631
版权

Vue基础语法

插值

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 + 1 }}
          {{ ok ? 'YES' : 'NO' }}
          <li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue插值</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<!-- <script src="../js/vue.js"></script> -->
	</head>
	<body>
		<div style="margin-left: 700px;">
			<!-- 边界 -->
			<div id="app">

				<ul>
					<li>
						<h3>文本</h3>
						{{msg}}
					</li>
					<li>
						<h3>html字符串渲染</h3>
						<!--v-html 解析html字符串  -->
						<div v-html="htmlstr"></div>
					</li>
					<li>
						<h3>v-bind属性绑定指令</h3>
						<input type="text" value="19" /><br />
						<input type="text" v-bind:value="age" />
					</li>
					<li>
						<h3>Vue表达式</h3>
						{{str.substr(0,6).toUpperCase()}}
						{{ number + 1 }}
						{{ ok ? 'YES' : 'NO' }}
						<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
					</li>

				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				msg: 'hello Vue',
				htmlstr: '<span style="color: pink;">粉了</span>',
				age: 20,
				str:'https://www.baidu.com',
				number:6,
				ok:true,
				id:16
			}

		})
	</script>
</html>

指令

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

1.2.1 核心指令

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



      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一起绑定[多选]复选框和单选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue指令</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<!-- <script src="../js/vue.js"></script> -->
	</head>
	<body>
		
			<!-- 边界 -->
			<div id="app">

				<ul>
					<li>
						<h3>分支</h3>
						<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>
						<input type="text" v-model="score" />
					</li>
					<li>
						<h3>v-show指令</h3>
						<div v-show="flag">出来吧</div>
						<!--v-if和v-show的区别 
						 v-if 控制的是标签是否打印前台显示
						 v-show 控制的是标签的样式
						 
						 -->
					</li>
					<li>
						<h3>v-for指令</h3>
						<div v-for="item,index in data1">
							{{item}}--{{index}}<br />
						</div>
						<hr>
						<div v-for="item,index in data2">
							{{item.id}}-{{item.name}}-{{index}}<br />
						</div>
					</li>
					<li>
						<h3>动态参数</h3>
						<button v-on:[evname]="xxx">动态事件调用</button>
							<input type="text"  v-model="evname"/>
					</li>


				</ul>
			</div>
	
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				score: 100,
				flag: true,
				data1: [1, 3, 6, 9, 14],
				data2: [{
						id: 1,
						name: '星星'
					},
					{
						id: 2,
						name: '月亮'
					},
					{
						id: 3,
						name: '贩卖机'
					}
				],
				evname:'click',	

			},
			methods:{
				xxx(){
					console.log('xxx方法被调用！！！')
				}
			}

		})
	</script>
</html>

过滤器

  全局过滤器

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

     // value 表示要过滤的内容

   });

   局部过滤器

   new Vue({

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

   });

 

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

   <!-- 在两个大括号中 -->

   {{ name | capitalize }}

 

   <!-- 在 v-bind 指令中 -->

   <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){};//添加一个新的类方法

 

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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue指令</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<!-- <script src="../js/vue.js"></script> -->
	</head>
	<body>
		
			<!-- 边界 -->
			<div id="app">

				<ul>
					<li>
						<h3>分支</h3>
						<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>
						<input type="text" v-model="score" />
					</li>
					<li>
						<h3>v-show指令</h3>
						<div v-show="flag">出来吧</div>
						<!--v-if和v-show的区别 
						 v-if 控制的是标签是否打印前台显示
						 v-show 控制的是标签的样式
						 
						 -->
					</li>
					<li>
						<h3>v-for指令</h3>
						<div v-for="item,index in data1">
							{{item}}--{{index}}<br />
						</div>
						<hr>
						<div v-for="item,index in data2">
							{{item.id}}-{{item.name}}-{{index}}<br />
						</div>
					</li>
					<li>
						<h3>动态参数</h3>
						<button v-on:[evname]="xxx">动态事件调用</button>
							<input type="text"  v-model="evname"/>
					</li>


				</ul>
			</div>
	
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				score: 100,
				flag: true,
				data1: [1, 3, 6, 9, 14],
				data2: [{
						id: 1,
						name: '星星'
					},
					{
						id: 2,
						name: '月亮'
					},
					{
						id: 3,
						name: '贩卖机'
					}
				],
				evname:'click',	

			},
			methods:{
				xxx(){
					console.log('xxx方法被调用！！！')
				}
			}

		})
	</script>
</html>

计算属性监听属性
4、计算属性

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

   computed:{}

 

   

 

5. 监听属性

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

   watch:{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue计算属性监听属性</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<!-- <script src="../js/vue.js"></script> -->
	</head>
	<body>
		<div style="margin-left: 700px;">
			<!-- 边界 -->
			<div id="app">

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



				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				price: 25,
				num: 1,
				km: 1,
				m: 1000
			},
			/* 计算属性 */
			computed: {
				total() {
					return parseInt(this.price) * parseInt(this.num);
				}
			},
			/* 监听属性 */
			watch: {
				km(v) {
					this.m = v * 1000;
				},
				m(v) {
					this.km = v / 1000;
				}
			}


		})
	</script>
</html>

在这里插入图片描述

h0824_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 与 Vue2 官方文档解读
愿你走过半生，归来任是少年。
06-01 1万+
性能优化，是每一个开发者都会遇到的问题，特别是现在越来越重视体验，以及竞争越来越激烈的环境下，对于我们开发者来说，只完成迭代，把功能做好是远远不够的，最重要的是把产品做好，让更多人愿意使用，让用户用得更爽，这不也是我们开发者价值与能力的体现吗。
2.vue模板语法
快乐的大大大飞猪
09-15 85
vue模板语法
vue学习
souyin的博客
02-12 89
vue基础学习笔记
Vue3 + Ts 使用介绍
qq_18773317的博客
08-24 629
但是在应用的层面，还是有差异的，通常来说：单个的普通类型的数据，我们使用ref来定义响应式。ref他强调的是一个数据的value的更改，reactive强调的是定义的对象的某一个属性的更改。关注点分离，应该分两层意思：第一层意思就是，Vue3的setup，本身就把相关的数据，处理逻辑放到一起，这就是一种关注点的聚合，更方便我们看业务代码。以前的前端开发模式是，先写页面，后关注数据。第二层意思，就是当setup变的更大的时候，我们可以在setup内部，提取相关的一块业务，做到第二层的关注点分离。
VUE-list渲染后-添加、删除、搜索功能
qq_42177117的博客
06-05 391
视图： 功能：1：列表渲染 2：添加功能 3：删除功能 4:关键词搜索 DIV代码如下： <div id="list" class="list"> <div class="lt-nr"> <div class="lt-tt">id:</div> <input class="lt-text" type="text" v-model="id" /> </div> <div class="lt-nr"&g
一、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 基础语法 实例演示 示例代码
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例...
从Vue基础语法入手
08-10
本教程将从Vue的基础语法开始，逐步深入，帮助你理解这个强大的工具在实际项目中的应用。 首先，我们从Vue的基本结构说起。一个基本的Vue实例包含`<template>`、`<script>`和`<style>`三个部分。`<template>`用于...
(黑马)Vue-基础语法.ppt
最新发布
07-22
Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础语法Vue-基础...
VUE 入门基础(3)
weixin_34151004的博客
12-22 88
三，模板语法 　　Vue将模板编译成虚拟DOM渲染函数，结合响应系统，在应用状态改变时，vue能够智能地计算出重新渲染组件的最小代价并DOM操作上。 　　插值，文本 　　　　数据绑定常见的形式就是使用“Mustache”语法（双大括号）的文本插值： 　　　　　　<span>Message:{{ msg }}</span> 　　　　通过使用v-once 指令执行一次...
vue模板语法
WARGON的博客
09-26 419
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。   插值： 1：文本 最常见的数据绑定形式：使用 {{...}} 进行文本插值。例： &lt;div id="abc"&gt; &lt;p&gt;{{ message }}&lt;/p&gt; &lt;/div&gt; &lt;script&gt;...&lt;/scri..
Vue 的简单入门理解
luzhaopan的博客
08-17 1040
一. angular适合很大的项目mvvm，react干什么都行的组件式，vue是个轻量级mwwm适合中小型应用。 感觉react全家桶未来应该会走红，中小项目里vue会是不错的选择，angular在版本稳定下来之前还是先观望吧。。 顺便说下上手难度，vue不难（只要不是一上来就webpack，cli），angular1.x也不难（2.x没用过，感觉改的有点多，等版本相对稳定再说），reac...
vue基础语法01
m0_67476502的博客
04-26 717
目录 1.1 插值 1.1.4 表达式 完整代码 1.2 指令（指的是带有“v-”前缀的特殊属性） 参数，动态参数及简写​ 完整代码 过滤器（全局和局部） 完整代码 计算属性 完整代码 1）v-model:数据双向绑定 2）v-bind：绑定标签属性值，例如：v-bind:class/v-bind:id 3）{{}}:插值，针对标签中文本值进行插入操作 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html ...
list--ID自增
dtlcq的专栏
11-19 1469
 最近在做项目时，经理要求新增的list项的ID要根据一定的规则生成，其实现方式有两种：           1、自定义一个此list的自增ID字段（好处是，在新增时就可以看到ID了）           2、编写一个此list自增ID的EventHandler事件处理程序（在新增页面不可看到新的ID，新增后可以看到新增的ID）
取list中的所有id
weixin_46545909的博客
11-08 4504
把查询出来的用户的userId转成一个集合 List<UserTagsDTO> userTagsDtos = tagService.selectTagByContent(mobile); List<Long> userIds = userTagsDtos.stream().map(UserTagsDTO::getUserId).collect(Collectors.toList()); ...
在js里获取动态的id，形如$("#动态id")
热门推荐
飞火龙在天的博客
05-25 3万+
js: /*验证  preplay  页面表单*/ $().ready( function() { $("#listTable").find("tr").hover(function() { $("#delete_id").val($(this).children("td").eq(0).html()); $("#delete_title").val($(this).chi
Vue之模板语法
A2895922320的博客
10-28 417
一：插值 1.文本 <!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> <!--
vue2中，根据list的id进入对应的详情页并修改title
06-30 1万+
一般项目中，我们会遇到有个list。。。然后你随便点击一个，会进入他对应的详情页。。。正常，那个详情页是一个公共的组件，我们只需根据id传值来判断，这个页面显示的是哪个list的数据即可。如图：
python中的id()函数及读取list的例子
weixin_34128534的博客
02-22 1026
id(object) Return the “identity” of an object. This is an integer (or long integer) which is guaranteed to be unique and constant for this object during its lifetime. Two...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值