Vue02

最新推荐文章于 2024-03-07 17:02:12 发布
最新推荐文章于 2024-03-07 17:02:12 发布
阅读量77 收藏
点赞数
文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63544775/article/details/126669799
版权

一、插值及样式绑定

 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>

1.1.5 class绑定

  使用方式：v-bind:class="expression"

  expression的类型：字符串、数组、对象

1.1.6 style绑定

  v-bind:style="expression"

  expression的类型：字符串、数组、对象
 

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
		<style>
			.a{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p>文本</p>
			{{msg}}
			<p>html页面转义</p>
			<div v-html="htmlstr"></div>
			<p>v-bind 属性绑定</p>
			<input :value="valuestr" />
			<p>vue中可以对变量进行二次处理</p>
			{{str.substring(0,4)}}  <br />
			{{num + 4}}<br />
			{{ok ? '1':'0'}}<br />
			<span :id="idstr+'1'">书籍信息</span>
			<p>class绑定</p>
			<span :class="classStr">文本内容</span>
			<p>style绑定</p>
			<span :style="styleStr">文本内容</span>
			
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return{
					msg:'hello 啵啵',
					htmlstr:'<span style="color:red;">文本内容</span>',
					valuestr:'vue值',
					str:'hello world',
					num:6,
					ok:false,
					idstr:'book_',
					classStr:'a',
					styleStr:'color:blue;'
					}
			}
		})
		
	</script>
</html>

运行截图： 

 

样式绑定：

<!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>
	<style>
		.bobo{
			font-size:100px ;
		}
	</style>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<h3 :class="bobo" v-bind:style="colorred">{{msg}}</h3>
		</div>
	</body>
	<!-- 实例vue -->
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return {
					msg:'vue 啵啵好piu亮',
					colorred:'color:red',
					bobo:'bobo'
				};
			}
		})
		
		
	</script>
	
</html>

 运行截图：

二，指令


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

核心指令

  (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">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
		
	</head>
	<body>
		<div id="app">
			<p>v-if</p>
			请输入分数:<input v-model="score" />
			对应结果
			<span v-if="score<60">不合格</span>
			<span v-else-if="score<70">合格</span>
			<span v-else-if="score<80">良</span>
			<span v-else-if="score<90">优秀</span>
			<span v-else-if="score<=100">优+</span>
			<span v-else="">输入不合法</span>
			
			<p>v-show</p>
			请输入结果:<input v-model="showflag" />
			<span v-show="showflag">show展示与否</span>
			<span v-if="showflag">if展示与否</span>
			
			<p>v-for</p>
			<select >
				<option v-for="l in likes" :value="l.id">{{l.name}}</option>
			</select>
			<br />
			<div v-for="l in likes">
				<input type="checkbox"  :value="l.id"/>{{l.name}}
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return{
					score:0,
					showflag:false,
					likes:[
						{id:1,name:'电子竞技'},
						{id:2,name:'弹钢琴'},
						{id:3,name:'易烊千玺'},
						{id:4,name:'拉二胡'}
					]
					}
			}
		})
		
	</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">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
		
	</head>
	<body>
		<div id="app">
				<!-- {{msg|substring}} -->
				<!--过滤器的串联-->
				{{msg|strSplit|strSplit2}}
				<!--过滤器的传参-->
				{{msg|strSplit3(2,5)}}
			</div>
		</div>
	</body>
	<script type="text/javascript">
		Vue.filter('strSplit',function(value){
					console.log(value);
					return value.substring(0,5);
		})
		Vue.filter('strSplit2',function(value){
					console.log(value);
					return value.substring(0,5);
		})
		Vue.filter('strSplit3',function(value,a,b){
					console.log(value);
					return value.substring(a,b);
		})
		new Vue({
			el:'#app',
			data(){
				return{
					msg:'hellovue'
					}
			}
		})
		
	</script>
</html>

 

 

四，计算属性&监听器

计算属性

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

   computed:{}

