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:nonedom元素依旧还在。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

  • 17
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值