VUE

最新推荐文章于 2023-04-24 09:53:30 发布

星辰隐耀

最新推荐文章于 2023-04-24 09:53:30 发布

阅读量200

点赞数

本文链接：https://blog.csdn.net/qq_40318250/article/details/100018299

版权

常用指令 v-model

v-model	一般用于表单元素(input)	双向数据绑定
<div id="box">
<input type="text" v-model="msg"/>
{{msg}}
</div>

常用指令 v-if

new Vue({
		el:'#box',
		data:{
			flag:true
		}
	
	});
<div id="box">
	<h1 v-if="flag">你能看到我吗</h1>
</div>

基础事件 v-on:click=“show()”

new Vue({
                el:'#box',
                data:{ //数据
                    arr:['apple','banana','orange','pear'],
                    json:{a:'apple',b:'banana',c:'orange'}
                },
                methods:{  //methods 用来绑定事件的属性
                    show:function(){     //事件触发时所调用的函数
                        alert(1);
                    }
                }
            });
 <div id="box">
        <input type="button" value="按钮" v-on:click="show()">
    </div>

点击事件案例

 new Vue({
                el:'#box',
                data:{ //数据
                    arr:['apple','banana','orange','pear']
},
                methods:{
                    add:function(){
                        this.arr.push('tomato');
                    }
                }
            });
<div id="box">
        <input type="button" value="按钮" v-on:click="add()">
        <br>
        <ul>
            <li v-for="value in arr">
                {{value}}
            </li>
        </ul>
    </div>

显示隐藏指令 v-show=“true/fale”

 window.onload=function(){
            new Vue({
                el:'#box',
                data:{ //数据
                    flag:true
                }
            });
        };
 <div id="box">
<div style="width:100px; height:100px; background: red" v-show=“flag"></div>
    </div>

案例点击隐藏

new Vue({
el: '#box',
data: {
msg:false
},
methods: {
show: function() {
this.msg=true;  //点击更改标记为true  true 代表隐藏
}
}
});
<div id="box">
<button v-on:click="show()">一个按钮</button>
<div style="height: 100px;width: 100px;background: red;" v-show="msg"></div>
</div>

事件对象 event

	new Vue({
		el: '#box',
		methods: {
			show:function(e){
			alert(e.clientX);//鼠标点击的横坐标位置
			alert(e.button);//鼠标哪个键点击了左键是0 右键是1
			}
		   }
		});
	<div id="box">
			<!-- 在vue中通过$event将事件对象传递给函数 -->
		<button type="button" v-on:click="show($event)">按钮</button>
	</div>

事件冒泡

				new Vue({
					el:'#box',
					methods:{
						showDiv:function(){
							alert(1);
						},
						show:function(ev){
							alert(ev);
							//ev.cancelBubble=true; 通过属性阻止冒泡
							ev.stopPropagation(); //调用方法阻止冒泡
						}
					}
				});
		<div id="box">
			<div @click="showDiv()" style="width: 100px;height: 100px;background: red;">
					通过 $event 将事件作为参数传递
				<button id="bt" @click="show($event)">点击按钮</button>
				// <button id=“bt” @click.stop=“show()”>点击按钮</button> vue自带的方式阻止冒泡行为,不用传递事件对象
			</div>
		</div>

阻止事件默认行为

				new Vue({
					el:'#box',
					methods:{
						show:function(ev){
							alert(ev);
							ev.preventDefault();//调用事件对象中的方法,阻止默认行为
						}
					}
				});
			 <div id="box">
				<a href="http:www.baidu.com" @click="show($event)">点击进入</a>
				<!-- vue自带的阻止默认行为 不需要传递事件对象
				 方式2
				 <a href="http:www.baidu.com" @click.prevent="show()">点击进入</a>
				 -->
			</div>

键盘事件

new Vue({
	el:'#box',
	 data:{
	},
	methods:{
		keydown:function(ev){
		 //keyCode是事件对象中的属性可以获取键的编码
		alert("按下了"+ev.keyCode);
		},
		keyup:function(){
			alert("松开了");
		}
	}
});
	<div id="box">
		<input type="text" @keydown="keydown($event)"/><br>
		<input type="text" @keyup="keyup()"/>
	</div>

键盘事件 VUE提供的方式

<div id="box">
			 <!-- VUE给提供了按下enter键的监听事件 -->
			<input type="text" @keydown.enter="enter()"/><br>
			 <!-- VUE给提供了上下左右四个反向的键的事件 
			 回车
				a). @keyup.13
				b). @keyup.enter
				上、下、左、右
				@keyup/keydown.left
				@keyup/keydown.right
				@keyup/keydown.up
				@keyup/keydown.down
			 -->
			<input type="text" @keydown.right="right()"/>
		</div>

标签的属性绑定 v-bind

