Vue.js开发基础--2

最新推荐文章于 2024-06-19 20:53:45 发布
最新推荐文章于 2024-06-19 20:53:45 发布
阅读量1.4k 收藏 26
点赞数 17
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74843457/article/details/136661189
版权

1.单文件组件

Vue是一个支持组件化开发的框架。

Vue中的单文件组件是Vue组件的文件格式，每个单文件组件由模板、样式和逻辑3个部分构成。

1.模板

       模板用于搭建当前组建的DOM结构，其他代码写在<template>标签中。<template>标签是Vue提供的容器标签，只起到包裹作用，他不会被渲染为真正的DOM元素。

2.样式

      样式是指通过CSS代码为当前组件设置样式，其代码写在<style>标签中。

3.逻辑

     逻辑是指通过Javascript代码处理组件的数据与业务，其代码写在<script>标签中。

                           演示如何定义一个基本的单文件组件

<template>
  <!-- 此处编写组件的结构 -->
</template>
<script>
/* 此处编写组件的逻辑 */
</script>
<style>
/* 此处编写组件的样式 */
</style>

2.数据绑定

1.初识数据绑定

        Vue通过数据绑定实现了数据与页面相分离，从而实现了数据驱动视图的效果。即将页面中的数据分离出来，放到组件的<script>标签中，通过程序操作数据，并且当数据改变时，页面会自动发生改变。

1.定义数据

           由于数据和页面是分离的，在实现数据显示之前，需要先在<script>标签中定义组件所需的数据。

语法格式如下：

<script>
export default {
  setup() {
    return {
      数据名: 数据值,
      ……
    }
  }
}
</script>

           为了让代码更简洁，Vue 3提供了setup语法糖（Syntactic Sugar），使用它可以简化上述语法，提高开发效率。 使用setup语法糖来定义数据的语法格式如下。

<script setup>
const 数据名 = 数据值
</script>

2.输出数据

       Vue为开发者提供了Mustache语法（又称为双大括号语法），将数据输出到页面中。

语法格式如下：

{{ 数据名 }}
当页面渲染时，模板中的{{ 数据名 }}会被替换为实际的数据

            在Mustache语法中还可以将表达式的值作为输出内容。表达式的值可以是字符串、数字等类型，示例代码如下。 

{{ 'Hello Vue.js' }}
{{ number + 1 }}
{{ obj.name }}
{{ ok ? 'YES' : 'NO' }}
{{ '<div>HTML标签</div>' }}

                                  演示数据绑定实现：创建src\components\Message.vue文件。

<template>{{ message }}</template>
<script setup>
const message = '不积跬步，无以至千里'
</script>

                                          修改src\main.js文件，切换页面中显示的组件。 

import App from './components/Message.vue'

运行结果： 

多学一招： 

                  前面学习的方式是通过Vite创建一个新的项目，这个项目中不仅有Vue，而且整合了一系列辅助开发的工具。 其实Vue的使用方式非常灵活，它还提供了另一种使用方式，就是将Vue引入HTML页面中。但这种方式只能使用Vue的核心功能，所以只适合开发一些简单的页面，在实际开发中一般不用这种方式。

2.响应式数据绑定

            如果想要实现页面中数据的更新，则需要进行响应式数据绑定，也就是将数据定义成响应式数据。 Vue为开发者提供了如下函数用于定义响应式数据。

1.ref()函数

           ref()函数用于将数据转换成响应式数据，其参数为数据，返回值为转换后的响应式数据。使用ref()函数定义响应式数据的语法格式如下。

响应式数据 = ref(数据)

            如果需要更改响应式数据的值，可以使用如下语法格式进行修改。 

响应式数据.value = 新值

演示方法：1.创建src\components\Ref.vue文件。

                    2.import App from './components/Ref.vue'

<template>{{ message }}</template>
<script setup>
import { ref } from 'vue'
const message = ref('会当凌绝顶，一览众山小')
setTimeout(() => {
  message.value = '锲而不舍，金石可镂'
}, 2000)
</script>

 结果：图1：   等待2秒后的页面效果如图2。

 图2：

2. reactive()函数

               reactive()函数用于创建一个响应式对象或数组，将普通的对象或数组作为参数传给该函数即可。 使用reactive()函数定义响应式数据的语法格式如下。 

响应式对象或数组 = reactive(普通的对象或数组)

 演示方法：1.创建src\components\Reactive.vue文件。

                   2.修改import App from './components/Reactive.vue'

<template>{{ obj.message }}</template>
<script setup>
import { reactive } from 'vue'
const obj = reactive({ message: '不畏浮云遮望眼，自缘身在最高层' })
setTimeout(() => {
  obj.message = '欲穷千里目，更上一层楼'
}, 2000)
</script>

结果：图1    等待两秒后图2：

3.toRef()函数 

            toRef()函数用于将响应式对象中的单个属性转换为响应式数据。 使用toRef()函数定义响应式数据的语法格式如下。

演示方法：1.创建src\components\ToRef.vue文件。 

                 2.修改import App from './components/ToRef.vue'

<template>
  <div>message的值：{{ message }}</div>
  <div>obj.message的值：{{ obj.message }}</div>
</template>
<script setup>
import { reactive, toRef } from 'vue'
const obj = reactive({ message: '黑发不知勤学早，白首方悔读书迟' })
const message = toRef(obj, 'message')
setTimeout(() => {
  message.value = '少壮不努力，老大徒伤悲'
}, 2000)
</script>

