5、VUE基础API

概要

1. VUE模板语法
   1. 文本
   2. 原始HTML
2. 条件渲染
   1. v-if
   2. v-else-if
   3. v-else
3. 列表渲染
4. 事件处理
5. 表单输入绑定

   1、VUE模板语法

   a、文本

   <!-- 文本 -->
   <p>我是：{{ name }}</p>
   <script>
   export default {
    data() {
      return {
        name: "deepsea",
      };
    },
   };
   </script>
   

   b、原始HTML

   双大括号会将数据解释为普通文本，而非html代码。为了输出真正的html，需要使用v-html指令： ```vue

<a name="WmZVs"></a>
## 2、条件渲染
`v-if`指令用于条件性的渲染一块内容，这块内容只会在指令的表达式返回true的时候被渲染
```vue
<p v-if="age >= 24">可以结婚</p>

也可以用v-else添加一个 else块：

<p v-if="age >= 24">可以结婚</p>
<p v-else>不能结婚</p>

3、列表渲染

用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用 item in items形式的特殊语法，其中的items是源数据数组，而item则是被迭代的数组元素的别名。

<div>
  <ul>
    <li v-for="(item, index) in names" :key="index" @click="clickItemHandle(item)">
      {{ item }}
    </li>
  </ul>
</div>

<script>
  export default {
    data() {
      return {
        names: ["张三", "李四", "王五"]
      };
    },
  };
</script>

4、事件处理

可以用v-on指令监听dom事件，并在触发时运行一些JS代码。

<!-- 事件处理 -->
<div>
  <!-- <button v-on:click="clickhandle()">按钮</button> -->
  <button @click="clickhandle">按钮</button>
</div>

<script>
export default {
  data() {
    return {
      name: "1",
      alink: "<a href='https://www.baidu.com'>百度</a>",
      age: 60,
      names: ["张三", "李四", "王五"],
      msg: "",
    };
  },
  methods: {
    clickhandle() {
      this.names.push("赵六");
    },
    clickItemHandle(name) {
      console.log(name);
    },
  },
};

5、表单输入绑定

用v-model指令在表单元素上创建双向数据绑定。

<!-- 表单输入绑定 -->
<div>
  <input type="text" v-model="msg" />
  <p>{{ msg }}</p>
</div>

<script>
export default {
  data() {
    return {
      name: "1",
      alink: "<a href='https://www.baidu.com'>百度</a>",
      age: 60,
      names: ["张三", "李四", "王五"],
      msg: "",
    };
  },
  methods: {
    clickhandle() {
      this.names.push("赵六");
    },
    clickItemHandle(name) {
      console.log(name);
    },
  },
};
</script>