new Vue({
						el:'#box',
						data:{
							path:'http://www.westos.org/images/logo.png',
							width:'300px',
							height:'300px'
						}
						
					})
		<div id="box">
			<!-- html标签自带属性默认的写法 -->
			<img src="http://www.westos.org/images/logo.png" width="300px" height="300px"/>
			<!-- VUE 绑定html标签自带的属性 -->
			<img v-bind:src="path" v-bind:width="width" v-bind:height="height"/>
			<!-- VUE 绑定标签属性简写方式 -->
			<img :src="path" :width="width" :height="height" />
		</div>

绑定 class属性比较特殊注意语法写法

在这里插入图片描述

绑定style属性也比较特殊注意语法

在这里插入图片描述

模板 {{msg}}

	{{msg}}        数据更新模板变化
	 <span v-once>{{msg}}</span> 	数据只绑定一次 使用 v-once指令
	
new Vue({
					el: '#box',
					data: {
						msg: 'hello'
					}
				});
<div id="box">
			<input type="text" v-model="msg" />
			<span>{{msg}}</span> 数据更新,模板会跟着更新
			<span v-once>{{msg}}</span> 数据只渲染一次,不会跟着更新
			</div>

过滤器 filters:{}

在这里插入图片描述

Vue的生命周期方法

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

v-text和v-html 指令

<div id="box">
			<!-- 和下面这种写法一样 -->
			<span>{{msg}}</span>
			<span v-text="msg"></span>
			<!-- 转义html标签 -->
			<span v-html="message"></span>
</div>

<script type="text/javascript">
			window.onload = function() {
				new Vue({
					el: '#box',
					data: {
						msg: 'hello',
						message: '<h1>一行标题文本</h1>'
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="box">
			<!-- 和下面这种写法一样 -->
			<span>{{msg}}</span>
			<span v-text="msg"></span>
			<!-- 转义html标签 -->
			<span v-html="message"></span>
		</div>
	
	</body>

计算属性 computed!

var vm = new Vue({
					el: '#box',
					data: {
						a: 100
					},
					computed: { //计算属性
						b: {  //b 就是一个属性,放在 computed里面可以写业务逻辑 而放在data里面不能写具体的业务逻辑
							get: function() {
								return 12 * 3; //返回b的结果 这个结果就是b最终的值
							},
							set: function(value) {
								//alert(value);
								this.a = value; //接收b的值 设置给a
							}
						}
					},
					mounted:function(){//数据更新完毕后,给属性b 设置值
						this.b=123; //给b赋值时 set方法就会执行,并把123传过去
					}
				});
			}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-resource.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				var vm = new Vue({
					el: '#box',
					data: {
						a: 100
					},
					computed: { //计算属性
						b: {  //b 就是一个属性,放在 computed里面可以写业务逻辑 而放在data里面不能写具体的业务逻辑
							get: function() {
								return 12 * 3; //返回b的结果 这个结果就是b最终的值
							},
							set: function(value) {
								//alert(value);
								this.a = value; //接收b的值 设置给a
							}
						}
					},
					mounted:function(){//数据更新完毕后,给属性b 设置值
						this.b=123; //给b赋值时 set方法就会执行,并把123传过去
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="box">
			{{a}}
			{{b}}
		</div>
	</body>
</html>

Vue对象中的一些全局属性和方法vm. $e l 和 v m .$ data

<script type="text/javascript">
			window.onload=function(){
				var vm=new Vue({
					el:'#box',
					data:{
						msg:'hello'
					}
				});
				// vm.$el 获取 div元素 的dom对象
				vm.$el.style.background='red';
				//vm.$data 获取data对象
				alert(vm.$data.msg);
			}
		</script>
	</head>
	<body>
		<div id="box">
			{{msg}}
		</div>
	</body>

Vue对象中的一些全局属性和方法 vm.$mount(‘#box’); 手动挂载标签元素

我们不写 el 来找一个元素,调用方法,也可以挂载一个html元素
                     <script type="text/javascript">
			window.onload=function(){
				var vm=new Vue({
					data:{
						msg:'hello'
					}
				});
				//我们没有提供 el:'#box', 可以通过方法手动挂载
				vm.$mount('#box');
			
			}
		</script>
	</head>
	<body>
		<div id="box">
			{{msg}}
		</div>
	</body>

使用自定义属性或函数vm.$options

<script type="text/javascript">
			window.onload=function(){
				var vm=new Vue({
					mydata:100, //这个属性是我们自定义的
					myFn:function(){
						alert('自定义了一个函数');
					},
					data:{
						msg:'hello'
					}
				});
				//我们没有提供 el:'#box', 可以通过方法手动挂载
				vm.$mount('#box');
				//vm.$options.mydata 获取自定义属性的值
				alert(vm.$options.mydata);
				//调用自定义函数
				vm.$options.myFn();
			
			}
		</script>
	</head>
	<body>
		<div id="box">
			{{msg}}
		</div>
	</body>

星辰隐耀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE

常用指令 v-modelv-model 一般用于表单元素(input) 双向数据绑定<div id="box"><input type="text" v-model="msg"/>{{msg}}</div>常用指令 v-ifnew Vue({ el:'#box', data:{ flag:true } });<di...
复制链接

扫一扫