结果：图1      等待两秒图2所示 图2：

4.toRefs()函数 

        toRefs()函数用于将响应式对象中的所有属性转换为响应式数据。 使用toRefs()函数定义响应式数据的语法格式如下。 

所有属性组成的对象 = toRefs(响应式对象)

演示方法：1.创建src\components\ToRefs.vue文件。

         2.修改src\main.js文件，切换页面中显示的组件。import App from './components/ToRefs.vue'

<template>
  <div>message的值：{{ message }}</div>
  <div>obj.message的值：{{ obj.message }}</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
const obj = reactive({ message: '盛年不重来，一日难再晨' })
let { message } = toRefs(obj)
setTimeout(() => {
  message.value = '及时当勉励，岁月不待人'
}, 2000)
</script>

结果： 图1   等待两秒图2所示：

 3.指令

1.内容渲染指令

1.v-text

          v-text用于渲染DOM元素的文本内容，如果文本内容中包含HTML标签，那么浏览器不会对其进行解析。v-text的语法格式如下。

<标签名 v-text="数据名"></标签名>

演示方法：1.创建src\components\VText.vue文件。

      2.修改src\main.js文件，切换页面中显示的组件。import App from'./components/VText.vue'

<template>
  <div v-text="message"></div>
</template>
<script setup>
const message = '<span>咬定青山不放松，立根原在破岩中</span>'
</script>

结果： 

2.v-html 

              在使用Vue进行内容渲染时，如果内容中包含HTML标签并且希望这些标签被浏览器解析，则可以使用v-html。v-html用于渲染DOM元素的HTML内容，其用法与v-text相似。v-html的语法格式如下。 

<标签名 v-html="数据名"></标签名>

 演示代码：

<template>
  <div v-html="html"></div>
</template>
<script setup>
const html = '<strong>千磨万击还坚劲，任尔东西南北风</strong>'
</script>

结果：

 2.属性绑定指令 

·           在Vue开发中，有时需要绑定DOM元素的属性，从而更好地控制属性的值，此时可以使用属性绑定指令v-bind来实现。v-bind的语法格式如下。

<标签名 v-bind:属性名="数据名"></标签名>

                v-bind还支持将属性与字符串拼接表达式绑定，示例代码如下。 

<div :id="'list' + index"></div>

演示方法：

<template>
  <p><input type="text" v-bind:placeholder="username"></p>
  <p><input type="password" :placeholder="password"></p>
</template>
<script setup>
const username = '请输入用户名'
const password = '请输入密码'
</script>

运行结果：

3.事件绑定指令 

         在Vue开发中，有时需要给DOM元素绑定事件，从而利用事件实现交互效果，这时可以利用事件绑定指令v-on来实现。v-on的语法格式如下。

<标签名 v-on:事件名="事件处理器"></标签名>

           在上述语法格式中，事件名即DOM中的事件名，例如click、input、keyup等；事件处理器可以是方法名或内联JavaScript语句。如果逻辑复杂，事件处理器建议使用方法名，方法需要在<script>标签中定义；如果逻辑简单，只有一行代码，则可以使用内联JavaScript语句。另外，v-on还有简写形式，可以将“v-on:事件名”简写为“@事件名”。

示例代码：

<template>
  <button @click="showInfo">输出信息</button>
</template>
<script setup>
const showInfo = () => {
  console.log('欢迎来到Vue.js的世界！')
}
</script>

结果： 

4.双向数据绑定 

              Vue为开发者提供了v-model指令来实现双向数据绑定，使用它可以在input、textarea和select元素上创建双向数据绑定，它会根据使用的元素自动选取对应的属性和事件组合，负责监听用户的输入事件并更新数据。v-model的语法格式如下。

<标签名 v-model="数据名"></标签名>

v-model内部会为不同的元素绑定不同的属性和事件，具体如下。

  • textarea元素和text类型的input元素会绑定value属性和input事件。
  • checkbox类型的input元素和radio类型的input元素会绑定checked属性和change事件。
  • select元素会绑定value属性和change事件。 

         例如，使用v-model实现输入框的值与变量保持同步，示例代码如下。 

<input v-model="info">

      为了方便对用户输入的内容进行处理，v-model提供了3个修饰符。v-model的修饰符如下表所示。 

演示方法：

<template>
  请输入姓名：<input type="text" v-model="username">
  <div>姓名是：{{ username }}</div>
</template>
<script setup>
import { ref } from 'vue'
const username = ref('zhangsan')
</script>

结果： 在输入框中输入“xiaoming”

                      演示.number修饰符的使用方法

                                在src\components\VModel.vue文件的<template>标签中添加代码，通过v-model实现双向数据绑定。

<input type="text" v-model="n1"> + <input type="text" v-model="n2">
= {{ n1 + n2 }}

结果：

              改变n1的值为“198”，查看n1 + n2的值。改变n1的值为“198”的页面效果如下图所示。 

         修改输入框的代码，通过添加.number修饰符实现将用户输入的数字自动转换成数字类型。

<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2">

 改变n1的值为“198”，查看n1 + n2的值。使用.number修饰符后改变n1的值为“198”的页面效果如下图所示。

5.条件渲染指令 

             在Vue中，当需要根据不同的判断结果显示不同的DOM元素时，可以通过条件渲染指令来实现。条件渲染指令可以辅助开发者按需控制DOM元素的显示与隐藏。

