2021-07-08

vue学习记录

---

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、模板语法？

1.动态参数

使用指令时可以设置动态参数,用方括号括起来
注意不能使用大写字符来命名，以为浏览器会把属性名全部强制转换为小写。

<a v-bind:[attributeName]="url"> ... </a>
attributeName = href；
//则等同于
<a v-bind:href="url"> ... </a>
//----------------------------------------------------
<a v-on:[eventName]="doSomething"> ... </a>
eventName = click；
//则等同于
<a v-on:click="doSomething"> ... </a>

二、计算属性和侦听器

1.计算属性的Setter

我们使用计算属性一般默认只有getter，但是还有一个setter属性也非常的实用。
代码如下（示例）：
当fullName发生改变时setter会被调用，可以做一些其他的操作，比如修改其他变量。

computed: {
  fullName: {
    // getter
    get() {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

三、Class与Style绑定

1.绑定 HTML Class

对象语法

//active类名取决于isActive是否为true，可以以逗号隔开定义多个动态class
<div :class="{ active: isActive }"></div>
//也可以这样
<div :class="classObject"></div>
//我们还可以绑定一个计算属性
<div :class="classObject"></div>
data(){
	return{
		isActive :true,
    	classObject: {
      		active: true,
      		'text-danger': false
    	},
    	error: null
	}
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法

数组语法就是把一个数组给 :class ，可同时定义多个动态class

<div :class="[activeClass, errorClass]"></div>
data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}
//结果为
<div class="active text-danger"></div>
//----------------------------------------------------
//也可以在数组中写三元表达式
<div :class="[isActive ? activeClass : '', errorClass]"></div>

在组件上使用

以上方法都可以正常在组件上使用，有一点事如果你的组件有很多个跟元素，你可以定义哪些部分接收这个类

<div id="app">
  <my-component class="baz"></my-component>
</div>
const app = Vue.createApp({})

app.component('my-component', {
  template: `
    <p :class="$attrs.class">Hi!</p>
    <span>This is a child component</span>
  `
})

2.绑定内联样式

对象语法

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}
//直接绑定一个样式对象会更好
<div :style="styleObject"></div>
data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}
//同样，对象语法也常常结合计算属性

解析 DOM 模板时的注意事项

有些元素如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。
而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

v-is指令可以修改当前标签，但是要注意写法

//v-is 值应为 JavaScript 字符串文本
<div v-is="h1"></div>//错误的
<div v-is="'h1'"></div>//正确的
//则会解析为
<h1></h1>

四、自定义事件

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

学习目标：

提示：这里可以添加学习目标
例如：一周掌握 Java 入门知识

---

学习内容：

提示：这里可以添加要学的内容
例如：
1、 搭建 Java 开发环境
2、 掌握 Java 基本语法
3、 掌握条件语句
4、 掌握循环语句

---

学习时间：

提示：这里可以添加计划学习的时间
例如：
1、 周一至周五晚上 7 点—晚上9点
2、 周六上午 9 点-上午 11 点
3、 周日下午 3 点-下午 6 点

---

学习产出：

提示：这里统计学习计划的总量
例如：
1、 技术笔记 2 遍
2、CSDN 技术博客 3 篇
3、 学习的 vlog 视频 1 个