返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

HTML页面中使用Vue实例进阶（快速学会上手Vue）

2023-02-12 09:38:14
目录
Vue框架的两种使用方式HTML页面中简单使用Vue 点击事件键盘事件 鼠标移动事件 事件修饰符 V-text和V-htmlV-bindV-for遍历对象数组V-modelv-show和v-if

Vue是用于构建用户界面的渐进式JavaScript框架。特色：构建用户界面—数据变成界面；渐进式—Vue可以自底向上逐层的应用。

Vue有两种使用方式，一种实在html中直接使用Vue做开发，一种是企业级的单页面应用。后者是主流的使用方式，真正项目中很少使用前一种方式。前一种方式通过在大家熟悉的HTML环境中使用Vue，大家很容易去了解和熟悉VUE。

Vue框架的两种使用方式

1、单页面应用：使用Vue>

2、传统多页面应用：通过script引入Vue.js

HTML页面中简单使用Vue

首先在head中引入vue的文件

然后在body中写上一个带有id的div

首先创建一个new>

{{变量名称}}用来在页面上展示数据

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>快速入门</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         {{shuju}}
         {{NUMBER*10}}
         {{falese?"ok":"no"}}
      </div>
   </body>
   <script>
      new Vue(
            {
               el:"#app",
               data:{
                  shuju:"hello 陈小姐",
                  NUMBER: 10,
               }
            }
      );  
   </script>
</html>

 点击事件

首先定义一个button按钮>

定义一个methods :{ } 和data是一个级别的 , 然后你刚才定义的方法名:function(){ }

然后在方法体中 , 写出你要执行的语句

另外上面的func(‘哈哈哈’) 这个哈哈哈就是方法的一个参数 ,

然后function(msg ){} msg与上文中的哈哈哈对应 , 然后我们把msg赋值给messge , 所以message就显示为哈哈哈了

<body>
		<div id="app">
			{{message}}
			<button v-on:click="func('哈哈哈哈')" id="mybotton">vue的onclick</button>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				message:"hello"
			},
			methods:{
				func:function (msg) {
					alert("陈小姐 , 你愿意做我女朋友吗?")
					this.message=msg;
				}
			}
		});
	</script>

键盘事件

和上面的点击事件一样>

另外$event 与下文中的event是一个对象 , 也就是与我们传统JS中的event中的对象是一样的

然后我们定义一个变量 , 也就是代表每一个按键的Unicode编码 , 然后我们可以不让键盘起作用 , 使用event.preventDefault() 这样就可以阻止键盘起作用 ;

<body>
		<div id="app">
			<input type="text" v-on:keydown="fun($event)">
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				meg:"这是一段无敌的代码"
			},
			methods:{
				fun:function (event) {
					/*event是vue事件对象 和我们传统JS中的event对象是一样的*/
					var keyCode = event.keyCode;
					if (keyCode<48||keyCode>57){
						//不让键盘的按键起作用
						event.preventDefault();
					}
					alert("我就是喜欢你");
				}
			}

		});
	</script>

 鼠标移动事件

定义事件的操作和上面的操作没有什么区别>

然后还有一个阻止事件传播 , 及时这个文件域是定义在div中的 , 所以移动到文件域就相当于移动到了div中 ,所以我们需要在文件域的函数中阻止事件传播

 event.stopPropagation();

<body>
   <div id="app">
      <div v-on:mouseover="fun1" id="div">
         <textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
      </div>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      methods:{
         fun1:function () {
         alert("这是一个div区域");
         },
         fun2:function (event) {
         alert("这是一个文件域");
         event.stopPropagation();
         }
      }
   });
</script>

 事件修饰符

这个就是在提交表单的时候>

然后我们在创建一个Vue对象 , 这样我们就可以对这个表单进行控制了

<body>
   <div id="app">
      <form @submit.prevent action="http://www.itheima.com" method="get">
         <input type="submit" value="点点我进行提交">
      </form>
   </div>
</body>

<script>
   new Vue({
      el:"#app"
   });
</script>

 V-text和V-html

两者之间的区别就是V-text不会去解析等各种HTML标签> 

<body>
   <div id="app">
      <div v-text="message"></div>
      <div v-html="message"></div>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{
         message:"<h1>陈小姐 , 做我女朋友吧 !<h1>"
      }
   });
</script>

V-bind

插值表达式不能作用于HTML标签的属性取值> 

<body>
   <div id="app">
      <font v-bind:color="c1">我是一个小逗比</font>
      <hr>
      <font v-bind:color="c2">我是一个大逗逼</font>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{
         c1:"green",
         c2:"blue"
      }
   });
</script>

V-for

首先在vue中定义一个数组让我用来遍历> 

<body>
   <div id="app">
      <li v-for="(item) in arr">{{item}}</li>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{
         arr:['陈','小','姐','我','喜','欢','你'],
      }
   });
</script>

遍历集合

<body>
   <div id="app">
      <li v-for="(k,v) in stu">{{v}}={{k}}</li>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{
         stu:{
            id:1,
            name:"张三丰",
            age:"100",
            height:"173"
         }
      }
   });
</script>

遍历对象数组

<body>
   <div id="app">
      <table border="1px">
         <tr>
            <td>ID</td>
            <td>name</td>
            <td>age</td>
         </tr>
         <tr v-for="(stu,index) in stus">
            <td>{{stu.id}}</td>
            <td>{{stu.name}}</td>
            <td>{{stu.age}}</td>
         </tr>
      </table>

   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{
         stus:[
            {id:1, name:"张三丰", age:"100"},
            {id:2, name:"科比", age:"40"},
            {id:3, name:"张帅", age:"25"}
         ]
      }
   });
</script>

V-model

v-model就是可以取出一些对象格式的数据> 

<body>
   <div id="app">
      <form action="#" method="post">
         <input type="text" v-model="user.username">
         <br>
         <input type="password" v-model="user.password">
      </form>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{
         user:{
            username:"张无忌",
            password:"1234"
         }
      }
   });
</script>

v-show和v-if

show和if其实没有太大区别> 

<body>
   <div id="app">
      <span v-if="show">你好啊</span>
      <hr>
      <span v-show="show">今天天气不错</span>
   </div>
</body>
<script>
new Vue({
   el:"#app",
   data:{
      show:true
   }
});
</script>

到此这篇关于HTML页面中使用Vue（快速学会上手YUE）的文章就介绍到这了,更多相关HTML中使用Vue内容请搜索易采站长站以前的文章或继续浏览下面的相关文章希望大家以后多多支持易采站长站！

相关文章 大家在看