1. v-if

   v-if是根据布尔值切换元素的显示或隐藏状态，本质是通过操作DOM元素来切换显示状态。

  • 当给定的值为true时，元素存在于DOM树中；
  • 当给定的值为false时，元素从DOM树中移除。 

        v-if有两种使用方式。 

①直接给定一个条件，控制单个元素的显示或隐藏

<标签名 v-if="条件"></标签名>

②通过v-if结合v-else-if、v-else来控制不同元素的显示或隐藏

<标签名 v-if="条件A">展示A</标签名>
<标签名 v-else-if="条件B">展示B</标签名>
<标签名 v-else>展示C</标签名>

演示方法：

<template>
  小明的学习评定等级为：
  <p v-if="type === 'A'">优秀</p>
  <p v-else-if="type === 'B'">良好</p>
  <p v-else>差</p>
  <button @click="type = 'A'">切换成优秀</button>
  <button @click="type = 'B'">切换成良好</button>
  <button @click="type = 'C'">切换成差</button>
</template>
<script setup>import { ref } from 'vue'
const type = ref('B')
</script>

结果： 单击“切换成优秀”按钮后的页面效果如下图所示。

 

 2.v-show

          v-show与v-if都用来决定某一个元素是否在页面上显示出来。

           v-show的原理是通过为元素添加或移除display: none样式来实现元素的显示或隐藏。

          当需要频繁切换某个元素的显示或隐藏时，使用v-show会更节省性能开销；而当只需要切换一次显示或隐藏时，使用v-if更合理。

 演示使用方法：

<template>
  <p v-if="flag">通过v-if控制的元素</p>
  <p v-show="flag">通过v-show控制的元素</p>
  <button @click="flag = !flag">显示/隐藏</button>
</template>
<script setup>
import { ref } from 'vue'
const flag = ref(true)
</script>

结果：

单击“显示/隐藏”按钮后的页面效果如下图所示。 

6.列表渲染指令 

         掌握列表渲染指令，能够灵活运用v-for指令将数组、对象等中的数据渲染到页面中

     使用v-for（根据list数组中的元素）渲染列表后，当在list数组中删除一个元素后，index会发生变化，v-for会重新渲染列表，导致性能下降。

      为了给v-for一个提示，以便它能跟踪每个节点的身份，从而对现有元素进行重用和重新排序，建议通过key属性为列表中的每一项提供具有唯一性的值，示例代码如下。

<div v-for="item in items" :key="item.id"></div>

                                 演示使用v-for根据一维数组渲染列表

<template>
  <div v-for="(item, index) in list" :key="index">
    索引是：{{ index }} --- 元素的内容是：{{ item }}
  </div>
</template>
<script setup>
import { reactive } from 'vue'
const list = reactive(['HTML', 'CSS', 'JavaScript'])
</script>

结果: 

                                       演示使用v-for根据对象数组渲染列表

<template>
  <div v-for="item in list" :key="item.id">
    id是：{{ item.id }} --- 元素的内容是：{{ item.message }}
  </div>
</template>
<script setup>
import { reactive } from 'vue'
const list = reactive([
  { id: 1, message: '梅', }, { id: 2, message: '兰', },
  { id: 3, message: '竹', }, { id: 4, message: '菊', }
])
</script>

结果： 

                                  演示使用v-for根据对象渲染列表

<template>
  <div v-for="(value, name) in user" :key="name">
    属性名是：{{ name }} --- 属性值是：{{ value }}
  </div>
</template>
<script setup>
import { reactive } from 'vue'
const user = reactive({ id: 11, name: '小明', gender: '男' })
</script>

结果：

 4.事件对象 

                事件对象是在事件触发时产生的对象，该对象保存了事件触发时的相关信息。

1. 通过事件方法的参数获取事件对象

         在v-on绑定的用于处理事件的方法中，可以接收到一个参数，这个参数就是事件对象，示例代码如下。

<template>
  <button @click="greet">Greet</button>
</template>
<script setup>
const greet = event => console.log(event)
</script>

2. 通过$event获取事件对象 

                $event是Vue提供的内置变量，使用它可以获取事件对象，示例代码如下。

<template>
  <button @click="change($event)">change</button>
</template>
<script setup>
const change = event => console.log(event)
</script>

演示事件对象的使用方法 

<template>
  <div>count的值为：{{ count }}</div>
  <button @click="addCount">count+1</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(1)
const addCount = event => {
  count.value++
  if (count.value % 2 === 0) { event.target.style.border = '3px dotted' } else { event.target.style.border = '3px solid' } }
</script>

通过事件方法的参数获取事件对象的页面效果如下图所示。 

 单击“count+1”按钮后的页面效果如下图所示。

 再次单击“count+1”按钮后的页面效果如下图所示。

演示通过$event获取事件对象的方式 

const addCountN = (n, event) => {
  count.value += n
  if (count.value % 2 === 0) {
    event.target.style.border = '3px dotted'
  } else {
    event.target.style.border = '3px solid'
  }
}

通过$event获取事件对象的页面效果 

 

 单击“count+n”按钮后的页面效果如下图所示。

再次单击“count+n”按钮后的页面效果如下图所示。 

