• 欢迎光临~

Vue学习笔记

开发技术 开发技术 2022-09-23 次浏览

模板语法

条件渲染

列表渲染

//使用v-for指令

<template>
  <div>
    <ul>
    <li v-for="item in newsList" :key="item.id">
      {{item.title}}
    </li>
  </ul>


  </div>
 

</template>


<script>
  export default{
    name: 'hello_world',
    data(){
      return {
        newsList:[
          {
            id:1001,
            title:"今日新闻1"
          },
          {
            id:1001,
            title:"今日新闻1"
          },
          {
            id:1001,
            title:"今日新闻1"
          },
          {
            id:1001,
            title:"今日新闻1"
          },
          {
            id:1001,
            title:"今日新闻1"
          }
        ]

      }
    } 
  }

</script>

维护状态

也就是vue只渲染发生了变动的元素,没有变的元素就不渲染,这样比js更加的高效

但是要给vue一个提示,好跟踪每个结点的身份,用的是下面的:key这个语法

<div v-for=" xxx" :key="item.id">

事件处理

监听事件

//v-on(可以缩写成@)
<button @click="counter +=1">点击增加一个计数</button>
//点击这个按钮counter这个东西就加一

但是这个东西呢,只能触发一次,不太灵活,所以我们想着能不能,点击的时候直接触发一个函数,这样就能干很多事情了

这里的话只要在export default 里面增加一个methods:{}里面写入函数就可以了



<template>
  <div>
    <button @click="counter +=1">点击增加一个计数</button>
    {{counter}}
    <br>
    <button @click="click">施鲫鱼</button>
  </div>
 

</template>


<script>
 export default{
  data(){
    return {
      counter:0,
    }
  },
  methods: {
    click(){
      console.log("杂毛是");
    }
  }
 }

</script>
程序员灯塔
转载请注明原文链接:Vue学习笔记
喜欢 (0)