vue中js常用方法,computed watch,class style绑定,关于数组,axios

最新推荐文章于 2022-11-13 19:02:18 发布

Wooo0Ooo

最新推荐文章于 2022-11-13 19:02:18 发布

阅读量254

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Wooo0Ooo/article/details/119880243

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在vue中使用js常用方法

有三种方式

1.写在methds里面

首字母大写
例如:msg.substring(0,1).toUpperCase()+msg.substring(1)

视图部分:

<!-- 首字母变大写 -->
			<h2>{{msg.substring(0,1).toUpperCase()+msg.substring(1)}}</h2>
			<!-- 点击按钮首字母大写 v-on简写为@-->
			<input type="text" v-model="msg2" />//将文本框输入内容首字母大写
			<input type="button" value="首字母大写" @click="run2()"/>{{msg3}}//按键首字母大写

脚本部分:

new Vue({
			//元素
			el:"#app",
			//数据
			data:{
				msg:"abcdefgh",
				msg2:"",
				msg3:""
			},
			//函数
			methods:{
				run2:function(){
					//运算 
		return this.msg2.substring(0,1).toUpperCase()+this.msg2.substring(1);
				}
			}
		})

2.在methods直接return

视图部分:

			<input type="text" v-model="msg2" />
			<!-- 将文本框中首字符大写 利用方法返回值 -->
			利用methods返回值 : {{run2()}}//将msg2的首字母大写

脚本部分:

new Vue({
			//元素
			el:"#app",
			//数据
			data:{
				msg:"abcdefgh",
				msg2:"",
				msg3:""
			},
			//函数
			methods:{
				run2:function(){
					//运算 
		return this.msg2.substring(0,1).toUpperCase()+this.msg2.substring(1);
				}
			}
		})

3.写在计算属性 computed

对于复杂逻辑可以使用computed来完成

例如:msg.substring(0,1).toUpperCase()+msg.substring(1)
写法://计算属性
computed:{//采用键值对方式
           newStr:function(){
               console.log("计算属性")
               return this.msg2.substring(0,1).toUpperCase()+this.msg2.substring(1);
           }
           }

视图部分:

			<!-- 将文本框中首字符大写 利用计算属性 -->
			computed计算属性:{{newStr}}

脚本部分:

		new Vue({
			//元素
			el:"#app",
			//数据
			data:{
				msg:"abcdefgh",
				msg2:"",
				msg3:""
			},
			//计算属性
			computed:{//采用键值对方式
			newStr:function(){
		return this.msg2.substring(0,1).toUpperCase()+this.msg2.substring(1);
			}
			}
		})

计算属性computed和方法method的区别
   1.相同点
       如果作为模板数据的展示两者都能实现相应的功能唯一不同的是 methods定义的方法需要执行
   2.不同点
       computed会基于相应数据缓存 methods不会缓存
       发生变化之前先看data里面的数据是否发生变化如果没有发生变化 computed方法不会执行但是method里方法会执行
       computed是属性 method是函数

watch侦听属性

随时监听数据的变化而做出的响应

侦听:哪个数据变化就可以执行相应的功能

 <body>
	<!-- 视图部分 -->
	<div id="app">
		第一个值:<input type="text" v-model="msg1">{{msg1}}<br>
        //此时只要输入框输入内容就会弹窗
		第二个值:<input type="text" v-model="msg2">{{msg2}}<br>
	</div>
 </body>
 <!-- 脚本部分 -->
 <script>
  // 创建vue对象
  new Vue({
		// 元素
		el:"#app",
		//数据
		data:{
			msg1:"",
			msg2:""
		},
		//侦听属性
		watch:{//键值对方式定义
			// 侦听:哪个数据变化就可以执行相应的功能
			msg1:function(){
			alert("msg1发生了变化");
			},
			msg2:function(){
			alert("msg2发生了变化");
		}
	}
  })
 </script>

class和style的动态绑定

1.使用字符串绑定
2.使用数组绑定
3.使用对象形式绑定
4.使用三元运算符绑定

		<style>
			.yellow{
				color: yellow;
			}
			.pink{
				color: pink;
			}
			.cu{
				font-weight: 800;
			}
			.xi{
				font-weight: 100;
			}
			.big{
				font-size: 50px;
			}
			.small{
				font-size: 14px;
			}
			
		</style>
	</head>
	<body>
		<!-- 视图部分 -->
		<div id="app">
			<!-- 动态绑定class -->
			<!-- 使用字符串绑定 -->
			<p :class="str">1.使用字符串绑定</p>
			<!-- 使用数组绑定 -->
			<p :class="[color,cuxi,daxiao]">2.使用数组绑定</p>
			<!-- 3.使用对象形式绑定 -->
			<p :class="{yellow:true,cu:false,big:true}">3.使用对象形式绑定</p>