5.事件修饰符

               为了简化开发，Vue为开发者提供了事件修饰符，它可以与v-on配合使用，以便于对事件进行控制，让开发者更专注于逻辑。 事件修饰符用于修饰事件的行为，写在事件名称之后，多个事件修饰符可以串联使用。

1. 阻止默认事件行为

      通过.prevent事件修饰符可以实现阻止默认事件行为的功能。例如，在单击<a>标签时页面会自动跳转，这就是<a>标签的默认事件行为。

      在实际开发中，如果默认事件行为与事件发生冲突，可以使用.prevent事件修饰符阻止默认事件行为，示例代码如下。

<a href="test.html" v-on:click.prevent>阻止默认行为</a>

2. 阻止事件冒泡 

        通过.stop事件修饰符可以实现阻止事件冒泡的功能，示例代码如下。

<template>
  <div v-on:click="show('我是父元素的事件')">
    <button v-on:click="show('我是子元素的事件')">事件冒泡</button>
    <button v-on:click.stop="show('我是子元素的事件')">阻止事件冒泡</button>
  </div>
</template>
<script setup>
let show = message => console.log(message)
</script>

3. 事件捕获 

            通过.capture事件修饰符可以实现事件捕获的功能，示例代码如下。

<template>
  <div v-on:click.capture="show('我是父元素的事件')">
    <button v-on:click="show('我是子元素的事件')">事件捕获</button>
  </div>
</template>
<script setup>
let show = message =>  console.log(message)
</script>

4. 使事件只触发一次 

       通过.once事件修饰符可以实现使事件只触发一次的功能。.once事件修饰符用于阻止事件的多次触发，让事件只触发一次，示例代码如下。

<template>
  <button v-on:click.once ="show('我是当前元素的单击事件且只执行一次')">只执行一次</button>
</template>
<script setup>
let show = message => console.log(message)
</script>

5. 使DOM元素只有自身触发事件时才执行事件方法 

       通过.self事件修饰符可以实现只有DOM元素自身触发事件时才执行事件方法的功能，示例代码如下。

<template>
  <div v-on:click="show('我是祖先元素的事件')">祖先元素
    <div v-on:click.self="show('我是父元素的事件')">父元素
      <div v-on:click="show('我是子元素的事件')">子元素</div>
    </div>
  </div>
</template>
<script setup>
let show = message => console.log(message)
</script>

6. 监听滚动事件 

           通过.passive事件修饰符可以实现监听滚动事件的功能。.passive事件修饰符主要用于优化移动端设备的滚屏性能。添加.passive事件修饰符后会优先响应滚动事件而不是滚动事件的回调函数，从而可提升性能。

使用.passive事件修饰符的示例代码如下。

<div v-on:scroll.passive="onScroll"></div>

7. 捕获特定按键 

            接下来以捕获Enter键为例，演示.enter事件修饰符的使用，示例代码如下。 

<template> 
  <input type="text" v-on:keyup.enter="submit">
</template>
<script setup>
let submit = () => console.log('捕获到Enter键')
</script>

 

8. 捕获鼠标按键

        接下来以捕获鼠标左键为例，演示鼠标按键修饰符的使用，示例代码如下。 

<template>
  <button v-on:click.left="show('捕获到鼠标左键')">按钮</button>
</template>
<script setup>
let show = message => console.log(message)
</script>

6.计算机属性 

           Vue提供了计算属性来描述依赖响应式数据的复杂逻辑。 计算属性可以实时监听数据的变化，返回一个计算后的新值，并将计算结果缓存起来。只有计算属性中依赖的数据源变化了，计算属性才会自动重新求值，并重新加入缓存。

1. 定义计算属性

          计算属性通过computed()函数定义，该函数的参数为一个回调函数，开发者需要在回调函数中实现计算功能，并在计算完成后返回计算后的数据，语法格式如下。

<script setup>
import { computed } from 'vue'
const 计算属性名 = computed(() => {
  return 计算后的数据
})
</script>

2. 输出计算属性 

        将计算属性定义好后，可以使用Mustache语法输出计算属性，语法格式如下。

{{ 计算属性名 }}

演示计算属性的使用方法 

<template>
  <p>初始message：{{ message }}</p>
  <p>反转之后的message：{{ reversedMessage }}</p>
  <button @click="updateMessage">更改</button>
</template>
<script setup>
import { ref, computed } from 'vue'
const message = ref('Hello World')
const reversedMessage = computed(() =>
  message.value.split('').reverse().join('')
)
const updateMessage = () => {
  message.value = 'hello'
}
</script>

结果： 

 单击“更改”按钮后的页面效果如下图所示。

 

7.侦听器 

         在Vue中，开发者可以自定义方法来进行数据的更新操作，但是不能自动监听数据的状态。如果想在数据更新后进行相应的操作，可以通过侦听器来实现。

                 侦听器通过watch()函数定义，watch()函数的语法格式如下。

watch(侦听器的来源, 回调函数, 可选参数)

 

演示侦听器的使用方法 

<template>
  <input type="text" v-model="cityName">
</template>
<script setup>
import { watch, ref } from 'vue'
const cityName = ref('beijing')
watch(cityName, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})
</script>

在输入框中输入“beijing123”后的页面效果如下图所示。

8.样式绑定 

            在Vue中，通过更改元素的class属性可以更改元素的样式，而对class属性的操作可以通过v-bind来实现。 使用v-bind绑定class属性时，可以将class属性值绑定为字符串、对象或数组，下面分别进行讲解。

