vue的使用

已于 2022-07-26 19:08:50 修改
阅读量330 收藏
点赞数 2
文章标签： vue.js javascript 前端
于 2022-07-26 19:00:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59359854/article/details/126000859
版权

methods的小结

  1. 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
  2. 事件的回调需要配置在methods对象中，最终会在vm上
  3. methods中配置的函数，==不要用箭头函数！==否则this就不是vm了
  4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
  5. @click="demo和@click="demo($event)"效果一致，但后者可以传参

Vue中的事件修饰符总结：

  1. prevent：阻止默认事件（常用）
  2. stop：阻止事件冒泡（常用）
  3. once：事件只触发一次（常用）
  4. capture：使用事件的捕获模式
  5. self：只有event.target是当前操作的元素时才触发事件
  6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕

修饰符可以连续写，比如可以这么用：@click.prevent.stop="showInfo"

<h2 v-for="(item,index) in todolists" :key="index">{{item}}--{{index}}</h2>

在将来的项目中写v-for是需要加上:key 他的值可以写索引最好写数据中的id值

bmustache表达式写法

<div id="app">
			<h2>{{firstName}}-{{lastName}}</h2>
			<h2>{{firstName+'-'+lastName}}</h2>
			<h2>{{count*2}}</h2>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						firstName:'zhang',
						lastName:'san',
						count:2
					}
				}
				
			})
		</script>

vue的常用指令 v-for

<div id="app">
			<h2>{{todolists}}</h2><!-- for in  for of -->
			v-for="数组或对象中的每一个值 in/of 数组或对象本身"
			<!-- <h2 v-for="item in todolists">{{item}}</h2> -->
			<!-- <h2 v-for="item of todolists">{{item}}</h2> -->

			<!-- <h2 v-for="item of obj">{{item}}</h2>
			<h2 v-for="item in obj">{{item}}</h2> -->
			
			
			<!-- <h2 v-for="item in obj2">{{item.a}}{{item.b}}{{item.c}}</h2>
			
			<ul>
				<li v-for="item in obj2">{{item.a}}{{item.b}}{{item.c}}</li>
			</ul> -->
			
			
			<!-- <h2 v-for="(item,index) in todolists" :key="index">{{item}}--{{index}}</h2>
			在将来的项目中写v-for是需要加上:key 他的值可以写索引最好写数据中的id值 -->
			
			
			<h2 v-for="item in obj2" :key="item.id">{{item.a}}{{item.b}}{{item.c}}</h2>
			<!-- diff算法 -->
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						todolists: ['篮球', '排球', '羽毛球', '足球'],
						obj: {
							a: '张三',
							b: '李四',
							c: '王五'
						},
						obj2: [{
							id:1,
							a: '张三',
						}, {
							id:2,
							b: '李四',
						}, {
							id:3,
							c: '王五'
						}]
					}
				}

			})
		</script>

vue的常用指令 v-once

<div id="app">
			<h2>{{msg}}</h2>
			<h2 v-once>{{msg}}</h2>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						msg:'我就是这么倔强'
					}
				}
				
			})
		</script>

vue的常用指令 v-html  重点

	<div id="app">
			<h2 v-html="url"></h2>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						url:"<a href='http://www.baidu.com'>百度一下</a>"
					}
				}
			})
		</script>

vue的常用指令 v-text 

<div id="app">
			<h2>{{message}},啧啧啧</h2>
			<h2 v-text="message">,啧啧啧</h2>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						  message:"你好啊"
					}
				}
				
			})
		</script>

vue的常用指令 v-pre 

<div id="app">
			<h2>{{msg}}</h2>
			<h2 v-pre>{{msg}}</h2>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						msg:'我比v-once还要厉害'
					}
				}
				
			})
		</script>

vue的常用指令 v-cloak

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			[v-cloak]{
				display: none !important;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<h2>{{msg}}</h2>
		</div>
		<script>
			setTimeout(() => {
				const vm = new Vue({
					el: '#app',
					data() {
						return {
							msg: '我就是这么倔强'
						}
					}
				})
			}, 200)
		</script>
	</body>
</html>

v-bind指令 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<img :src="src" />
			<img :src="url" />
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						src:'https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1',
						url:'img/6.png'
					}
				}
			})
		</script>
	</body>
</html>

v-bind绑定对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.active {
				color:#f00;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <h2 :class="{active:isactive}" @click="change">{{msg}}</h2> -->
		     <h2 :class="changeActive()" @click="change">{{msg}}</h2>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						msg:'动态绑定对象',
						isactive:false
					}
				},
				methods:{
					change(){
						this.isactive = !this.isactive
					},
					changeActive(){
						return {active:this.isactive}
					}
				}
				
			})
		</script>
	</body>
</html>

v-bind和v-for结合

