Vue框架---初识vue案例

最新推荐文章于 2024-10-06 12:22:30 发布

Amo@骄纵

最新推荐文章于 2024-10-06 12:22:30 发布

阅读量567

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wdfxfff/article/details/122905428

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.开发环境：idea

2.导入vue.js文件

在head头部进行导入

<script src="./js/vue.js"></script>

注意自己的js文件位置。

3.第一个案例，hello vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

   <div id="app">
       {{message}}
   </div>

 <script>
     //let变量，const常量
     var vm=new Vue({
         el: "#app",//需要管理的元素
         data:{//定义数据
             message:"hello,vue"
         }
     });
 </script>

</body>
</html>

4.第二个案例，列表展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    <ul>
        <li v-for="item in items">{{item}}</li>
    </ul>
</div>

<script>
    //let变量，const常量
    var vm=new Vue({
        el: "#app",//需要管理的元素
        data:{//定义数据
            items:['hello','vue','welcome','you','join','us','!']
        }
    });
</script>

</body>
</html>

5.第三个案例，计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
   <h2>当前计数：{{counter}}</h2>
    <!--<button v-onclick="counter++">+</button>
    <button v-onclick="counter&#45;&#45;">-</button>-->
    
   <!-- <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>-->

    <button @click="add">+</button>
    <button @click="sub">-</button>
</div>

<script>
    //let变量，const常量
    var vm=new Vue({
        el: "#app",//需要管理的元素
        data:{//定义数据
            counter:0
        },
        methods:{
            add:function () {
                console.log("add被执行")
                this.counter++
            },

            sub:function () {
                console.log("sub被执行")
                this.counter--
            }
        }
    });
</script>
</body>
</html>