1. 将class属性值绑定为字符串

                在Vue中，可以将class属性值绑定为字符串，示例代码如下。

<template>
  <div v-bind:class="className"></div>
</template>
<script setup>
const className = 'box'
</script>

当上述代码运行后，div元素的渲染结果如下。

<div class="box"></div>

演示如何为class属性绑定字符串 

<template>
  <div v-bind:class="className">梦想</div>
</template>
<script setup>
const className = 'box'
</script>
<style>
.box {
  border: 1px solid black;
}
</style>

为class属性绑定字符串的页面效果如下图所示。 

 

 2. 将class属性值绑定为对象

<template>
  <div v-bind:class="{ className: isActive }"></div>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(true)
</script>

运行上述代码后，div元素的渲染结果如下。 

使用v-bind绑定的class属性可以与普通的class属性共存，示例代码如下。

<div class="className1" v-bind:class="{ className2: isActive }"></div>

在上述代码中，当isActive为true时，div元素的渲染结果如下。 

<div class="className1 className2"></div>

           在使用v-bind绑定class属性时，如果不想将对象类型的class属性值直接写在模板中，可以将属性值定义成一个响应式对象或一个返回对象的计算属性，示例代码如下。 

<template>
  <div v-bind:class="classObject1"></div>
  <div v-bind:class="classObject2"></div>
</template>
<script setup>
import { reactive, ref, computed } from 'vue'
const classObject1 = reactive({ className: true })
const isActive = ref(true)
const classObject2 = computed(() => ({
  className: isActive.value
}))
</script>

演示如何为class属性绑定对象 

<template>
  <div class="text" v-bind:class="{ box: isBox, border: isBorder }">
    <div v-bind:class="{ inner: isInner }">春夏</div>
    <div v-bind:class="classObject">秋冬</div>
    <div v-bind:class="classMeal">三餐四季~</div>
  </div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
const isBox = ref(true)
const isBorder = ref(true)
const isInner = ref(true)
const isMeal = ref(true)
const classObject = reactive({ inner: true })
const classMeal = computed(() => ({
  meal: isMeal.value
}))
</script>
//定义样式
<style>
.text {
  text-align: center;
  line-height: 30px;
}
.box {
  width: 100%;
  background: linear-gradient(white, rgb(239, 250, 86));
}
.border {  border: 2px dotted black; }
.inner {
  margin-top: 2px;
  width: 100px; height: 30px;
  border: 2px double black;
}
.meal {
  width: 100px; height: 30px;
  border: 2px dashed rgb(120, 81, 227);
}
</style>

效果图：

  3. 将class属性值绑定为数组

<template>
  <div v-bind:class="[className1, className2]"></div>
</template>
<script setup>
import { ref } from 'vue'
const className1 = ref('active')
const className2 = ref('error')
</script>

运行上述代码后，div元素的渲染结果如下。 

如果想有条件地切换列表中的class，可以使用三元表达式，示例代码如下。 

当class有多个条件时，在数组语法中也可以使用对象语法，示例代码如下。

 演示如何为class属性绑定数组

<template>
  <div v-bind:class="[activeClass, borderClass]"></div>
  <div v-bind:class="[isActive ? activeClass : '', borderClass]"></div>
  <div v-bind:class="[{ active: isActive }, borderClass]"></div>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(true)
const activeClass = ref('active')
const borderClass = ref('border')
</script>
<style>
.active {
  width: 100px;
  height: 10px;
  margin-bottom: 2px;
  background-color: rgb(59, 192, 241);
}
.border {
  border: 2px solid rgb(0, 0, 0);
}
</style>

 运行结果：

 8.2 绑定style属性

       在Vue中，通过更改元素的style属性也可以更改元素的样式，对style属性的操作也可以通过v-bind来实现。使用v-bind绑定style属性时，可以将style属性值绑定为对象或数组，下面分别进行讲解。

1. 将style属性值绑定为对象

<template>
  <div v-bind:style="{ color: 'red', 'font-size': '30px' }"></div>
  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
  </div>
</template>
<script setup>
import { ref } from 'vue'
const activeColor = ref('red')
const fontSize = ref(30)
</script>

 

<template>
  <div v-bind:style="styleObject"></div>
</template>
<script setup>
import { reactive } from 'vue';
const styleObject = reactive({
  color: 'red',
  fontSize: '12px'
})
</script>

演示如何为style属性绑定对象 

 

<template>
  <!-- 绑定样式属性值 -->
  <div v-bind:style="{ 'background-color': pink, width: width, height: height + 'px' }">
    <!-- 三元表达式 -->
    <div v-bind:style="{ backgroundColor: isBlue ? blue : 'black', width: '50px', height: '20px' }"></div>
    <!-- 绑定样式对象 -->
    <div v-bind:style="myDiv"></div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const isBlue = ref(false)
const blue = ref('blue')
const pink = ref('pink')
const width = ref('100%')
const height = ref(40)
const myDiv = reactive({
  backgroundColor: 'red',  width: '50px',  height: '20px'
})
</script>

结果: 

2. 将style属性绑定为数组 

 

演示如何为class属性绑定数组 