v-for时候的index索引，给每行绑定事件点击事件，点击当行是获取此行索引index并赋值给currentIndex，使用v-bind:绑定class，当index===currentIndexDom元素有active的class，颜色变红。

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<style>
		.active {
			color: #f00;
		}
	</style>
</head>

<body>
	<div id="app">
		<ul>
			<!-- <li v-for="(item,index) in movies" :key="index" :class="{active:currentIndex==index}" @click="change(index)">{{item}}</li> -->
			<li v-for="(item,index) in movies" :key="index" :class="currentIndex==index?'active':''"@click="change(index)">{{item}}</li><!-- 动态绑定三元表达式 -->
		</ul>
	</div>
	<script>
		const vm = new Vue({
			el: '#app',
			data() {
				return {
					currentIndex: 0,
					movies: ["海王", "海贼王", "火影忍者", "复仇者联盟"]
				}
			},
			methods: {
				change(i) {
					/* 	this.currentIndex = i */
					if (this.currentIndex == i) return
					this.currentIndex = i
				}
			}

		})
	</script>
</body>

</html>

v-bind动态绑定class（数组用法）

1、数组中加引号和不加引号有区别  

2、加引号:表示字符串 是固定的,

3、 不加引号:表示变量是不固定的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2 :class="['active','aaa']">我们正在学习vue</h2>
			<h2 :class="[active,aaa]">我们正在学习vue</h2>
			<h2 :class="getStyle()">我们正在学习vue</h2>
		</div>
		<script>
			/* 数组中加引号和不加引号有区别  
			加引号:表示字符串 是固定的,
			不加引号:表示变量是不固定的 */
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						active:'isactive',
						aaa:'bbb'
					}
				},
				methods:{
					getStyle(){
						return [this.active,this.aaa]
					}
				}
				
			})
		</script>
	</body>
</html>

v-bind动态绑定style（对象语法）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2 :style="{fontSize:'50px'}">我们爱学习</h2>
			<h2 :style="{fontSize:fontsize}">我们爱学习</h2>
			<h2 :style="getStyle()">我们爱学习</h2>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						fontsize:40+'px'
					}
				},
				methods:{
					getStyle(){
						return {fontSize:this.fontsize}
					}
				}
				
			})
		</script>
	</body>
</html>

v-bind动态绑定style（数组语法）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2 :style="[baseStyle]">我们爱学习</h2>
			<h2 :style="['baseStyle']">我们爱学习</h2><!-- 无意义 -->
			<h2 :style="getStyle()">我们爱学习</h2>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
					  baseStyle:{background:'#f00'}	
					}
				},
				methods:{
					getStyle(){
						return [this.baseStyle]
					}
				}
				
			})
		</script>
	</body>
</html>

vue案例加减

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- <button type="button" v-on:click="add">+</button>
			<h3>{{count}}</h3>
			<button type="button" v-on:click="sum">-</button> -->
			
			<!-- 简写 -->
			<button type="button" @click="add">+</button>
			<h3>{{count}}</h3>
			<button type="button" @click="sum">-</button> 
		</div>
		<script>
			/* 点击事件
			 v-on 监听事件
			 
			 */
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						count:0
					}
				},
				methods:{//以后所有的vue中的方法都可以写在methods里面
					/* add:function(){
						console.log('add');
					},
					sum:function(){
						console.log('sum');
					} */
					
					add(){
						/* console.log(this); */
					   this.count++
					},
					sum(){
						this.count--
					}
				}
				
			})
			/* 1.v-on 
			2.methods
			3.es5和es6函数的写法 
			4.v-on:click  简写  @click
			*/
		</script>
	</body>
</html>

