三个小案例来感受一下Vuejs的魅力

技术2025-03-12 56

使用三个小案例来感受一下Vuejs的魅力。

1、Hello Vuejs

<body> <div id="app">{{message}}</div> <script src="../js/vue.js"></script> <script> const app = new Vue({ //用于要挂载要管理的元素 el: '#app', data: { //定义数据 message: 'Hello Vuejs' } }) </script> </body>

可以看到，我们首先创建了一个Vue对象。并且在创建对象的时候，我们传入了一些options：{}。

el属性：该属性决定了我们所创建的Vue对象挂载到哪一个元素中。这里，我们是挂载到了id为app的元素上；data属性：该属性通常会存储一些数据。这些数据可以是我们自定义出的，也可以是从服务器上加载的。

2、Vue列表显示

现在我们使用Vue来展示一个更加复杂的数据：数据列表。

<div id="app">  <ul> <li v-for="item in movies">{{item}}</li> </ul> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { // 列表展示，要在data中定义一个数组 movies:['星际穿越','大话西游','海王'] } }) </script> </body>

可以看到，我们在data属性中定义了一个数组movies，用来存储电影列表。在HTML代码中我们通过v-for指令对数组进行遍历。

3、计数器

<div id="app">   计数器:{{counter}} <br> <button v-on:click="increment">+</button> <button v-on:click="decrement">-</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { counter:0 }, methods:{ increment(){ this.counter++ }, decrement(){ this.counter-- } } }) </script> </body>

该案例中，options中使用了新的指令和属性。

新的属性：methods，该属性用于在Vue对象中定义方法；新的指令：v-on:click，该指令用于监听某个元素的点击事件，并且需要制定当发生点击时所执行的方法，执行的方法通常在methods中定义。

Processed: 0.008, SQL: 9