<template>
  <!-- 使用数组 -->
  <div v-bind:style="[activeClass, borderClass]"></div>
  <!-- 使用三元表达式 -->
  <div v-bind:style="[isActive ? activeClass : '', borderClass]"></div>
  <!-- 数组语法中使用对象语法 -->
  <div v-bind:style="[{ backgroundColor: 'rgb(59, 192, 241)', height: '10px' }, borderClass]"></div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const isActive = ref(true)
const activeClass = reactive({
  height: '10px',
  backgroundColor: 'rgb(59, 192, 241)'
 })
 const borderClass = reactive({
   border: '2px solid rgb(0, 0, 0)'
})
</script>

结果： 

9.阶段案例---学习计划表 

代码：

<template>
	<div class="card">
		<!-- 标题区域 -->
		<div class="card-header">学习计划表</div>
		<!-- 提交区域 -->
		<div class="card-body">
			<form @submit.prevent="add">
				<div class="row g-4">
					<!-- 学习科目 -->
					<div class="col-auto">
						<div class="input-group mb-3">
							<span class="input-group-text" id="basic-addon1">学习科目</span>
							<input type="text" class="form-control" placeholder="请输入学习科目" v-model.trim="subject" />
						</div>
					</div>
					<!-- 学习任务 -->
					<div class="col-auto">
						<div class="input-group mb-3">
							<span class="input-group-text" id="basic-addon1">学习内容</span>
							<textarea class="form-control" v-model.trim="content" placeholder="请输入学习内容"
								:style="{ height: '32px' }"></textarea>
						</div>
					</div>
					<!-- 学习地点 -->
					<div class="col-auto">
						<div class="input-group mb-3">
							<span class="input-group-text" id="basic-addon1">学习地点</span>
							<select class="form-select form-select-sm" v-model="selectedOption">
								<option v-for="option in options" :value="option.place" :key="option.placeCode">
									{{ option.place }}
								</option>
							</select>
						</div>
					</div>
					<!-- 添加按钮 -->
					<div class="col-auto">
						<button type="submit" class="btn btn-primary">添加</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<table class="table table-striped table-hover table-bordered">
		<thead>
			<tr>
				<th scope="col">序号</th>
				<th scope="col">学习科目</th>
				<th scope="col">学习内容</th>
				<th scope="col">学习地点</th>
				<th scope="col">完成状态</th>
				<th scope="col">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="item in list" :key="item.id">
				<td>{{ item.id }}</td>
				<td>{{ item.subject }}</td>
				<td>{{ item.content }}</td>
				<td>{{ item.place }}</td>
				<td>
					<div class="form-check form-switch">
						<input class="form-check-input" type="checkbox" role="switch" :id="'cb' + item.id"
							v-model="item.status" />
						<label class="form-check-label" :for="'cb' + item.id" v-if="item.status">已完成</label>
						<label class="form-check-label" :for="'cb' + item.id" v-else>未完成
						</label>
					</div>
				</td>
				<td>
					<a href="javascript:;" @click="remove(item.id,item.status)">删除</a>
				</td>
			</tr>
		</tbody>
	</table>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	const list = ref([{
		id: '1',
		subject: 'Vue.js 前端实战开发',
		content: '学习指令，例如 v-if、v-for、v-model 等',
		place: '自习室',
		status: false,
	}, ])
	let remove = (id, status) => {
		if (status) {
			list.value = list.value.filter(item => item.id !== id)
		} else {
			alert('请完成该学习计划后再进行删除操作！')
		}
	}
	let subject = ref('')
	let content = ref('')
	let nextId = ref('')
	let selectedOption = ref('自习室')
	let options = ref([{
			placeCode: 0,
			place: '自习室',
		},
		{
			placeCode: 1,
			place: '图书馆',
		},
		{
			placeCode: 2,
			place: '宿舍',
		},
	])
	let add = () => {
		if (subject.value === '') {
			alert('学习科目为必填项！')
			return
		}
		nextId.value = Math.max(...list.value.map(item => item.id)) + 1
		const obj = {
			id: nextId.value,
			subject: subject.value,
			content: content.value,
			place: selectedOption.value,
			status: false,
		}
		list.value.push(obj)
		subject.value = ''
		content.value = ''
		selectedOption.value = '自习室'
	}
</script>

结果样式： 

自定义添加后的效果：

