vue学习（一）

最新推荐文章于 2024-10-07 19:45:00 发布

落叶～远行

最新推荐文章于 2024-10-07 19:45:00 发布

阅读量151

点赞数 2

文章标签： vue.js html

本文链接：https://blog.csdn.net/qq_45444918/article/details/108108827

版权

Vue的学习（一）

一、Vue的使用

1.1 使用实例化对象赋值

<!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">
			hello:{{name}}
			
		</div>
		
		<script>
			let vm = new Vue({
				el: "#app",
				data:{
					name:"zs",
				}
			})
		</script>
	</body>
</html>

1.2 双向绑定

<div id = "app">
			hello:{{name}}
			<br />
			<input v-model="name" />
			
		</div>
		
		<script>
			let vm = new Vue({
				el: "#app",
				data:{
					name:"zs",
				}
			})
		</script>

二、文本渲染

v-text：更新元素的innerText
v-html：更新元素的innerHTML
v-once：静态插值
v-pre：原格式输出
v-cloak：指令保持在元素上直到关联实例结束编译

<!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">
			<div>{{message}}</div>
			<div v-text="message1"></div>
			<div v-html="message2"></div>
			<div v-once="message3"></div>
			<div v-pre="message4">{{message4}}</div>
			<div v-cloak="message5">{{message5}}</div>
		</div>
		
		<script>
			var vm = new Vue({
				el: "#app",
				data:{
					message:"文本渲染",
					message1:"this is <i>v-text</i>",
					message2:"this is <i>v-html</i>",
					message3:"this is <i>v-once</i>",
					message4:"文本渲染",
					message5:"文本渲染",
				}
			})
		</script>
	</body>
</html>

在Vue中，我们可以使用{{}}将数据插入到相应的模板中，这种方法是一种文本插值。

三、属性绑定

vue中常用的属性绑定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="demo">
			<!-- 将div中的title属性和vue实例的相关字段进行绑定，
			第一种写法是完整语法，第二种是缩写方式，比较常用-->
			<div v-bind:title="title1">绑定</div>
			<div :title="title2">绑定</div>
			<!-- 对象绑定 如果对应style为false,则不执行-->
			<div :class="{active:isActive,'text-danger':hasError}">给class绑定一个对象，动态切换</div>
			<div :class="{active:isActive,'textDanger':!isActive}">给class绑定一个对象，动态切换</div>
			<div :class="classObj">给class绑定一个对象，动态切换</div>
	
		</div>
		<script>
			var vm = new Vue({
				el:"#demo",
				data:{
					title1:"html",
					title2:"css",
					isActive:true,
					hasError:true,
					classObj:{
						"textColor":true,
						"textSize":false,
					}
				},
				
			})
		</script>
	</body>
</html>

四、事件处理

我们可以用 v-on 简写为 & 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		 <div id="demo">
			 <!--点击+1-->
			<button @click="counter += 1">{{counter}}</button>
			<!--点击加字符串-->
			<button v-on:click="cl">{{message}}</button>
			<!--点击弹窗输出字符串-->
			<button @click="say('hi')">内联语句</button>
		</div>
		<script>
			var demo = new Vue({
				el:'#demo',
				data:{
					message: "hello",
					counter:0,
	　　　　　　　　　　test:''
				},
				methods:{
					cl(){
						this.message = this.message + ' vue!';
					},
	　　　　　　　　　　say(message){
			  　　　　　　　this.test = message;
			  　　　　　　　alert(this.test);
			　　　　　},
				}
			})
		</script>    
</body>
</html>

五、条件渲染

5.1 v-if

v-if主要用于条件渲染

<!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">
			<div id = "person">
				
				<p v-if = "before">张三</p>
				<p v-if = "after">李四</p>
				
			</div>
		</div>
		
		<script>
			let vm = new Vue({
				el: "#person",
				data:{
					before:true,
					after:false
				},
			})
		</script>
	</body>
</html>

结果为：张三

总结：值为true时进行渲染，为false时页面不会渲染。

5.2 v-else和 v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <p v-if="message">hello</p>
        <button @click="A">点我</button>
        <div v-if="type === 1">A</div>
        <div v-else-if="type === 2">B</div>
        <div v-else-if="type === 3">C</div>
        <div v-else>D</div>
        <button @click="B">点我</button>
    </div>
    <script>
        var demo1 = new Vue({
            el:'#demo',
            data:{
                message:true,
                type:0
            },
            methods:{
                A:function(){
                    this.message=false
                },
                B(){
                    if(this.type > 6){
                        this.type = 1;
                    }else{
                        this.type++;
                    }
                },
            }
        })
    </script>        
</body>
</html>

5.3 v-if和v-show

<body>
    <div id="demo">
        <p v-show="message">message</p>
        <p v-show="infor">infor</p>
    </div>
    <script>
        var demo1 = new Vue({
            el:'#demo',
            data:{
                message:true,
                infor:false
            },
        })
    </script>    
</body>

六、循环指令

循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应的内容。它可以遍历数组类型以及对象类型的数据，js 里面的数组本身实质上也是对象，这里遍历数组和对象的时候，方式相似但又稍有不同。

数组遍历 可选参数有属性值和索引值value/index;

对象遍历 可选参数包括属性值、索引值和属性名value/index/key。

<!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 = "demo">
			
			<!-- 数组遍历-->
			<ul>
				<li v-for = "item in title" >{{item}}</li>
			</ul>
			<!-- 数组遍历带索引-->
			<ul>
				<li v-for="(item,index) in title">{{index}}---{{item}}</li>
			</ul>
			<!-- 对象遍历-->
			<ul>
				<li v-for= "(item,key,index) in object">{{index}}---{{key}}---{{item}}</li>
			</ul>
		</div>
		<script>
			var demo = new Vue({
				el:"#demo",
				data:{
					title:['全职高手','一人之下','秦时明月'],
					
					object:{
						vname:"全职高手",
						pname:"君莫笑",
						psort:"散人"
					}	
				},
				
			})
		</script>
	</body>
</html>