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

1、 声明式渲染

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

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

输出结果为：Hello Vue!

2、条件与循环

v-if 切换一个元素是否显示

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

<script>
export default {
  name: "App",
  data() {
    return {
      message: "Hello Vue!"
      seen:"ture"
    };
  }
};
</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>

3、事件绑定

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(){
      alert("触发了"),
      this.message = this.message.split('').reverse().join('')
    }
  }
  </script>

3、双向绑定

v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<template>
	<input type="text" v-model="model">
</template>

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