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

最新推荐文章于 2022-11-20 18:18:42 发布

亮晶晶_

最新推荐文章于 2022-11-20 18:18:42 发布

阅读量193

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42146583/article/details/107120398

版权

使用三个小案例来感受一下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标签-->
  <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">
<!--  要实现的功能是：点击按钮+，计时器加1，点击按钮-，计数器减一 -->
<!--  根据需求，需要两个按钮,按钮要监听点击事件-->
  计数器:{{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中定义。

亮晶晶_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三个小案例来感受一下Vuejs的魅力

使用三个小案例来感受一下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:
复制链接

扫一扫