vue简单使用一（vue的声明）

twx95

于 2024-04-11 14:49:09 发布

阅读量311

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_41670405/article/details/137637252

版权

本文详细介绍了如何在HTML中引入Vue.js并创建一个简单的Vue应用，包括元素选择器、数据绑定和方法定义。通过实例展示了如何声明变量和定义方法，以及在按钮点击事件中动态更新数值。

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

首先引入vue的js文件：

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

vue.js文件去vue官网下载即可

html代码

<div class="vuePro"><div>

vue的属性信息都得放在这个标签下面哪怕是同级也是不行的，不然无法正常使用

js代码：

<script>
    new Vue({
       el:".vuePro", // 这里跟上面标签中的class类名一致
       data:{},   // 声明和赋值变量
       methods:{}  // 方法函数在这里声明使用
    })
</script>

class类名的写法

id的写法：

声明一个msg变量，赋值为hello vue

结果：

定义一个方法，每次点击按钮就会加一：

带参数的方法：

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Title</title>
</head>
<body>
    <div class="vuePro">
         <div>{{msg}}</div>
         <div>{{num}}</div>
         <button @click="md">点击加一</button>
        <button @click="md2(5)">点击加五</button>
    </div>
</body>
<script>
    new Vue({
        el:".vuePro",
        data:{
           msg:"hello vue",
           num:1
        },
        methods:{
            md(){
                this.num++;
            },
            md2(param){
                this.num+=param;
            }
        }
    })
</script>
</html>