Day4-vue 学习笔记

vue响应式原理

响应式数据的关键是拦截对象属性的设置和读取操作，当把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

动态参数

基本写法

<!-- 动态属性 -->
<a v-bind:[attributeName]="url"> ... </a>
​
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>
​
​
<!-- 动态事件 -->
<button v-on:[event]="event"> ... </button>
​
<!-- 简写 -->
<button @[event]="event"> ... </button>

对动态参数的约束

1. 动态参数的值要求是一个string类型，否则会被忽略。

2. 动态参数的表达式由于语法约束，不能有空格和引号，可以使用计算属性来解决。

3. 动态参数里面尽量不用大写字符，因为浏览器会把 attribute 名全部强制转为小写。

常见的修饰符

事件修饰符

• .stop

• .prevent

• .capture

• .self

• .once

<!-- 阻止单击事件继续传播 -->
// 给内层div的点击事件加
<div class="container" @click="handleClick1">
    <div class="box" @click.stop="handleClick2"></div>
</div>
​
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
// 只触发点击事件，但是不跳转
<a href="http://www.baidu.com" @click.prevent="jump">链接</a>>
​
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
​
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
​
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
先输出外层的点击事件。在输出内层的
<div class="container" @click.capture="handleClick1">
     <div class="box" @click="handleClick2"></div>
</div>
​
<!-- 只当在 event.target 是当前元素自身时触发处理函数，只关注于自身事件，冒泡会被忽略 -->
// 点击2，不会触发1的输出
<div class="container" @click.self="handleClick1">
    <div class="box" @click="handleClick2"></div>
</div>

表单修饰符

• .lazy

• .number

• .trim

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
​
<!-- 将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">
​
<!-- 过滤用户输入的首尾空白字符 -->
<input v-model.trim="msg">

按钮修饰符

键盘的输入

• .enter

• .tab

• .delete (捕获“删除”和“退格”键)

• .esc

• .space

• .up

• .down

• .left

• .right

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

动态class

数组语法、

使用一个数组来动态绑定class。数组中的每个元素表示一个class名称。

基本语法

<div :class="classArray">Dynamic Class Example</div>
​
export default {
  data() {
    return {
      isActive: true,
      isError: false
    };
  },
  computed: {
    classArray() {
      const classes = [];
      if (this.isActive) {
        classes.push('active');
      }
      if (this.isError) {
        classes.push('error');
      }
      return classes;
    }
  }
};
======================================
<!-- 传入一个数组 -->
<div :class="[activeClass, errorClass]"></div>
​
<!-- 可以使用三元表达式 -->
<div :class="[isActive ? 'active' : 'inactive']"></div>
​
数组中也可以使用对象语法
<div :class="[{ active: isActive }, 'text-danger']"></div>

对象语法

基本语法

对象语法：你可以使用一个对象来动态绑定class。对象的属性表示class名称，属性值表示是否应用该class。
  <div :class="classObject">Dynamic Class Example</div>
​
<script>
export default {
  data() {
    return {
      isActive: true,
      isError: false
    };
  },
  computed: {
    classObject() {
      return {
        active: this.isActive,
        error: this.isError
      };
    }
  }
};
</script>
​
<style>
.active {
  color: green;
}
.error {
  color: red;
}
</style>
=======================================================
// 动态修改class的值
<div :class="{ active: isActive, error: isError }"></div>
  <button @click="toggleClasses">Toggle Classes</button>
<script>
export default {
  data() {
    return {
      isActive: false,
      isError: false
    };
  },
  methods: {
    toggleClasses() {
      this.isActive = !this.isActive;
      this.isError = !this.isError;
    }
  }
};
</script>

///
<div v-bind:style="{ color: red, fontSize: 30 + 'px' }">  </div>

列表渲染

如果data里有数组，vue不允许通过下标修改数组的某一项

可以使用数组的方法操作原数据 shift push unshift

给data里的对象添加新的属性

使用vue.set

data{
    return{
    object:{
        name:'pd',
        age:1,
        sex:'男'
    }
}
}
​
mounted(){
    vue.set(this.object,'hobby','导管')
}

条件渲染

v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

声明周期

vue父组件的created和子组件的mounted的执行先后

执行顺序：父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载，

1. 父组件 created

2. 子组件 created

3. 子组件 mounted

4. 父组件 mounted

如果有多个子组件：

父组件created钩子结束后，依次执行子组件的created钩子
多个子组件的created执行顺序为父组件内子组件DOM顺序
多个子组件的mounted顺序无法保证，跟子组件本身复杂程度有关
父组件一定在所有子组件结束mounted钩子之后，才会进入mounted钩子

习题

常见的指令有哪些？

v-on v-bind v- show v-if v-model v-html

v-if 和 v-show的区别，有哪些运用场景？

v-if在切换时会删除和添加dom结点；

v-show只是添加一个display：none，切换是简单的基于css切换，dom结点并未消失。

v-for里key的作用？

给每个item设置一个唯一的标识符,便于跟踪和管理item

v-html的弊端？

被v-html 渲染的内容会变成静态内容，丧失响应性。

常见的修饰符有哪些？

事件修饰符

• .stop

• .prevent

• .capture

• .self

• .once

表单修饰符

• .lazy

• .number

• .trim

动态class的写法？

:class="{isActive ? 'active' : 'inactive'}"
:class="{selected : selectedId === item.id }"
:class="[activeClass, errorClass]"

什么是双向绑定？

v-model，当data里的数据发生变化，视图也随之更新，反之亦然

created和mounted生命周期的区别？

create是在组件实例创建完成，但这时候页面dom节点并未生成，无法访问dom结点。

mounted阶段，页面dom节点渲染完毕，可以访问并且操作DOM结点。

父子组件创建时，created和mounted的先后顺序？

父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载，

1. 父组件 created

2. 子组件 created

3. 子组件 mounted

4. 父组件 mounted