北风吹画州
关注
vue学习记录
g-LouHH的博客
10-16 227
以下总结都是在自己学习过程中的记录，便于自己回忆 一。Element组件库 可参考：element官网 1.安装 element-ui cnpm i element-ui -s 2. 采用按需引用 cnpm install babel-plugin-component -D 二。 swiper的使用 可参考地址：https://github.com/surmon-china/vue-awesom...
vue使用echarts
Senora的博客
12-01 3586
在vue中使用echarts 1.先创建一个vue项目 2.在项目路径下执行以下命令 3.在main.js文件中引入echarts 4.在页面中使用
vue学习
qq_28353055的博客
12-21 510
数据不实时更新 1.当数据为数组或者对象时， $set(this, 'key', value)可以处理解决 2.可以用watch监听数据变化，如echarts在数据更新时不同步更新 watch: { detailChar () { this.$nextTick(() =&gt; { this.init() }) } },   solt用于...
Vue简明实用教程(14)——Vue的组件
谷哥的小弟
12-20 2194
VUE推荐前端采用 SPA 方式进行开发。在SPA(single page application)方式中，一个应用程序只有一个HTML页面。所以，也倡导一个页面中只有一个Vue的实例。为了实现代码重用提升开发效率，可以根据业务功能将页面划分为不同的组件(component)以便于日后维护与修改。组件是可复用的实例，与Vue实例类似，它拥有自身的data、computed、methods 、生命周期函数。
一、初始Vue
qq_63011146的博客
02-01 711
① 创建一个Vue实例（vue2)： <div id="app"> <!-- 在页面中，通过插值表达式可以直接使用Vue管理的数据。注意： Vue管理的数据是响应式的，所谓响应式，指的是，当前数据发生改变是，会重新渲染页面。 --> <h2>{{msg}}</h2> <p>{{name}}</p> <p>{{age}}</p>
Vue模板语法（上）
鄧旧人博客
09-18 143
Vue模板语法（上） 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 使用AES 加密
qq_42108937的博客
06-15 8389
vue 使用AES 加密
vue使用百度地图（vue-baidu-map）
王等等csdn的博客
08-29 7193
vue使用百度地图，vue-baidu-map
vue使用jsMind（思维导图）
热门推荐
肖晗的博客
07-31 1万+
jsMind是一个显示/编辑思维导图的纯javascript类库，其基于html5的canvas进行设计。我们使用它可能需要在网页上单纯的使用这种图样的效果，而其他交互却是自定义的，我这边选择的是jsMind与网上的一个（右键菜单）。jsmind.menu.js中寻找到定义menu的地方，增加custom自定义属性注自定义的东西肯定需要自定义一个类型或者唯一性的key，让代码知道我点击的是哪一个，所以还需要处理点击事件。寻找对应点击事件与.在里面增加key属性。即和。...
记录一次vue使用jessibuca的视频插件
yumengtingkeai的博客
03-29 3239
jessibuca纯H5直流播放器,兼容几乎所有浏览器，可以运行在 PC、手机、微信中，无需额外安装插件。
关于Vue源码vm.$watch()内部原理详解
11-27
关于vm.$watch()详细用法可以见官网。 大致用法如下: [removed] const app = new Vue({ el: "#app", data: { a: { b: { c: 'c' } } }, mounted () { this.$watch(function () { return this.a.b.c }, this.handle, { deep: true, immediate:
v-if 和 v-show区别
a378113472的博客
08-30 276
1.手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐； 2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换； 3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存...
vue里面的v-for列表循环
stand_forever的博客
03-21 3313
1.v-for可以把数据中的一个数组对应为一组元素 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名 如：&lt;li v-for="item in items"&gt;{{item.text}}&lt;/li&gt;     data:{     items:[         {text:"第一组"}，    ...
Vue中子组件改变父组件的数据解决方法
bob的博客
07-13 975
1.项目中遇到的问题 在项目中，碰到父组件向子组件传一个对象数据，子组件修改props里接受父组件的数据， 父组件的数据也 发生变化的问题，具体的代码如下 Parent.vue <template> <div> <child :infor="infor" :inforLabel="inforLabel"></child> </div> </template> <script> im
Vue笔记一
小罗的博客
04-20 1433
目录 Vue 开始使用Vue 1.初始Vue： 2.Vue模板语法： 3.数据绑定 4.data与el的两种写法： 5.MVVM模型（架构模型） 6.数据代理 7.事件处理 8.计算属性(computed) 9. 监视属性 (watch) 10.computed和watch的区别 11.绑定样式 12.条件渲染 13.key的原理 14Vue数据监测 15.收集表单数据 16.过滤器 17.内置指定 18.自定义指令 19.生命周期 Vue 轻量级，
vue基础语法
Bugxiu_fu的博客
09-17 1513
vue基本模板语法
了解Vue，Vue的基础语法
weixin_67696142的博客
07-14 676
Vue的基础语法
vue自定义组件的坑:数组绑定与引号的使用
Isaac_Play的博客
04-30 809
最近项目闲了下来，想利用空闲时间把工作中常用的代码都一一用vue的组件封装起来，一来加深自己对vue的理解，二来若是真的能在生产环境中直接使用，岂不血赚，但写着写着，发现有些代码出现了莫名其妙的错误 <div class="check-times-item" :class="(item.val == details)?'check-times-item-active':'' " ...
vue——VM对象和基础指令
qq_56668869的博客
08-29 2386
vue、VM对象和基础指令、插值表达式、文本指令、属性绑定
vue使用DPlayer
最新发布
10-31
Vue-DPlayer是一个易于使用、高性能的基于Vue.js的视频播放器组件。它可以帮助你在Vue.js应用程序中实现视频播放功能。你可以通过以下四个方面来了解Vue-DPlayer： 1. 安装Vue-DPlayer并简单使用。 2. 如何在Vue-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值