//为true时绑定css属性 为false时不绑定css属性 所以此时视图上文字没有被加粗
			<!-- 4.使用三元运算符绑定 -->
			<p :class="zhi?color:cuxi">4.使用三元运算符绑定</p>
		</div>
	</body>
	<!-- 脚本部分 -->
	<script type="text/javascript">
		//创建vue对象
		new Vue({
			//元素
			el:"#app",
			//数据
			data:{
				// 动态绑定class
				// 使用字符串绑定
				str:"pink cu small",
				// 使用数组绑定
				color:"pink",
				cuxi:"cu",
				daxiao:"big",
				// 三元运算三目运算绑定
				zhi:true
			}
		})

关于数组在控制台使用js函数

vue将被侦听的数组变更方法进行了封装所以可以直接触发视图更新
这些方法有 push() unshift() pop() shift() splice() sort() reverse()
1.push(a,b,c) 向数组末尾添加一个或者多个元素并且返回数组新的长度改变数组本身 abc是要被添加进去的内容
2. unshift(a,b,c) 向数组的首位添加一个或者多个元素并且返回数组新的长度改变数组本身
3.pop() 删除并返回数组的最后一个元素并且改变数组本身
4.shift() 删除并返回数组的第一个元素并且改变数组本身
5.splice(index,len,a) 表示向数组中添加/删除元素,然后返回被删除的元素 index表示索引 len表示个数 a表示添加的元素并且改变数组本身
6.sort() 排序
7.reverse()反转

		<!-- 引入vue.js -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 视图部分 -->
		<div id="app">
			<ul>
				<li v-for="a in arr">{{a}}</li>
			</ul>
		</div>
	</body>
	<!-- 脚本部分 -->
	<script type="text/javascript">
		//创建vue对象
		var vm = new Vue({
			el:"#app",
			//数据
			data:{
				arr:[11,22,33,44,55]
			}
		})
	</script>

视图部分: 在控制台输入

事件的处理事件的修饰符

1..once:按钮只能执行一次

一般用于注册的侦听写法: @方法名.once

视图部分:

<!-- once修饰符 -->
			<button type="button" @click.once="run()">注册</button>
//按下按钮 弹窗正在注册之后 再次按注册按钮无法再次弹窗 只能执行一次

脚本部分:

	//创建vue对象
		new Vue({
			el:"#app",
			//数据
			data:{	
			},
			methods:{
				run:function(){
					alert("正在注册...")
			}
		})

2..stop:用来阻止冒泡事件的发生

防止子类标签做出某种响应时外部包括的父类标签也作出某种响应

例如:如果diva>divb>divc divc有一个鼠标点击弹窗事件时当divc被单击会弹出三次弹框

使用stop修饰符子类作出相应时父类不会作出相应

			<!-- stop修饰符 -->
			<div @click.stop="run2('a')">aaa
				<div @click.stop="run2('b')">bbb
					<div @click.stop="run2('c')">ccc</div>
        //此时单击div 会弹窗ccc 不会弹窗bbb 和 aaa
				</div>
			</div>

脚本部分:

		new Vue({
			el:"#app",
			//数据
			data:{
				
			},
			methods:{
				run2:function(x){
					alert(x)
				}
			}
		})

3..prevent:阻止元素发生默认行为

例如a标签中href属性有默认跳转页面行为

视图部分:

        <!-- prevent 阻止元素发生默认性行为 -->
			<form @submit.prevent="run2('阻止')">
				姓名:<input type="text"  />
				<input type="submit" value="提交" />
//此时点击提交按钮会弹窗阻止 阻止进入到下一页面 更改submit自动提交的默认性行为
			</form>

脚本部分:

		new Vue({
			el:"#app",
			//数据
			data:{
				
			},
			methods:{
				run2:function(x){
					alert(x)
				}
			}
		})

Axios

通过axios完成ajax请求跨域请求操作
第一步引入axios
第二步使用axios

		<!-- 引入axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Wooo0Ooo

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue中js常用方法,computed watch,class style绑定,关于数组,axios

在vue中使用js常用方法有三种方式1.写在methds里面首字母大写例如:msg.substring(0,1).toUpperCase()+msg.substring(1)视图部分: <h2>{{msg.substring(0,1).toUpperCase()+msg.substring(1)}}</h2>  <input typ.
复制链接

扫一扫