系列文章目录

Vue3一学就会系列：01 vue3安装与搭建项目

文章目录

系列文章目录
文本插值
html 插入
属性绑定
常用指令
计算属性
总结

文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

知识点： {{}}

代码示例：

<template>
  <div>
    <h3>文本插值</h3>
    <div>{{ msg }}</div>
  </div>
</template>

<script>
 export default {
  data(){
    return {
      msg: 'Hello World'
    }
  }
 }
</script>

效果：
在这里插入图片描述

双向绑定

知识点：使用v-model 绑定输入框中的值

代码示例：

<template>
  <div>
    <h3>双向绑定</h3>
    <div>
      <input v-model="name">
      {{ name }}
    </div>
  </div>
</template>

<script>
 export default {
  data(){
    return {
      name: 'Menphis',
    }
  }
 }
</script>

效果：
在这里插入图片描述

v-text 等同于上面方式插入文本

知识点： v-text=“”

代码示例：

<template>
  <div>
    <h3>文本插值</h3>
    <div v-text="msg"></div>
  </div>
</template>

<script>
 export default {
  data(){
    return {
      msg: 'Hello World'
    }
  }
 }
</script>

html 插入

当我们需要插入一段html的时候，我们可以使用v-html指令方式来插入：

知识点：插入html的指令 v-html=“”

代码示例：

<template>
  <div>
    <h3>html插入</h3>
    <div v-html="htmlStr"></div>
  </div>
</template>

<script>
 export default {
  data(){
    return {
      htmlStr: '<span style="color:red">Hello World</span>'
    }
  }
 }
</script>

效果：
在这里插入图片描述

属性绑定

通常来说，我们html元素中，需要绑定一些属性，比如id，class，style等等，这个时候我们可以在这些属性的前面增加一个：（冒号）进行绑定：

知识点：
id >>> :id
class >>> :class=“class字符串/class对象”
style >>> :style=“style字符串/style对象”

代码示例：

<template>
  <div>
    <h3>属性绑定</h3>
    <div :id="id" :class="boxClass" :style="styleObj">
      Hello World
    </div>
  </div>
</template>

<script>
 export default {
  data(){
    return {
      id: 'box',
      boxClass: 'box-class',
      styleObj: {
        'font-size':'18px'
      }
    }
  }
 }
</script>

效果：
在这里插入图片描述

常用指令

v-if 指令会基于表达式的值的真假来移除/插入元素。
v-show 指令会基于表达式的值的真假来通过样式display来控制元素显示隐藏。

知识点：
插入与删除元素 v-if=“”
样式显示隐藏元素 v-show=“”

代码示例：

<template>
  <div>
    <h3>常用指令</h3>
    <div v-if="showStr">
      Hello World
    </div>
    <div v-show="showName">
      Menphis
    </div>
  </div>
</template>

<script>
 export default {
  data(){
    return {
      showStr: false,
      showName: false
    }
  }
 }
</script>

效果：
在这里插入图片描述

计算属性

计算属性：一个属性值，随着响应式依赖变化，而处理变化的值。

知识点：
computed:{}

代码示例：

<template>
  <div>
    <h3>计算属性</h3>
    <div>
      <input v-model="name">
      {{ helloName }}
    </div>
  </div>
</template>

<script>
 export default {
  data(){
    return {
      name: 'Menphis',
    }
  },
  computed:{
    helloName(){
      return 'Hello World ' + this.name
    }
  }
 }
</script>

效果：
在这里插入图片描述

扩展：可写计算属性

知识点
结构赋值：[a, b] = [1,2] 得到 a=1 b=2
计算属性：get获取 set处理
代码示例：

<template>
  <div>
    <h3>可写计算属性</h3>
    <div>
      <input v-model="fullName">
      <div>姓：{{ lastName }}</div>
      <div>名：{{ firstName }}</div>
      <div>全名：{{ fullName }}</div>
    </div>
  </div>
</template>

<script>
 export default {
  data(){
    return {
      firstName: 'Menphis',
      lastName: 'Cheng'
    }
  },
  computed:{
    fullName: {
      get(){
      return this.firstName +' '+ this.lastName
      },
      set(newValue){
        // 解构赋值应用
        [this.firstName, this.lastName] = newValue.split(' ')
      }
    }
  }
 }
</script>