监听属性

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

   watch:{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
		
	</head>
	<body>
		<div id="app">
			<p>计算属性</p>
			第一个数<input v-model="x" /><br />
			第二个数<input v-model="y" /><br />
			结果为:{{addFlag}}
			<p>监听属性</p>
			第一千米<input v-model="km" /><br />
			第二米<input v-model="m" /><br />
			</div>
		</div>
	</body>
	<script type="text/javascript">
		
		new Vue({
			el:'#app',
			data(){
				return{
					x:0,
					y:0,
					km:0,
					m:0
					}
			},computed:{
				// 计算属性
				addFlag:function(){
					return parseInt(this.x)+parseInt(this.y)
				}
			},
			watch:{
				km:function(v){
					//:之前对应的是被监听的属性,v指的是被监听属性的
					//当v对应的值发生变化的时候,会执行这个方法
					//v代表千米
					this.m=parseInt(v)*1000
				},
				m:function(v){
					this.km=parseInt(v)/1000;
				}
			}
		})
		
	</script>
</html>

 

 下面我们来看一个购物车案例

购物车案例：

<!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">
			<p>计算属性</p>
			<table border="1" style="width: 600px;height: 300px;">
				<tr>
					<td>物品</td>
					<td>单价</td>
					<td>
						数量
					</td>
					<td>
						小计
					</td>
				</tr>
				<tr>
					<td>帽子</td>
					<td>{{maoziDanjia}}</td>
					<td>
						<input v-model="maozi" />
					</td>
					<td>
						{{maoziTotal}}
					</td>
				</tr>
				<tr>
					<td>衣服</td>
					<td>{{yifuDanjia}}</td>
					<td>
						<input v-model="yifu" />
					</td>
					<td>
						{{yifuTotal}}
					</td>
				</tr>
				<tr>
					<td>裤子</td>
					<td>{{kuziDanjia}}</td>
					<td>
						<input v-model="kuzi" />
					</td>
					<td>
						{{kuziTotal}}
					</td>
				</tr>
				<tr>
					<td>总价</td>
					<td colspan="3">{{total}}</td>
				</tr>
			</table>
			<p>监听属性</p>
			千米：<input v-model="km" />
			米：<input v-model="m" />
		</div>
	</body>
	<script type="text/javascript">
		// 全局过滤器
		Vue.filter('all', function(value) {
			return value.substring(1, 4);
		});
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					maoziDanjia:380,
					yifuDanjia:3000,
					kuziDanjia:2000,
					maozi:1,
					yifu:1,
					kuzi:1,
					km:2,
					m:2000
				};
			},
			methods: {
				handle() {
					alert("触发事件");
				}
			},
			computed:{
				maoziTotal(){
					return this.maoziDanjia*this.maozi;
				},
				yifuTotal(){
					return this.yifuDanjia*this.yifu;
				},
				kuziTotal(){
					return this.kuziDanjia*this.kuzi;
				},
				total(){
					return this.maoziTotal+this.yifuTotal+this.kuziTotal;
				}
			},
			watch:{
				// v指的是m变量
				m: function(v){
					this.km = parseInt(v)/1000;
				},
				// v指的是km变量
				km: function(v){
					this.m = parseInt(v)*1000;
				}
			}
		})
	</script>
</html>

今天分享就到这啦~~~

我们下期再见！！！！！！！！！！！！ 

