HTML页面中简单使用Vue

最新推荐文章于 2024-09-11 08:34:15 发布

老婆就是要败家

最新推荐文章于 2024-09-11 08:34:15 发布

阅读量8.7k

点赞数 6

分类专栏：前端文章标签： vue html javascript jquery js

本文链接：https://blog.csdn.net/qq_45014905/article/details/107369549

版权

这篇博客介绍了如何在HTML页面中使用Vue，包括Vue的入门案例、插值表达式、事件处理、DOM操作如V-text和V-html的区别，以及V-bind、V-for、V-model和条件渲染v-show/v-if的使用方法。

摘要由CSDN通过智能技术生成

Vue入门案例

<!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>

首先在head中引入vue的文件

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

然后在body下面写上一段逻辑代码 , 用

首先创建一个new Vue对象 , 一个中括号 , 然后创建一个{} , 中间书写一个el : #id 选中这个div , 然后书写数据展示区域data:{ } 括号中定义数据变量 , 以及变量的值

插值表达式

就是用来在页面上展示数据用的

{
  {变量名称}}

点击事件

<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>

首先定义一个button按钮 , v-on: click=“func”

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

然后在方法体中 , 写