days04实例选项配置

前端小白_zqx

已于 2022-06-15 09:19:56 修改

阅读量185

点赞数

文章标签： vue.js javascript 前端

于 2022-06-08 09:18:24 首次发布

本文链接：https://blog.csdn.net/weixin_59405322/article/details/125177965

版权

本文详细介绍了Vue.js实例选项配置，包括样式处理、侦听器、计算属性、过滤器、事件处理和表单数据绑定。讲解了如何绑定样式、使用侦听器监听数据变化、创建计算属性、定义过滤器、处理事件以及实现表单的双向数据绑定。同时提供了留言板案例和品牌管理的项目任务。

摘要由CSDN通过智能技术生成

`Days02.` 实例选项配置

一、课程大纲

1、样式操作

class样式
style样式

2、侦听器

3、计算属性

4、过滤器

5、事件处理

6、表单操作

7、综合案例：留言板

8、项目任务：品牌管理-数据复杂度升级：增删改查

二、课程内容

1、样式处理

Vue中标签元素的样式主要区分为两种：

固定样式：传统的css语法，直接修饰标签元素
动态样式：可能会根据不同的条件发生变化，需要通过Vue变量数据实现控制

（1） `class`样式绑定

class样式的绑定方式有三种：字符串拼接、数组格式、对象格式（掌握）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box, #box2, #box3{
     width:  500px; height: 200px;}
    .bg-dark{
     background: #333; color: white;}
    .bg-light{
     background: #eee; color: #333; box-shadow: #000 0 0 2px;}
    .fontStyle{
     font-size: 22px; font-weight: 600;}
  </style>
</head>
<body>
  <div id="app">
    <!-- 1、class 样式，字符串拼接方式；很少使用-->
    <!-- <div id="box" :class="'bg-dark' + ' ' + 'fontStyle'"> -->
    <div id="box" class="bg-dark fontStyle">
      class样式设置
    </div>
    <!-- 2、class样式，数组格式-->
    <div id="box2" :class="[bgLight, fs]">
      class样式设置
    </div>
    <!-- 3、class样式，对象格式，可以通过变量控制某个样式是否生效 -->
    <!-- 最常用的样式设置方式，使用的时候需要注意：-->
    <!-- :class="{key: value}"  key就是样式名称/并不是变量-->
    <!-- 如果样式名称中不包含中划线，直接编写；如果包含中划线，需要在样式名称上添加引号 -->
    <div id="box3" :class="{
    'bg-dark':isDark, fontStyle: isFs}">
      class样式设置
    </div>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  const app = new Vue({
     
    el: "#app",
    data: {
     
      bgLight: 'bg-light',
      bgDark: 'bg-dark',
      fs: 'fontStyle',
      isDark: true,
      isFs: true
    }
  })
</script>
</html>

拓展：面试题，观察下面的代码，指出代码中的问题

<div id="box2" :class="[bgLight, 'fs']">
    class样式设置
</div>
<div id="box3" :class="{bg-dark:isDark, fontStyle: isFs}">
    class样式设置
</div>
<script>
	const app = new Vue({
     
        ....
        data: {
     
        	bgLight: 'bg-light',
        	fs: 'fontStyle',
        	bgDark: 'bg-dark',
        	isDark: true,
            isFs: true
    	}
    })
</script>

（2） `style`样式绑定

style样式的设置，主要包含对象格式和数组格式；操作过程中对象格式的语法比较常用

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box, #box2, #box3, #box4, #box5{
     width:  500px; height: 200px;}
    .bg-dark{
     background: #333; color: white;}
    .bg-light{
     background: #eee; color: #333; box-shadow: #000 0 0 2px;}
    .fontStyle{
     font-size: 22px; font-weight: 600;}
  </style>
</head>
<body>
  <div id="app">
    <!-- 对象格式：可以将样式直接编写到表达式中 -->
    <div id="box4" :style="{backgroundColor:bgColor, color: fontColor}">
      style样式设置
    </div>
    <!-- 对象格式：表达式中，直接填写一个对象变量 -->
    <div id="box5" :style="styleObj">
      style样式设置
    </div>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  const app = new Vue({
     
    el: "#app",
    data:<