如何在Vue模板中使用计算属性？
2301_77795034的博客
06-04 1235
最后，我们还可以使用计算属性的setter函数来设置计算属性的值。计算属性是一种在Vue组件中使用的属性，它的值是根据其他数据的计算得出的。在Vue中，我们可以使用computed选项来定义计算属性，这个选项接收一个函数或者一个对象，函数或对象中包含我们要计算的属性和它们的值。除了简单的计算，计算属性还可以使用一些内置的函数和方法。在这两个例子中，无论firstName或lastName的值发生任何变化，都会触发更新fullName计算属性的值，从而保证模板中显示的值始终正确。在模板中使用计算属性。
vue3的基础入门03
weixin_45808678的博客
03-15 1129
计算属性 <body> <div id="app"> <p>{{msg}}</p> <!-- 对普通属性进行逻辑处理，然后再展示 --> <!-- <p>{{ msg.toUpperCase().split(' ').reverse().join(' ')}}</p> --> <p>{{ reverseMsg}
vue基础语法
kiki208418895的博客
09-18 206
模板语法 插值：.html 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 + 1 }} {{ ok ? ‘YES...
Vue模板语法（一）
P_YUX的博客
08-25 823
1. 模板语法 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 插值案例 代码： <head> <meta charset="utf-8"> <title>...
Vue基础语法
yingxiaobai的博客
03-04 397
笔记 1.模板语法 Mustanche语法：{{msg}} Html赋值： v-html=" " 绑定属性： v-bind:id=" " 使用表达式：{{ok?‘YES’:‘NO’}} 文本赋值：v-test=“ ” 指令：v-if=" " 过滤器：{{message | capitalize}}和v-bind:id = " rawld | formatld " 2.Vue事件处理器 v-o...
前端(十八):Vue模板语法,计算属性
张不帅
06-29 370
文章目录模板语法文本原始 HTMLAttribute计算属性计算属性的 setter 模板语法 文本 通过{{}}来实现数据绑定,但是当标签被设置v-once,数据只会在第一次加载绑定 原始 HTML 双大括号会将数据解释为普通文本,为了输出真正的 HTML，你需要使用 v-html Attribute 通过v-bind来绑定attribute v-on来监听DOM事件 v-bind的缩写: <a v-bind:href="url">...</a> 等同 <a :href="u
Vue02的源码学习资料
最新发布
05-22
Vue02指的是Vue的第二版本，这个版本在社区中广泛使用，并且有大量的学习资源。在这个"Vue02的源码学习资料"压缩包中，我们可以期待找到一些关于深入理解Vue.js 2.x核心原理和源码解析的相关材料。下面我们将详细...
vue02：vue02
02-14
vue02 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
Vue02.pdf
09-06
Vue.js 是一个由尤雨溪创建的前端JavaScript框架，它以其自动化思想和简化DOM操作而闻名。Vue.js 的目标是让开发者无需过多关注底层DOM操作，从而更专注于业务逻辑。目前，Vue.js有三个主要版本：Vue1（已淘汰）、...
VUE02
qq_44888661的博客
04-23 134
事件修饰符 事件修饰符可以串联的 .stop：阻止冒泡，在事件后加入.stop。(在div中嵌套一个按钮，按钮和div也加入点击事件，当点击按钮以后，默认先触发按钮点击事件然后在触发div的点击事件，防止div的点击事件发生，就采用阻止冒泡，阻止冒泡是停止所有的冒泡)。 .prevent：阻止默认事件,在事件后加入.prevent。(给a标签一个点击事件，只想触发事件里的内容，不想跳转链接,就采用...
Vue框架---Vue模板语法（一）
鑫709的博客
04-27 1189
模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上 插入 文本 数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值： <script src="js/vue.js" type="text/javascr
从零开始学VUE之模板语法(计算属性)
彼岸舞的博客
05-31 111
计算属性 setter与getter 使用计算属性简化 表达式操作,实现复用,一般计算属性都是只用getter的,一般不适用setter <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g...
Vue3一学就会系列：02 模板语法与计算属性
成茂峰
01-09 622
以上就是今天的内容，本文仅仅简单介绍了vue3的模板语法及计算属性，而更多的vue3知识，后续文章，我将带大家慢慢深入了解。有问题私信我！！~~
Vue学习记录
wang54188a的博客
07-31 257
初学vue，学习记录。目前更新到vue核心，未来将会有以下内容：vue组件化编程、使用vue脚手架、vue中的ajax、vuex、vue-router、vue UI组件库
vue 02 表单
01-12
### Vue.js 中表单元素的使用详解 在前端开发中，表单是非常重要的组成部分之一，它主要用于收集用户输入的信息。Vue.js 提供了一系列强大的工具来处理表单元素，特别是通过 `v-model` 指令实现的数据双向绑定，极...
vue02
m0_46160970的博客
08-16 82
v-model 学习 实现双向绑定 v-model 结合checkbox使用 input中select类型选项框,及v-model input的值绑定 增加动态绑定 v-bind oranginHobbies:[‘篮球’,‘羽毛球’,‘足球’,‘乒乓球’] v-model 的三种修饰符 几种选择输入框样式展示 ...
Vue2 中通过自定义指令将字母转大写
程邓楠的博客
03-07 866
Vue2 中通过自定义指令将字母转大写
如何在 Vue.js 中将字符串的第一个字母大写
qq_41838305的博客
04-22 851
我们使用括号索引 ([ ]) 来获取字符串的 0 属性 - 索引 0 处的字符。字符串（和数组）索引在 JavaScript 中是从零开始的，因此字符串的第一个字符位于索引 0，第二个字符位于 索引 1，依此类推，直到索引 str.length-1 处的最后一个字符。如果结果字符串只需要首字母大写，您可以在 slice() 的结果上调用 toLowerCase() 方法，在连接之前将字符串的其余部分小写。如果你试图将 Vue 实例的字符串数据属性大写（就像在我们的例子中），你可以使用计算属性代替方法。
了解Vue，Vue的基础语法
weixin_67696142的博客
07-14 686
Vue的基础语法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值