Vue入门第二章 (知识点附带详细代码）

优快云话题挑战赛第2期
参赛话题：学习笔记

目录

一、v-text v-html v-prev

二、v-for

三、v-for：“key”

四、计算属性

五、双向绑定 v-model

每日一句

---

一、v-text v-html v-prev

1. v-html: 快速设置 innerHTML 属性的值, 被解析成HTML
2.  v-text: 快速设置 innerText 属性的值, 纯文本展示
3. v-pre: 不解析vue语法

<template>
  <div>
    <!-- 指令: vue提供的一些属性 -->
    <!-- v-html: 快速设置 innerHTML 属性的值, 被解析成HTML -->
    <p v-html="words"></p>
    <!-- v-text: 快速设置 innerText 属性的值, 纯文本展示 -->
    <p v-text="words"></p>
    <hr />
    <!-- {{}}: 是vue的语法 -->
    <div>{{ 8 + 8 }}</div>
    <!-- v-pre: 不解析vue语法 -->
    <div v-pre>{{ 8 + 8 }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      words: '<h1>Hello World!</h1>',
    }
  },
}
</script>

<style lang="scss" scoped></style>

二、v-for

1. 核心操作: 数组数据 转 HTML 代码
2. v-for: 自动遍历数组, 生成元素
3. 在vue中 of 和in 没有区别
4. 下标语法：(值, 序号) in/of 数组
5. 支持遍历数字：

   <button v-for="n in 10">{{ n }}</button>

<template>
  <div>
    <!-- 核心操作: 数组数据 转 HTML 代码 -->
    <ul>
      <!-- 作者借鉴了 JS的 for...in 遍历语法, 融入到HTML -->
      <!-- JS中:  for(const x in names){} -->
      <!-- v-for: 自动遍历数组, 生成元素 -->
      <li v-for="x in names">{{ x }}</li>
    </ul>

    <!-- for..of 语法同效果, 无差异 -->
    <!-- 在vue中 of 和in 没有区别, 选你喜欢的 -->
    <button v-for="bin of names">{{ bin }}</button>

    <!-- 下标语法 -->
    <hr />
    <!-- (值, 序号) in/of 数组 -->
    <!-- 注意: in/of 左右的空格是必须的 -->
    <button v-for="(x, i) in names">{{ i }} - {{ x }}</button>

    <!-- 支持遍历数字 -->
    <hr />
    <button v-for="n in 10">{{ n }}</button>
    <hr />
    <button v-for="n in 10">{{ n * 5 }}</button>
  </div>
</template>

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

<style lang="scss" scoped></style>

三、v-for：“key”

1. Vue会尽量复用之前相同 key值的DOM元素, 最大程度减少修改DOM的次数
2. 这种性能的提升, 仅在 数组元素有 `增删` 的场景中才效果
3. `所以`: 在后续的vue版本中, 不再强制用户书写key属性, 而是按需书写
4. key: 是唯一标识, 提高数组元素增删时的重复渲染效率

 <li v-for="(x, i) in names" :key="i">{{ x }}</li>

四、计算属性

1. computed
2. 计算属性：get   一个函数如果是计算属性，则使用时不需要（）就能触发
3. 总结: 如果一个函数 需要自动触发 && 不需要传参, 就可以制作成计算属性
4. 注意: 事件绑定的函数不能是计算属性, 因为是通过事件触发的

<template>
  <div>
    <!-- 计算属性：get   一个函数如果是计算属性，则使用时不需要（）就能触发 -->
    <button @click="showThis">显示vue对象</button>
    <p>{{ getTotal() }}</p>
    <!-- 总结: 如果一个函数 需要自动触发 && 不需要传参, 就可以制作成计算属性 -->
    <!-- 注意: 事件绑定的函数不能是计算属性, 因为是通过事件触发的 -->
    <p>{{ getSum }}</p>
  </div>
</template>

<script>
export default {
  // 放在这里的函数, 会自动转换为 计算属性, 使用时不需要()调用
  computed: {
    getSum() {
      return 10 + 20
    },
  },

  methods: {
    getTotal() {
      return 10 + 20
    },
    showThis() {
      console.log(this)
    },
  },
}
</script>

<style lang="scss" scoped></style>

五、双向绑定 v-model

1. 表单元素专属: 双向数据绑定
2. 双向: 表单元素- 输入框,单选框,多选框,下拉框...
3.  作用: 把变量 和 输入框的值 实时绑定在一起, 可以用来收集输入框的值
4. 双向绑定: 就是把变量和表单元素绑定在一起, 可以实时收集表单元素的值

<template>
  <div>
    <!-- 表单元素专属: 双向数据绑定 -->
    <!-- 单向: 把数据 显示到 DOM元素 -->
    <div>{{ kw }}</div>
    <!-- 双向: 表单元素- 输入框,单选框,多选框,下拉框... -->
    <!-- 这些元素 用户可以操作,可以修改其值 -->

    <!-- v-model: 做了两件事 -->
    <!-- 1. kw变量的值 绑定在DOM元素上 -->
    <!-- 2. 当输入框的值被用户修改, 同步更新到kw变量中 -->
    <input type="text" v-model="kw" />
    <!-- 作用: 把变量 和 输入框的值 实时绑定在一起, 可以用来收集输入框的值 -->

    <table>
      <tbody>
        <tr>
          <td>用户名:</td>
          <td><input type="text" v-model="uname" /></td>
        </tr>
        <tr>
          <td>密码:</td>
          <td><input type="password" v-model="upwd" /></td>
        </tr>
        <tr>
          <td>邮箱:</td>
          <td><input type="email" v-model="email" /></td>
        </tr>
        <tr>
          <td>手机号:</td>
          <td><input type="text" v-model="phone" /></td>
        </tr>
        <tr>
          <td></td>
          <td><button @click="login">提交注册信息</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  // 双向绑定: 就是把变量和表单元素绑定在一起, 可以实时收集表单元素的值
  methods: {
    login() {
      console.log(this.uname, this.upwd, this.email, this.phone)
    },
  },
  data() {
    return {
      kw: '123456',
      // 设置4个变量, 和输入框双向绑定在一起
      uname: '',
      upwd: '',
      email: '',
      phone: '',
    }
  },
}
</script>

<style lang="scss" scoped></style>

每日一句

     君子耻其言而过其行。

"君子认为说得多做得少是可耻的。 "