前言

本文纯属自己学习vue的笔记，如果有任何错误欢迎大神指出！

文本渲染

通过span标签我们可以渲染文本，可以直接写<span>文本</span>，也可以通过<span>{{变量名}}</span>进行数据绑定

<template>
  <span>{{message}}</span>
</template>

<script>
  export default {
    name: 'test',
    data () {
      return {
        message: 'hello vue'
      }
    }
  }
</script>

span

监听点击事件

通过v-on添加一个点击的监听器

<template>
  <div class="container">
    <span>{{message}}</span>
    <button v-on:click="changeText">点击改变文字</button>
  </div>
</template>

<script>
  export default {
    name: 'test',
    data () {
      return {
        message: 'hello vue!'
      }
    },
    methods: {
      changeText () {
        this.message = 'lxt'
      }
    }
  }
</script>

click

if判断

通过v-if="布尔值"来决定是否显示

<template>
  <div class="container">
    <span v-if="flag">通过if判断是否显示</span>
    <button class="btn" v-on:click="changeFlag">点击我改变flag</button>
  </div>
</template>

<script>
  export default {
    name: 'test',
    data () {
      return {
        flag: true
      }
    },
    methods: {
      changeFlag () {
        this.flag = !this.flag
      }
    }
  }
</script>

if判断.gif

for循环

我们可以通过v-for来渲染列表

<template>
  <div class="container">
    <ol>
      <li class="li" v-for="item in items">
        {{item.text}}
      </li>
    </ol>
  </div>
</template>

<script>
  export default {
    name: 'test',
    data () {
      return {
        items: [
          {text: 'hello vue'},
          {text: '来吧，学习for循环吧'},
          {text: '渲染完毕'},
        ]
      }
    }
  }
</script>

<style>
  .container {
    flex-direction: column;
    display: flex;
    align-items: center;
  }

  .li {
    text-align: start;
  }
</style>

for

input双向绑定

通过v-model可以轻松实现表单输入和应用状态之间的双向绑定

<template>
  <div class="container">
    <span>{{message}}</span>
    <input v-model="message"/>
    <button v-on:click="changeText">点击改变文字</button>
  </div>
</template>

<script>
  export default {
    name: 'test',
    data () {
      return {
        message: 'hello vue!'
      }
    },
    methods: {
      changeText () {
        this.message = 'lxt'
      }
    }
  }
</script>

v-model