Vue.js

最新推荐文章于 2024-07-22 15:13:59 发布

xxyyyyyyyy

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量53

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_64253261/article/details/130185400

版权

一、vue.js

vue.js可以实现js中的数据与网页中的标签的数据进行双向绑定，即一方改变，另一方也随之改变

二、hello vue

1.导入vue.js文件
代码如下：

<script src="js/vue.js" type="text/javascript">
    </script>

在body中

<body>
     
        <div id="textArea" >
            <input type="text" v-model="message2"/>
            <p>{{message2}}</p>
        </div>
        
        <script type="text/javascript">
            
            var textArea=new Vue({
                el: '#textArea',
                data: {
                    message2: ''
                }
            })
        </script>
        
    </body>

三、格式

	new Vue({
			el: '#showArea',
			data: {
				以键值对形式存在
			},
			methods:{
				方法名(){
					方法体
				},
				... ...
			}
		})

四、vue指令

vue指令都以v-开头

      1.v-html:可以解析标签
      2.v-text:不可解析标签
      	v-html和v-text都会覆盖标签内容，取出变量值
      3.v-show:设置是否显示，值有true和false
      4.v-if:通过直接操作DOM对象来控制页面是否显示
      5.v-model:只能在input和表单中使用，可将输入框的value属性值与vue中的data相绑定
      6.v-on:为元素绑定事件，可简写为@

代码如下：
v-text和v-html指令

<!DOCTYPE html>
<!-- v-text和v-html指令 -->
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<!-- 导入vue.js文件 -->
	<script src="js/vue.js" type="text/javascript">
	
	</script>
	<body>
		<div id="showArea">
			{{ message }}
			<p v-text="message1"></p>
			<p v-html="message1"></p>
		</div>
		<div id="textArea" >
			<input type="text" v-model="message2"/>
			<p>{{message2}}</p>
		</div>
		
		
		<script type="text/javascript">
			var showArae=new Vue({
				el: '#showArea',
				data: {
					message1: 'hello vue'
				}
			})
			
			var textArea=new Vue({
				el: '#textArea',
				data: {
					message2: ''
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

v-model指令

<!DOCTYPE html>
<!-- v-model指令 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<!-- 导入vue.js文件 -->
	<script src="js/vue.js" type="text/javascript">
	</script>
	
	<body>
		
		<div id="textArea" >
			<input type="text" v-model="message2"/>
			<p>{{message2}}</p>
		</div>
		
		<script type="text/javascript">
			
			var textArea=new Vue({
				el: '#textArea',
				data: {
					message2: ''
				}
			})
		</script>
		
	</body>
</html>

在这里插入图片描述
v-show和v-on指令

<!DOCTYPE html>
<!-- v-show和v-on指令 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<!-- 导入vue.js文件 -->
	<script src="js/vue.js" type="text/javascript">
	</script>
	
	<body>
		
		<div id="showArea" >
			<input type="text" v-on:click="test()" v-show="isShow"/>
			<input type="button" value="隐藏" @click="test1()" /> 
		</div>
		
		<script type="text/javascript">
			
			var textArea=new Vue({
				el: '#showArea',
				data: {
					message: '',
					isShow: true
				},
				methods:{
					test(){
						alert("aaa");
					},
					test1(){
						this.isShow=false;
					}
				}
			})
		</script>
		
	</body>
</html>

在这里插入图片描述
点击隐藏按钮后：

v-if指令

<!DOCTYPE html>
<!-- v-if指令 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<!-- 导入vue.js文件 -->
	<script src="js/vue.js" type="text/javascript">
	</script>
	
	<body>
		
		<div id="textArea" >
			<input type="text" v-model="message" v-if="age>18"/>
			<p>{{message}}</p>
		</div>
		
		<script type="text/javascript">
			
			var textArea=new Vue({
				el: '#textArea',
				data: {
					message: '',
					age:20
				}
			})
		</script>
		
	</body>
</html>

age=10时
在这里插入图片描述