vue笔记

tiehanhan
398 阅读3分钟

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所 有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析

插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 {{}}

  • data里声明的属性
  • js表达式
  • 方法

指令

  • v-once
    <span v-once> {{ msg }}</span>
    v-once 只执行一次性地插值,注意不要对其他插值产生影响
  • v-bind
    简写：":"
    绑定属性
    
    绑定动态属性
    <a :[attributeName]="url"> ... </a>
    
    eg1 若 data(){
        return {
            attributeName:'href'
        }
    }
    eg2 若attributeName复杂拼接可由computed计算所得
    相当于<a :[href]="url"> ... </a>
  • v-html
    '谨慎使用，防止xss'
  • v-if
    特点：“真正”的条件渲染，
          它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
          运行时切换开销比较大
          具有惰性，初始化条件不满足不渲染，只有当第一次满足条件才渲染
    场景：运行时很少改变
  • v-show
    特点：元素总是被渲染，
          切换只是简单基于css样式切换（节点css display: none 与 block 切换），
          初始化开销比较大
    场景：运行时频繁切换
    
   '注意，v-show 不支持 <template> 元素，也不支持 v-else'
  • v-for
    列表渲染
    v-for="(item,index) in items" :key="item.id"
        key值设置：在domdiff时可以大大提升性能
        
    '注意：不能和v-if同时使用，v-for优先级更高，v-if会在每次迭代中切换，性能开销大'
  • v-on
    简写：@
    绑定事件
    click,keyup,keydown,change,focus,blur,...

绑定动态事件
    <a @[event]="methodName"> ... </a>
    
    eg1: 若 data(){
        return {
            event:'focus'
        }
    }
    eg2 若event复杂拼接可由computed计算所得
    相当于<a @focus="methodName"> ... </a>
绑定自定义事件
    this.$emit(event,"**")
  • v-model
    'v-model其实是语法糖:' 可分解为
    text和textarea              :value=""    和  @input=""
    checkedbox和radio           :checked=""  和 @change=""
    select字段将value作为props   :value=""    和 @change=""

修饰符

事件修饰符

  • .stop —— event.stopPropagation();
  • .prevent —— event.preventDefault();
  • .capture —— 事件捕获
  • .self —— 自身触发
  • .once —— 只会触发一次
  • .passive —— 滚动事件的默认行为 (即滚动行为) 将会立即触发
  • .enter，.esc，.tab ... —— 按键修饰符
  • .13 => 废弃 ---按键code修饰符
  • .ctrl.exact —— 只有按ctrl才会触发（解决ctrl+shift会触发ctrlBUG）
  • .left,.right,.middle —— 鼠标特定修饰符

v-model 修饰符

  • .lazy ——默认触发input事件，添加 lazy 修饰符，从而转变为使用 change 事件进行同步
  • .number ——输入数字
  • .trim ——去除前后空格

计算属性和侦听属性

computed 依赖多个数据生成的值

computed：{
    fullName:function(){
        return this.firstName + this.lastName
    }
}

watch 设置多个值

watch:{
    firstName:{
        handler(oldval,newVal){
            //其他数据处理逻辑
        }
    }，
    //是否深层监听
    deep:true,
    // 首次就会执行
    immediate: true
}

如果我们使用下面这样的方式写 watch，那么就要手动注销了，这种注销其实也很简单
const unWatch = app.$watch('text', (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})

unWatch(); // 手动注销watch
复制代码app.$watch调用后会返回一个值，就是unWatch方法，你要注销 watch 只要调用unWatch方法就可以了。

绑定class 和 style

class绑定

  • object形式
<div 
    class="static"
    :class="{ active: isActive, 'text-danger':hasError }">
</div>

data: {
  isActive: true,
  hasError: false
}

结果渲染为：
<div class="static active"></div>
  • 数组形式
<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
结果渲染为：
<div class="active text-danger"></div>


也可以用三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

也可以：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

style绑定

  • object形式
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
  • 数组形式
<div v-bind:style="[baseStyles, overridingStyles]"></div>

'注意点'
    '自动添加前缀'
    当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
    
    'css属性多值情况'
    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

组件间常用通信

  • props/$emit(父子)
props:{
    propsData:{
        
    }
}
  • parent /children（不建议使用 耦合度比较高）
this.$parent.name
  • $attrs
    访问'未写在'props中的属性
    
    this.$attrs.name
  • provide/inject（不建议在项目中使用）
    'provide/inject不支持响应式，可传入响应式数据(如：this.obj.name)，可实现响应式'
    
    'provide使用类似data数据声明，如下：'
    provide() {
        return {
            data1:'data1Val'
            data2:this.obj
        }
    }
    
    '设置provide要使用的响应式数据obj'
    data() {
        return {
            obj: {name: 'kevin'}
        }
    }
    created() {
        setTimeout(() => {this.obj.name = 'changeKevin'})
    }
    
    形式一：
    inject: ['data1', 'data2' ]
    
    {{ data1.name }} `此处data1.name就是响应式的`
    
    形式二：
    inject: {
        data3: {
            from: 'bar', // 设置来源（防止不同组件同名provide值）
            default() {  //设置默认值
                return [1,2]
            }
        }
    }
  • vueBUS09:42:21总线
    let this.$BUS = new Vue()
    结合$on/$emit
  • vuex
    状态管理

组件化理解

组件化是Vue的精髓，Vue应用就是由一个个组件构成的。Vue的组件化涉及到的内容非常多，当面试时 被问到：谈一下你对Vue组件化的理解。这时候有可能无从下手，可以从以下几点进行阐述：

  • 定义：组件是可复用的 Vue 实例，准确讲它们是VueComponent的实例，继承自Vue。

  • 优点：从上面案例可以看出组件化可以增加代码的复用性、可维护性和可测试性。

  • 使用场景：什么时候使用组件？以下分类可作为参考：

    • 通用组件：实现最基本的功能，具有通用性、复用性，例如按钮组件、输入框组件、布局组件等。
    • 业务组件：它们完成具体业务，具有一定的复用性，例如登录组件、轮播图组件。
    • 页面组件：组织应用各部分独立内容，需要时在不同页面组件间切换，例如列表页、详情页组件

  • 如何使用组件

    定义：Vue.component()，components选项，sfc
    分类：有状态组件，functional，abstract
    通信：props，$emit()/$on()，provide/inject，$children/$parent/$root/$attrs/$listeners
    内容分发：<slot>，<template>，v-slot
  • 使用及优化：is，keep-alive，异步组件
  • 组件的本质
    vue中的组件经历如下过程:
    组件配置 => VueComponent实例 => render() => Virtual DOM=> DOM
    所以组件的本质是产生虚拟DOM
avatar
文章
阅读
粉丝