Vue vuecli4.x使用声明式渲染、条件与循环、事件绑定、双向绑定基础用法

声明式渲染

<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: "Hello Vue!"
    };
  }
};
</script>

条件与循环

v-if

<template>
  <div v-if="seen">{{message}}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: "Hello Vue!",
      seen:true
    };
  }
};
</script>

v-for

<template>
  <div>
      <ul>
        <li v-for="item in todos" :key="item.text">{{ item.text }}</li>
      </ul>
   </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      todos: [
        { text: "学习 JavaScript" },
        { text: "学习 Vue" },
        { text: "整个牛项目" }
      ]
    };
  }
};
</script>

事件绑定

v-on:click或@click

<template>
	<div>{{message}}</div>
	<button v-on:click="reverseMessage">反转消息</button>
 // <button @click="reverseMessage">反转消息</button>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: "Hello Vue!"
    };
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message
        .split("")
        .reverse()
        .join("");
    }
  }
};
</script>

双向绑定

v-model

<template>
  <input v-model="message" />
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: ""
    };
  }
};
</script>