胡小图图图图图
关注
  • 17
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue基础指令
m0_59867106的博客
06-06 1199
指令概述：指令：英文单词，描述了一种简单的功能操作，如获取焦点；简单的DOM操作在Vue中统一的被封装成指令进行操作；什么是指令：包含了简单的DOM操作功能的组件！Vue中提供了自己的内建指令（掌握）、根据实际情况自定义指令（了解）Vue中的指令都是： 固定语法格式一、v-text指令指令名称：文本渲染指令指令描述：输出指令对应表达式的数据，即使数据中包含了标签，不会进行编译解释直接原样输出 二、v-html指令名称：超文本/富文本渲染指令指令描述：输出指令对应表达式的数据，数据中一旦包含，会进行渲染解
Vue 基础快速入门(一)
qq_45560445的博客
12-21 456
插值语法, MVVM, 模板, 数据绑定, 事件, 计算属性, 监视属性, 绑定样式, 条件渲染, 列表渲染, 过滤器, 常用指令, 自定义指令, 生命周期
Vue的学习 —— ＜vue响应式基础＞
2301_78038072的博客
05-14 2604
Vue.js 以其高效的数据绑定和视图更新机制广受开发者喜爱。这一特性主要依赖于其独特的响应式系统设计，它能够实时监测数据变化并自动驱动相应的视图更新。简单来说，就是当数据发生变化时，依赖该数据的视图会自动进行更新。这种“响应”是通过在初始化阶段对数据对象属性进行深度观测和转换来实现的。在第二章中，我们使用Vite创建了一个Vue项目，并且注意到目录结构中包含了一些扩展名为.vue的文件。这些.vue文件实际上是用来定义Vue的单文件组件。在Vue中，单文件组件是一种特殊的文件格式，用于构建用户界面。
vue基本的使用模板语法和其他的特性
weixin_45568391的博客
10-10 448
Vue模板语法 文本 在html中通过{{}}（双大括号）中可以把Vue对象中的数据插入到网页中。并且只要Vue对象上对应的值发生改变了，那么html中双大括号中的值也会立马改变。 <div id="app"> <p>{{username}}</p> <button v-on:click="change">点击修改</button> </div> <script> let vm = new Vue({
VUE学习（二）-模板语法
丨Anna丨的博客
11-08 578
VUE学习（二）-模板语法 1 什么是模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 特点： （1）实现动态的 html 页面 （2）包含了一些 JS 语法代码 a. 双大括号表达式 b. 指令(以 v-开头的自定义标签属性) 1.1双大括...
Vue自学（3）2020-09-29
Larry的博客
10-07 94
Vue基本知识点 1. Vue模板语法：插值语法----{{}} 把字符串渲染到页面上有哪些方式？ 1.利用原生js拼接字符串 2.利用模板引擎拼接 3.利用Vue插值语法 3.文档碎片 document.createDocumentFragment 4.利用es6 `` 反引号拼接字符串 2. v-clock 解决插值语法的闪烁问题 3.数据填充的三个指令:v-text ,v-html ,v-pre v-text 和 v-html 的区别 v-text 输出的是纯文本，浏览器不会对其再进行htm
Vue.js前端开发基础与项目实战
08-13
Vue.js前端开发基础与项目实战code
vue.js+element-ui动态配置菜单的实例
10-18
Vue.js 是一款流行的前端框架，它提供了数据绑定和组件化的能力，使得开发用户界面更为便捷。Element UI 是一套基于 Vue.js 的开源 UI 组件库，主要用于构建企业级的 Web 应用，它提供了丰富的组件，如表格、按钮、...
vue-2-breadcrumbs-与Vue 2.x的vue-router一起面包屑。 和Bootstrap 4-Vue.js开发
05-27
面包屑Vue面包屑建立在官方vue-router软件包的基础上，提供简单的面包屑。 演示支持支持SSR设置父路由和面包屑Vue面包屑建立在官方vue-router软件包的基础上，提供简单的面包屑。 演示支持支持SSR设置父路由，而无需...
基于PHP+laravel5.5+vue.js+element-ui开发的宠物饲养管理平台+源码（毕业设计&课程设计&项目开发）
06-17
基于PHP+laravel5.5+vue.js+element-ui开发的宠物饲养管理平台+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于PHP+laravel5.5+vue.js+element-ui开发的...
vue-toastr-2 toastrvue-toastr-2-基于Toastr构建的Vue.js的简单Toast通知-Vue.js开发
05-27
vue-toastr-2简单的Vue.js安装的敬酒通知直接下载/ CDN https://unpkg.com/vue-toastr-2/dist/vue-toastr-2 unpkg.com provi vue-toastr-2简单的敬酒通知Vue.js安装的直接下载/ CDN ... 上面的链接将始终指向NPM的最新...
VUE常用语法
oFlying1的博客
01-17 601
1-{{ }} 用于输出对象属性和函数返回值。 <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> &l...
Vue.js 3.0的Composition API中的三个创建响应式数据的函数reactive、toRefs、ref
前端高薪进击手记
07-29 1080
本文将介绍Vue.js 3.0中三个创建响应式数据的函数reactive、toRefs、ref reactive：把对象转换成一个响应式对象，也就是一个Proxy对象。 toRefs：它可以把一个代理对象中的所有属性也都转换成响应式的对象，toRefs()在处理这个对象的属性的时候，类似于ref。 ref： 把基本类型的数据转换成响应式对象。...
Vue-前端应用开发平时作业第二章
m0_72471315的博客
03-30 1206
前端应用开发第二章作业
2.【Vue3】Vue 基本使用——局部使用Vue
qq_44378854的博客
01-28 1663
现在需要将 “hello vue3” 这样一个字符串渲染到页面上进行展示。接下来学习如何使用 Vue 来完成该需求。Vue 使用的数据都需要在调用 CreateApp() 函数时，在 {} 中声明。可以在 {} 中写一个 data() 函数，通过 return 返回需要的数据。数据有了之后，需要将数据渲染到页面上。可以在 div 内部声明 h1 标签，在 h1 内部通过插值表达式渲染到页面上进行展示。插值表达式就是两层 {}，内部写的是数据的键名。
Vue-基础语法01
m0_51700376的博客
09-11 192
Vue是什么 用于构建用户界面的渐进式框架 声明式渲染组件系统客户端路由集中式状态管理项目构建 vue 的核心库只关注视图层 Vue有哪些优点？ 易用、灵活、高效 简单易上手 如何利用Vue将hello world 渲染到页面上 1、需要提供标签用于填充数据 注意： 在标签中我们使用插值语法的形式 即 {{}} 进行填充数据 2、引入vue.js库文件 注意：一定要先引入Vue文件 在使用Vue语法 因为存在作用域的问题 3、使用vue的语法做功能 new Vue() 创建一个Vu
vue课后习题及答案
m0_73490019的博客
06-05 2354
1.Vue是一套用于构建___用户界面_____的渐进式框架.2.Vue中的指令以______v-__开头.3.Node.js 是一个基于____V8___引擎的JavaScript运行环境。4.在yam 中，__yarn add__命令用于添加指定名称的包。5.在 npm 中，_________命令用于卸载指定名称的包。
V-bind详细使用
sinat_40235361的博客
05-21 575
v-bind 主要用于属性绑定，Vue官方提供了一个简写方式:bind，例如： <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一、对象语法： 我们可以给v-bind:class 一个对象，以...
Vue + SpringBoot 实现文件的断点上传、秒传，存储到Minio
最新发布
m0_73179389的博客
06-19 542
前端页面使用的elment-plus的el-upload组件。当上传文件后，会调用handleChange 方法，可以在这里进行文件相关的操作。计算文件的MD5值。
vue.js前端开发基础与项目实战pdf
07-22
### 回答1： 《Vue.js前端开发基础与项目实战PDF》是一本关于Vue.js前端开发的实用教程。本书共分为两个部分，前半部分是关于Vue.js基础知识的介绍，后半部分通过实战项目的方式加深读者对Vue.js的理解与应用。 在前半部分，本书首先介绍了Vue.js的基本概念和原则，包括Vue实例、模板语法、计算属性、指令、生命周期等。读者通过这些基础知识的学习,能够了解Vue.js的基本工作原理，掌握Vue.js的基本语法和核心功能。 后半部分，本书通过一个完整的实战项目，引导读者将前半部分所学知识运用于实践。项目从需求分析、项目搭建到页面设计、数据交互等方面进行了详细的讲解。读者通过跟随实战项目的步骤，能够从中学会如何使用Vue.js构建一个完整的前端应用。 《Vue.js前端开发基础与项目实战PDF》的特点在于其结合了理论和实践，让读者既能够理解Vue.js的基本原理和语法，又能够通过实战项目的方式进行实际操作。这种结合使得读者可以更好地掌握Vue.js的开发技巧，提升自己的前端开发能力。 总之，《Vue.js前端开发基础与项目实战PDF》是一本适合前端开发初学者的实用教程，通过学习本书，读者能够系统地了解和掌握Vue.js的开发技术和应用，为自己的前端开发之路奠定坚实的基础。 ### 回答2： "vue.js前端开发基础与项目实战pdf" 是一本关于Vue.js前端开发的书籍，涵盖了基础知识和实战经验。该书以提供全面详细的教程和示例代码为目标，可用于初学者和有一定经验的开发者。 在基础部分，该书讲解了Vue.js的基本概念和特点，包括Vue.js的生命周期、组件和指令的使用方法、数据绑定和事件处理等。读者将学会如何搭建Vue.js项目，包括使用Vue CLI进行项目初始化和依赖管理，以及使用Webpack进行模块化开发和打包。 在项目实战部分，该书提供了多个实际案例供读者学习和实践。这些案例涵盖了常见的前端开发需求，如用户登录认证、数据可视化、实时通信等。每个案例都由浅入深地介绍了解决方案和实现细节，读者可以从中学习到实际项目开发中的技巧和经验。 此外，该书还介绍了Vue.js的常用插件和工具库，如Vue Router、Vuex、Element UI等，以及与后端API交互和服务器部署等相关内容。读者可以根据自己的需求选择合适的工具和技术栈，提高项目开发的效率和质量。 总之，"vue.js前端开发基础与项目实战pdf"是一本全面介绍Vue.js前端开发的教程书籍，适合想要学习Vue.js的开发者。通过学习该书，读者可以掌握Vue.js的基础知识，提升前端开发技能，并能够应用Vue.js开发实际项目。 ### 回答3： 《vue.js前端开发基础与项目实战pdf》是一本介绍Vue.js前端开发基础及实战项目的电子书籍。 Vue.js是一款流行的JavaScript框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）架构模式，使开发者能够快速构建高性能的单页面应用程序。本书通过详细的讲解和实例演示，系统地介绍了Vue.js基础知识和开发实践。 首先，本书从Vue.js的概述入手，介绍了Vue.js的特点和优势，并介绍了其与其他流行框架的比较。接着，本书详细介绍了Vue.js的基本语法、组件和指令，以及其数据绑定、事件处理、过滤器和表单验证等常用功能。读者可以通过学习这些基础知识，快速掌握Vue.js的开发方法和技巧。 然后，本书通过实战项目来帮助读者更好地理解和应用Vue.js。这些项目包括购物车应用、电影列表和用户管理系统等，涵盖了常见的业务场景。每个项目都有详细的代码实现和步骤说明，读者可以根据实际需求进行修改和扩展，提高自己的开发能力。 总的来说，《vue.js前端开发基础与项目实战pdf》是一本适合初学者和有一定经验的开发者的实用指南。通过学习这本书，读者可以从零开始掌握Vue.js的基础知识，并通过实践项目提升自己的开发能力。无论是对于想要学习Vue.js的新手，还是对于想要深入了解和运用Vue.js的开发者，都是一本值得推荐的书籍。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值